转自: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.html

vscode的自动补全

vscode原本是只有es原生api有带自动补全的功能, 如图所示

但是如果使用node.js或者其require进去的相关函数就比较可怜了。

除了process模块,path、fs、__dirname等也同样没有自动补全。似乎在低版本下使用__dirname还会提示语法错误。

使用Typings添加自动补全

typings官方描述是一个TypeScript的定义管理器,集成管理了常用函数的语法规则。不知道跟微软有没有关系,不过这点倒是真的挺方便的。

官方描述以及使用说明
https://www.npmjs.com/package/typings

vscode可以识别typings,因此可以通过typings来作为插件拓展vscode的功能。具体使用方法如下:

-配置jsconfig.json

在使用typings之前,需要在vscode里面配置一下名为jsconfig.json的文件。配置方法很简单,随便选中一个js文件,vscode右下角会弹出一个绿色的小灯泡,如图所示:

点击进去,顶部会提示
“Create a jsconfig.json to enable richer IntelliSense and code navigation across the entire workspace.”
选择create,vscode就会创造一个jsconfig.json的文件,内容大致如下:

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

所有需要的参数都会帮我们设置好。此时我使用的是vscode v1.2.0生成的jsconfig,低版本自动生成的配置可能会比里面的少一点,但不影响。

-安装typings

使用npm全局安装typings

npm install -g typings

-安装语法插件

以安装node.js自动补全为例,在项目根目录下使用bash或者cmd,输入

typings install dt~node --global

其中”dt~”为使用DefinitelyTyped类型定义的意思,vscode可以识别这种定义。
之后可以看到在项目目录下出来了新的文件夹“typings”

现在输入process,自动地补全出来了~window下可能需要重启下vscode才能看到自动补全的效果。

-express、lodash等的自动补全

类似地,可以使用以上的方法,实现其他模块的自动补全。

typings install dt~express --global
typings install dt~lodash --global
//vscode官方文档上express的typings使用的是
typings install dt~express dt~serve-static dt~express-serve-static-core --global

关于typings的其他相关.

-基本用法

语法复制自typings的Quick Start,个人对注释本地化了一下。

# 安装Typings的命令行代码.
npm install typings --global # 搜索对应模块的typings定义.
typings search tape # 根据名称寻找一个可获得的typings定义.
typings search --name react # 如果你用一个独立包的模块:
# 或者并不是安装全局模块
# 比如并不是在命令行通过输入npm install -g typings这种方式安装的.
typings install debug --save # 如果是通过script标记
# 或者是子环境的一部分
# 或者全局typings命令不可用的时候:
typings install dt~mocha --global --save # 从其他版本处安装typings定义(比如env或者npm).
typings install env~atom --global --save
typings install npm~bluebird --save # 使用该文件`typings/index.d.ts` (在`tsconfig.json`文件使用或者用 `///` 定义).
cat typings/index.d.ts

最新文章

  1. C++设计模式-Facade模式
  2. 浅析正则表达式模式匹配的String方法
  3. Python:IOError: image file is truncated 的解决办法
  4. C#集合 -- Lists,Queues, Stacks 和 Sets
  5. C++之多态的一个例子
  6. struts2 基本用法
  7. JS获取非行间样式及兼容问题
  8. HDU 1194 - Beat the Spread!
  9. CAS Spring Security 3 整合配置(转)
  10. Java SE 9(JDK9)环境安装及交互式编程环境Jshell使用示例
  11. dts的pci模块中bus-range和ranges
  12. js面向对象编程 ---- 系列教程
  13. 【CH6201】走廊泼水节
  14. getDimension()、getDimensionPixelOffset()和getDimensionPixelSize()区别详解
  15. MAC mojave版本系统 破解软件
  16. java jdk查看源代码
  17. Codeforces Round #344 (Div. 2) B. Print Check 水题
  18. Log level with log4j and Spark
  19. (转自精通Python设计模式)Python设计模式之创建型模式——2.建造者模式
  20. Linux Shell系列教程之(九)Shell判断 if else 用法

热门文章

  1. Memcache的基本应用
  2. xml配置与使用
  3. Ubuntu 12.04更换显示器后显示“显示不支援”,只能进恢复模式工作
  4. The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. (关于jdbc)
  5. php 编码规范(1)
  6. Web之CSS开发技巧: CSS 居中大全
  7. jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
  8. 从别人写的 Object-C 中 Singleton (单例) 模式 中的一些理解--备
  9. New ipad安装Perl支持安装nikto
  10. Entity Framework with MySQL 学习笔记一(关系)