利用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 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python遍历目录的方法小结
2016/04/28 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python实现媒体播放器功能
2018/02/11 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Django中的AutoField字段使用
2020/05/18 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
董事长秘书岗位职责
2013/11/29 职场文书
服装促销活动方案
2014/02/23 职场文书
公司营业员的自我评价
2014/03/04 职场文书
实习生岗位职责
2014/04/12 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
义卖募捐活动总结
2015/05/09 职场文书