利用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 nth-child()选择器的简单应用
Jul 10 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
js css自定义分页效果
Feb 24 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php实现点击可刷新验证码
2015/11/07 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python实现外卖信息管理系统
2018/01/11 Python
python批量修改图片大小的方法
2018/07/24 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
django实现用户注册实例讲解
2019/10/30 Python
Python多分支if语句的使用
2020/09/03 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
接受捐赠答谢词
2014/01/27 职场文书
北京导游词
2015/02/12 职场文书
网聊搭讪开场白
2015/05/28 职场文书