美文网首页
编写nodejs,在VSCODE上智能提示的前世今生

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

作者: zshawk1982 | 来源:发表于2018-12-24 16:43 被阅读44次

    如何在编写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

    相关文章

      网友评论

          本文标题:编写nodejs,在VSCODE上智能提示的前世今生

          本文链接:https://www.haomeiwen.com/subject/exszkqtx.html