编写nodejs,在VSCODE上智能提示的前世今生

如何在编写node或者其他js类代码的时候让vscode提供智能代码提示,参考了大量网上的文章,一个词。。。痛心疾首。。。文章不管是2017的还是2018发布的,想要开启vscode的智能提示,各种不方便,最关键的是这些文章居然都是用的过时的方法来解决这个问题。。。。
首先我们来看下这些过时的方法的套路。。。最后再来安利新的玩法
这里先丢上各类过时方法的文章链接,跟原文作者无仇,就事而论,大家不要打我呀

The TypeScript Definition Manager. TypeScript的类型定义管理器

说道这个类型定义管理器,首先我们要谈下后缀为(*.d.ts)的类型定义文件,这是一种元数据信息文件,该文件可以在不需要修改原有JavaScript文件的情况下,而给JavaScript添加元数据类型信息,而这些类型信息则可以辅助IDE,给出有智能的提示信息,以及重构的依据。
而我们的TypeScript的类型定义管理器就是对这种文件进行管理的一个工具,早期这种工具叫TSD,后来改名成了Typings,所以我们需要利用这个叫Typings的工具安装相应的.d.ts文件,然后VSCODE就会利用这个文件,然后就可以提供给我们编码时候的智能提示(英文叫:Intelli Sense)
按照上面的博客给出的方法,我们来看下他们是如何做的:
1.利用npm安装Typings

npm install -g typings

2.在当前项目下初始化typings.json文件,这样就会在当前项目下出现一个typings.json文件

typings init

安装后如图所示:


1.png

3.安装提供对应js插件的.d.ts文件

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

这里的dt代表源,这里的--global表示安装在globals文件中,--save表示要保存到typings.json中
我们安装了node的.d.ts文件,会自动生成一个typings文件夹,整个目录结构如图:


2.png

但是这里安装koa的.d.ts文件则会出现问题:

会报该模块是一个外部模块,不是全局模块,不能使用--global

从这里其实已经可以看到开始出一些问题了!!!
但这其实还好,安装koa的.d.ts时候通过去除--global也可以安装,但整个安装已经不是很统一了。

koa被安装在modules下,而不是global下了

4.安装完文件之后,我们还需要再做一步才可以让智能提示显示出来
这一步实际上有两种方法
第一种是在需要进行只能提示的文件最上行增加提示信息文件所在目录,格式如下:

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

这是因为koa和node的定义信息会被统一引用到typings下的index.d.ts中


引用的node和code的定义文件

所以我们只需要在我们自己的文件中引入这个typings下的index.d.ts就可以出现智能提示了


node的process已经可以产生方法提示了

koa也可以产生提示了

第二种是在项目所在目录(在这里是NODETEST文件夹中)增加一个名为jsconfig.json的空文件

好了,上面分析完了上面大佬们提供的方式,同时我们也看到了采用这种方式,不是所有的JS智能提示都可行了,那么该如何解决了,问题又出在哪里了?有请解答君为大家解释一下:
会出现错误的原因在于Typings是一种过时的方法了。。。。

5.png

大大的Deprecation呀!!原贴自己看哦
所以采用Typings安装.d.ts文件已经不可行了,原话是:

This project will remain operational for the foreseeable future, but is effectively deprecated. New projects should use @types from NPM.
Typings将仍然在可预见的未来是可操作的,但是将渐渐被废弃,新的项目将使用来自NPM的@types,说白了就是我们以后安装.d.ts不在用Typings了,而是采用npm install @types/angular这种方式了。

那么我们使用VSCODE的智能提示也得像现在这种方式安装了再来么?也不用了
最新版的VSCODE已经可以自动进行智能提示了,不需要额外使用typings了,也不需要在引入和jsconfig.json(这个文件还是可以用,不过是额外的作用了)。
再看原文:

Now when you require or import lodash, VS Code will use the automatically downloaded type declaration files for the library to provide rich IntelliSense. Most common JavaScript libraries have type declaration files available. You can search for a library's type declaration file package using the TypeSearchsite.
现在当你用require或者import引入lodash的时候,VSCODE将自动下载类型定义文件来提供智能提示,大多数的JS库都有合适的类型提示文件,你可以去TypeSearch网站查询相应JS库的类型提示文件。

删掉typings文件夹和typings.json,也不需要jsconfig.json了,如下图所示,依然好使,只是个人感觉,使用typings的方式提供的智能提示貌似在个别方法上信息量更多些。


没有使用typings方式

使用typings方式

jsconfig.json的额外作用1
原文中:
In more complex projects, you may have more than one jsconfig.json file defined inside a workspace. You will want to do this so that the code in one project is not suggested as IntelliSense to code in another project.Illustrated below is a project with a client and server folder, showing two separate JavaScript projects.

g.png

jsconfig.json的额外作用2
原文中:
Using the "exclude" property
The exclude attribute (a glob pattern) tells the language service what files are and are not part of your source code. This keeps performance at a high level.If IntelliSense is slow, add folders to your exclude list (VS Code will prompt you to do this if it detects the slow down).
g2.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容