Visual Studio Code 使用 Typings 实现智能提示功能

前言

我们知道在IDE中代码的智能提示几乎都是标配,虽然一些文本编辑器也有一些简单的提示,但这是通过代码片段提供的。功能上远不能和IDE相比。不过最近兴起的文本编辑器的新锐 Visual Studio Code 可以通过 Typings 来对 JavaScript 实现智能提示功能,对于一个文本编辑器来说,这点很难得。所以Visual Studio Code 特别适合用来编写 JavaScript(Node.js)程序; 同时,如果我们需要编写一些尝试性的小代码片段,例如:Lodash.js 某个函数的小Demo,因为我们不想研究一个函数的使用方式而去使用IDE新建一个项目,这时候Visual Studio Code 就是一个非常好的选择,而且它同样可以运行和调试 JavaScript 代码(依赖于 Node.js),并且还包含非常方便的代码提示功能。

从这点来说,我觉得Visual Studio Code 已经算得上是一个精悍的小型IDE了。

通过NPM安装Typings

通过 NPM 我们可以很容易的安装 Typings ,在命令行中输入:

npm install -g typings

安装完成后,在命令行中输入:

typings --version

看到版本信息就表示 typings 工具安装完成了:

NPM是和Node.js一起安装的,如果你想使用NPM的话,那么你应该先安装Node.js

安装相关提示信息文件

安装完成后,我们需要安装相应的需要提示功能库或者框架的类型信息文件,在这里我们新建一个文件夹 NodeSnippet,使用命令行进入到该目录中,分别输入下面两个命令来安装NodeLodash的类型接口信息文件:

typings install dt~node --global --save
typings install lodash --save

什么时候需要使用 --global 参数:

  • 如果安装的包使用script标记来引用(如jQuery)(也就是在浏览器中使用)
  • 这个包是属于环境的一部分(如node)时
  • 该包没有使用 --global 安装失败时

这时候我们可以看到我们的 NodeSnippet目录中多了一些文件:

这些文件就是为我们提供提示信息的类型类型文件(使用TypeScript定义)。查看Typings是否支持某个库或框架的智能提示,我们可以使用下面的命令:

typings search exampleName

启用智能提示功能

通过两种方式来启动提示功能:

  • 第一种是在需要进行只能提示的文件最上行增加提示信息文件所在目录,格式如下:
/// <reference path="./typings/index.d.ts" />
  • 第二种是在项目所在目录(在这里是NodeSnippet文件夹中)增加一个名为jsconfig.json的空文件。

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

启用提示功能后我们就可以非常愉快的使用Visual Studio Code 为我们提供的智能提示功能了。如下所示:

注意事项

Typings VS TSD

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

 npm rm -g tsd

使用 CNPM

在国内由于的原因,有时候使用NPM安装模块的速度上会很慢,这时候我们其实可以选择国内淘宝的NPM镜像,使用下面的命令来进行安装:

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

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

cnpm install lodash 

可以看到除了cnpm替代了npm其他的并没有任何区别。

参考&进一步阅读

https://github.com/typings/typings
https://code.visualstudio.com/docs/languages/javascript
https://npm.taobao.org/

时间: 2024-10-20 23:11:17

Visual Studio Code 使用 Typings 实现智能提示功能的相关文章

Visual Studio 2013开启JavaScript的智能提示功能

在前一次的发布的时候,我们共享了Visual Studio 2013中Windows Azure移动服务的集成和功能.其中包含了移动服务表脚本的编辑能力的介绍.这一次的发布,我们将描述在Visual Studio中怎么样在你的服务器脚本中激活智能提示.这个功能并没有被集成到Visual Studio 2013 预览版中,下边的步骤可以帮助你把它打开. 开始之前,请从这里下载我们的IntelliSense定义文件.将这些文件保存到一个相对容易访问的路径. 智能提示知多少? 我们今天将要发布的文件能

Visual Studio Code使用typings拓展自动补全功能

转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.com/Docs/runtimes/nodejs#_intellisense-and-typings gyzhao写的”Visual Studio Code 使用 Typings 实现智能提示功能”: http://www.cnblogs.com/IPrograming/p/VsCodeTypings

Visual studio 2017 中的Javascript智能提示

1.智能提示 对于JS文件中的API,你若需要让那个JS文件中的方法能够在你写的那个JS文件中能够智能显示的话,直接把它拉进你的JS文件中就好了. 举个例子:你想 在你正在写的a.js文件中引用b.js中的功能与函数.很简单,你只需要把b.js文件拉到你的a.js文件中就好了.这时在你的文件 顶端会显示这样一行内容:/// <reference path="../angular.js" />. 就是这样,智能显示的很全面,就像你自己写类文件一样,里面的注释什么的都全部显示出

Visual Studio Code python 代码快速自动提示

1.file --> setting->设置 搜索 python 或者auto_complete setting.json { "explorer.confirmDelete": false, // "python.linting.pylintArgs": [ // "--generate-members" // ], "editor.suggestSelection": "first", &q

Visual Studio Code插件

Visual Studio Code插件 https://www.cnblogs.com/clwydjgs/p/10078065.html 写在前面 在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服. 我是来给大家安利插件的,想做个比较全面的插件集合给大家.网上的我也看过一些,但是都比较零散,时间也久了一些,我结合最近的情况,总结一

Visual Studio Code 中编写 C++ 的工作流

1. 官网下载 Visual Studio Code ,安装.按提示安装 cpp 插件和 cmake 插件. 官网下载 CMake ,安装. 官网下载 Mingw ,安装. 安装 Mingw 时,注意勾选 mingw32-automake, mingw32-base, mingw32-gcc, mingw32-gcc-g++, msys-base, mingw32-binutils, mingw32-gdb. 2. File->Open Folder 打开项目所在文件夹. 文件夹的目录应为 Pr

关闭visual studio code 智能提示功能

对于程序初学者来说,应该少用IDE的提示功能,因为这样有助于记住一些常用的函数等功能.这也是为什么戏称喜欢用notepad++(windows)或者vim编辑器(Linux)来开发代码是大神的原因,而且对于初学者,很多老师也建议用记事本敲代码.好,废话不多说,直接出解决办法: 打开visual studio code(下面简称vsc),进入设置, 然后在设置中的user settings中(即右边),输入以下内容("editor.quickSuggestions":false),然后c

Visual Studio 2013 智能提示功能消失解决办法

Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 2013文件夹 --> Visual Studio Tools --> Developer Command Prompt for VS2013 输入DOS命令: CD Common7/IDE 进入到该工具下的子文件夹中 输入:devenv.exe /resetsettings ,重置Visual St

Visual Studio 2012 智能提示功能消失解决办法

安装为Visual Studio 2012且更新到了Update3,但是发现智能提示功能用不了,查了一下,网上各种资料,重装VS,连重装系统的都有.不过有很多朋友都是使用命令行重置VS的方法解决了这个问题,我试了下但是没起作用,不过去掉了两个参数(原:devenv.exe /setup /resetuserdata /resetsettings)后就成功了.步骤如下: 开始菜单 -->所有程序-->Visual Studio 2012文件夹 --> Visual Studio Tools