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


Posted in Javascript onJuly 07, 2017

使用 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文件对哪些文件起作用。

开启后,如图:

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

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

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

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

在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"
  ]
}

详情请参阅文档

总结

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

Javascript 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
vue.js实例todoList项目
Jul 07 #Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
Angular.js自动化测试之protractor详解
Jul 07 #Javascript
vue.js全局API之nextTick全面解析
Jul 07 #Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
对python 多个分隔符split 的实例详解
2018/12/20 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python执行时间的几种计算方法
2020/07/31 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
顶岗实习计划书
2014/01/10 职场文书
生日邀请函范文
2014/01/13 职场文书
成绩单评语
2015/01/04 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python