利用types增强vscode中js代码提示功能详解

使用 types 增强vscode中javascript代码提示功能

微软的vscode编辑器是开发typescript项目的不二首选，其本身也是采用typescript开发的。

使用过ts的同学都知道 *.d.ts 类型声明文件，其管理工具，从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示，类型检查提供了有力支持。

我们也可以使用类型声明文件，增强vscode编辑javascript时的智能提示。

关于vscode这方面更深的说明，请访问以下链接：

1、https://code.visualstudio.com/docs/languages/javascript

2、https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio

3、https://code.visualstudio.com/docs/editor/intellisense

安装 types 文件

现在，我们可以不依赖typings直接使用npm安装所需要的types类型文件。

比如，我们要安装sequelize的类型文件，可以直接使用：

npm install @types/sequelize --save-dev

安装完成后，我们在 node_modules目录下发现有一个@types目录，该目录里就是所安装的所有的类型声明文件。

如果有的第三方npm包官方未提供类型声明文件时，可能会安装出错，找不到相应的包。这时，就没法利用其增强js代码的提示功能。

如果你熟悉使用ts如何编写*.d.ts文件，也可以自己写一个。

配置 jsconfig.json 文件

对于jsconfig.json文件的详细说明，请参照这里。

在jsconfig.json文件中添加：

"include": [
 "model/**",
 "service/**"
],
"typeAcquisition": {
 "include": [
  "sequelize"
 ]
}

其中typeAcquisition参数是必配的，标识启用类型感知功能，里面的include标识对哪个包启用。

上面的include不是必须的，只是用来标识jsconfig.json文件对哪些文件起作用。

开启后，如图：

我们上图中例子提示的就是sequelize包中Model类的实例方法和属性。

vscode对智能感知的图标，也给了一定的汇总：

在js文件中启用语义检查

如果要在js中启用类型检查，可以在文件最上面添加 // @ts-check 注释。

// @ts-check
let easy = 'abc'
easy = 123 // Error: Type '123' is not assignable to type 'string'

或者在 jsconfig.json中进行配置：

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

详情请参阅文档

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 利用vscode编写vue的简单配置详解

    前言 本文主要给大家介绍的是关于vscode编写vue简单配置的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: PS:现在推荐使用vetur插件 win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode. 与sublime text相比,vscode有不少优点: 中文输入法支持更好.在windows平台下,需要st支持中文输入需要安装各种插件,而且效果也是差强人意. 基础功能更全面.vscode自带插件管理.git.sidebar.

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • Eclipse中实现JS代码提示功能（图文教程）

    用Eclipse写JS代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键你的项目 convert to Tern Project 也行 根据自己的需要变动,直接OK,接下来就是见证奇迹的时刻: 如果要变动就右键项目 总结 以上所述是小编给大家介绍的Eclipse中实现JS代码提示功能(图文教程),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常

  • FCS中ActionScript代码提示功能

    FCS中ActionScript代码提示功能

    在编写FlashCom代码的时候,如果经常使用合理的命名规范,可以很好的借用FlashMX 2004的代码提示功能.例如,在编写fcs代码的时候,对FlashCom中对象采用下面的命名方式,在编辑代码的时候在对象名称后面写完点号之后就会弹出代码提示,其中包含了该对象可以使用的属性和方法,很实用哦.各个对象的建议命名结尾字串 1 : _cam Camera对象2 : _video Video对象 3 : _mic Microphone对象4 : _so ShareObject对象 5 : _nc

  • 利用python求解物理学中的双弹簧质能系统详解

    利用python求解物理学中的双弹簧质能系统详解

    前言 本文主要给大家介绍了关于利用python求解物理学中双弹簧质能系统的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定.假定没有外力时,两个弹簧的长度为L1和L2. 由于两物体有重力,那么在平面上形成摩擦力,那么摩擦系数分别为b1和b2.所以可以把微分方程写成这样: 这是一个二阶的微分方程,为了使用python来求解,需要把它转换为一阶微分方程

  • 利用Celery实现Django博客PV统计功能详解

    前言 前几天给网站的文章增加了pv统计,之前只有uv统计.之前没加pv统计是觉得每个用户每访问一次文章,我都需要做一次数据库写操作实在是有损性能,毕竟从用户在the5fire博客的的一次访问来看,只需要从数据库里拿到对应的文章(通常情况下是从缓存中拿),然后返回给浏览器.写操作无意义.之前的uv,也是针对每个用户24小时内只会有一次写操作. 不过话说回来,就对于the5fire博客这么个小站点来说,就算每次访问我写十几次数据库都没啥影响,毕竟量小的可怜.但是咱们码农不是得有颗抗亿级流量的心嘛.

  • 完善CodeIgniter在IDE中代码提示功能的方法

    本文简述了完善CodeIgniter 在IDE中的代码提示功能的方法,只需将如下代码拷贝到system/core/路径下Controller.php及Model.php即可实现这一功能需求: /** * @var CI_Loader */ var $load; /** * @var CI_DB_active_record */ var $db; /** * @var CI_Calendar */ var $calendar; /** * @var Email */ var $email; /**

  • 基于JS实现密码框(password)中显示文字提示功能代码

    基于JS实现密码框(password)中显示文字提示功能代码

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

  • 解决eclipse中没有js代码提示的问题

    解决eclipse中没有js代码提示的问题

    自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决,特别是有个在javascript中editor中content assit里改一个地方为zjs的方法,试了几次也没成功,不知道各位老铁有没有成功? 再后来,我下了个插件,问题就解决了. 打开eclipse点击window旁边的Help选项---> Eclipse Marketplace---> 在

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • 在myeclipse中如何加入jquery代码提示功能

    一. 在myeclipse中加入jquery代码提示功能(spket是一个写JS的插件) 1. 打开myeclips-windows-preference找到"spket"单击"javaScript Profiles" 2. 单击"New"输入"jquery",然后单击"Add library"选择"jquery" 3. 单击"Add files",将jquery.j

随机推荐