优化VisualStudioCode 的⾃动补全
Visual Studio Code （简称VS Code）是个很棒的代码编辑器，内置多种语⾔的⾃动补全功能，写JavaScript也不例外，VS Code提供的⾃动补全还是很赞的。不过⾃动补全功能在有些情况下会失效，⽐如 ElementById() 或 document.querySelector()
返回的对象，是没有⾃动补全的：就像图中展⽰的，canvas节点应该有个 getContext() ⽅法。但是在编码阶段，VS Code ⽆法确定 document.querySelector('#canvas') 返回的是什么类型的节点，⾃动补全就⽆能为⼒了。
⾯对这种情况，我们可以在代码注释中添加这⼀⾏：
通过注释中的 @type 指令，我们就可以告诉VSCode，canvas 变量就是个 HTMLCanvasElement 类型的 DOM 节点。这样⾃动补全就
⼜“复活”了。
注释中 @type，实际上是⼀个 JSDoc 指令，它指⽰下⼀⾏的变量属于什么类型，⽅便编辑器或IDE做语法检查或⾃动补全。另外，在使⽤JS库函数时，VS Code的⾃动补全很难⽣效。这时候我们可以给VS Code “⼀点提⽰”，具体怎么做呢？如何获得⼀个库的接⼝定义？官⽅的⽤法就是通过 npm 来获取，⽐如获取 THREE.js的 接⼝定义：
其中 @types/ 后⾯跟随就是JS库的名称。你会发现 node_modules 下多出了⼀个 @types/three ⽬录，⾥⾯的 index.d.ts 就是
DefinitelyTyped 为我们写好的接⼝⽂件。使⽤ 在代码中引⽤接⼝⽂件：
/** @type  {HTMLCanvasElement} */
var  canvas = document.querySelector('#canvas');
npm install --save-dev @types /three
/// <reference path="./node_modules/@types/three/index.d.ts" />
这⾏就是触发⾃动提⽰的关键，有了这⾏，引⽤JS库都可以有⾃动补全了，甚⾄还有参数列表：
是不是顿时觉得⽅便了许多呢：-）。如果稍微研究下VS Code的安装⽬录，你会发现有个 lib ⽬录保存了许多接⼝⽂件：
ls [VS Code]安装⽬录\resources\app\extensions\node_modules\typescript\lib
2018/06/0617:364,505 lib.dom.iterable.d.ts
2018/06/0617:362,902 llection.d.ts
2018/06/0617:3619,608 d.ts
2018/06/0617:361,349 lib.es2015.d.ts
2018/06/0617:362,129 ator.d.ts
2018/06/0617:3614,537 lib.es2015.iterable.d.ts
2018/06/0617:3610,648 lib.es2015.promise.d.ts
2018/06/0617:361,961 lib.es2015.proxy.d.ts
2018/06/0617:361,913 flect.d.ts
2018/06/0617:361,657 lib.es2015.symbol.d.ts
2018/06/0617:3610,300 lib.es2015.symbol.wellknown.d.ts
2018/06/0617:364,870 lib.es2016.array.include.d.ts
2018/06/0617:36957 lib.es2016.d.ts
2018/06/0617:36643,319 lib.es2016.full.d.ts
visual studio和vs code的区别2018/06/0617:361,152 lib.es2017.d.ts
原来 VS Code也有依靠这些接⼝⽂件，完成原⽣JS 的⾃动补全的。