通过Typings为Visual Studio Code增强智能提示功能

时间:2022-12-14 13:57:55

缘起

最近在学习Node.jsThinkJS这个框架,用vscode作为开发环境。默认情况下vscode对ThinkJS的代码提示并不好,所以研究了一下,原来可以同通过Typings来让vscode拥有强大的智能代码提示功能

通过NPM安装Typings

npm install -g typings  //在node环境下安装typings
typings --version //查看typings当前版本

通过Typings安装代码提示信息文件

例如我们此处需要安装jquery的代码提示文件,项目目录为c:\test

cd test  //进入到项目目录
typings install jquery --save //该命令应该在项目目录下运行

此时我们可以看到项目目录下多了些文件。

通过Typings为Visual Studio Code增强智能提示功能

这些文件就是为我们提供提示信息的类型类型文件(扩展名为.d.ts)。

ThinkJS的代码提示文件 从https://github.com/75team/thinkjs/blob/master/template/think.d.ts 下载放到typings目录下

查看Typings是否支持某个库或框架的智能提示,我们可以使用下面的命令:

typings search exampleName

启用智能提示功能

  1. 方法一:在需要进行只能提示的文件最上行增加提示信息文件所在目录,格式如下:

    /// <reference path="./typings/think.d.ts" />

这里需要注意 自己根据实际情况修正 path 指定的.d.ts文件路径

  1. 方法二:在项目所在目录(在这里是NodeSnippet文件夹中)增加一个名为jsconfig.json的空文件。

jsconfig.json文件的内容可以参考:https://code.visualstudio.com/docs/languages/javascript

注意事项

Typings VS TSD

Typings是作为TSD的替代者而出现的,如果你已经安装了TSD,那么需要知道现在TSD已经不推荐使用了。如果已经安装TSD请执行下面的命令来移除它:

npm rm -g tsd

使用 CNPM 安装 node包

有时候使用NPM安装模块很慢,此时我们可以选择国内淘宝的NPM镜像,使用下面的命令来进行安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后使用cnpm来代替npm命令即可,例如下面安装一个lodash模块的示例:

cnpm install lodash

参考阅读

https://github.com/typings/typings

https://code.visualstudio.com/docs/languages/javascript

https://npm.taobao.org/

http://www.cnblogs.com/IPrograming/archive/2016/04/30/VsCodeTypings.html