利用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 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
vue中使用props传值的方法
May 08 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
如何基于js判断浏览器版本
Feb 20 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
php设计模式 Delegation(委托模式)
2011/06/26 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
Vue.js实现拖放效果的实例
2016/09/30 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python实现解数独程序代码
2017/04/12 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Django models.py应用实现过程详解
2019/07/29 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
护士辞职信模板
2014/01/20 职场文书
课程改革实施方案
2014/03/16 职场文书
入股合作协议书
2014/10/12 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书