利用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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
初识Node.js
Sep 03 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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
加强版phplib的DB类
2008/03/31 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python json模块使用实例
2015/04/11 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
浅析matlab中imadjust函数
2020/02/27 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
学校联谊活动方案
2014/02/15 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
妇产科护理心得体会
2016/01/22 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
基于docker安装zabbix的详细教程
2022/06/05 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers