VSCode中利用d.ts文件实现JavaScript智能提示

VSCode实现JS智能提示概述

自动补全（智能提示）

此前微软推出TypeScript语言，结合tsd文件，在Visual Studio中编写TypeScript代码体验极佳，其智能提示功能表现突出。

Visual Studio Code（VSCode）自然继承了这一特性。

VSCode中的自动补全功能依赖于typings（类型定义）。

具体效果如下图所示：

环境准备与配置

第一步：安装Node.js

由于需要借助Node.js中的npm工具来安装第三方提供的d.ts文件，因此首先需要安装Node.js。具体操作无需赘述，前往Node.js官网下载对应版本的安装包，按提示一步步完成安装即可。

第二步：添加项目配置文件

在项目根目录下创建一个名为jsconfig.json的文件，其内容配置如下：

{
 // See https://go.microsoft.com/fwlink/?LinkId=759670
 // for the documentation about the jsconfig.json format
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "allowSyntheticDefaultImports": true
 },
 "exclude": [
 "node_modules",
 "bower_components",
 "jspm_packages",
 "tmp",
 "temp"
 ]
}

该配置文件的主要作用是告知VSCode编辑器，当前项目属于JavaScript类型的项目。

安装类型定义文件

第三步：安装第三方提供的d.ts文件

例如，若希望获得jQuery的智能提示，可执行以下命令：

npm install @types/jquery -save

需要注意的是，应使用如下命令进行安装操作。

$ npm install @types/jquery -save --registry=https://registry.npm.taobao.org

命令末尾追加的一长串参数，表示指定通过淘宝镜像服务器进行安装。

执行完毕后，你会发现项目目录中新增了node_modules/@types/jquery文件夹。

此时，即可实现前文图片所示的智能提示效果。

自定义d.ts文件的使用

第四步：使用自定义编写的d.ts文件

如果是自行编写的d.ts文件，只需将该文件放置于项目根目录或项目的任意目录下即可生效。

关于如何编写d.ts文件，可参考以下链接：//www.jb51.net/article/138217.htm

总结

以上即为本文的全部内容，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。