node.js 如何将 Intellisense 文件导入 vsCode (Visual Studio Code)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29975036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-02 18:42:02  来源:igfitidea点击:

How to Import Intellisense files into vsCode (Visual Studio Code)

node.jsexpressjavascript-intellisensevisual-studio-code

提问by kurtcorbett

I'm not sure I understand how the intellisense works for Microsoft's new vsCode text editor. In the docsunder the "Great Code Editing Experience"heading, it shows a warning under the node global variable __dirand offers a lightbulb suggestion to add a reference to a d.ts file so you can get intellisense for node:

我不确定我是否理解 Intellisense 如何为 Microsoft 的新 vsCode 文本编辑器工作。在“伟大的代码编辑体验”标题下的文档中,它在节点全局变量下显示警告并提供灯泡建议以添加对 d.ts 文件的引用,以便您可以获得节点的智能感知:__dir

enter image description here

在此处输入图片说明

I have 2 questions:

我有两个问题:

1 - How do I import DefinitelyTypedfiles (d.ts) directly (without editor suggesting it) or do I have to copy them from the github source and put them in a typings directory?

1 - 我如何直接导入绝对类型文件 (d.ts)(没有编辑器建议),或者我是否必须从 github 源复制它们并将它们放在typings 目录中?

2 - Can I get intellisense for any library that has a typescript definition? I tried the below, but when I type in express.or when., I don't get any intellisense. However, I do get node intellisense.

2 - 我可以为任何具有打字稿定义的库获得智能感知吗?我尝试了以下操作,但是当我输入express.或 时when.,我没有得到任何智能感知。但是,我确实得到了节点智能感知。

/// <reference path="../typings/node/node.d.ts"/>
/// <reference path="../typings/express/express.d.ts" />

var when    = require('when')
  , express = require('express')
  , gulp    = require('gulp')

回答by kurtcorbett

UPDATE: August 2016: TSD is now depreciated. instead use https://www.npmjs.com/package/typings

更新:2016 年 8 月:TSD 现在已折旧。而是使用 https://www.npmjs.com/package/typings

npm install typings --global

OR

或者

If using VS2015 NodeJS v1.2 released 29th July 2016 then [email protected] is installed automatically for you during first use:

如果使用 2016 年 7 月 29 日发布的 VS2015 NodeJS v1.2,则在首次使用时会自动为您安装 [email protected]

Executing command 'npm install "C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO 14.0\COMMON7\IDE\EXTENSIONS\MICROSOFT\NODE.JS TOOLS FOR VISUAL STUDIO.2\TypingsAcquisitionTool"
[email protected] ..\..\..\..\..\node_modules\ntvs-typings-acquisition-tool
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

-----Original Answer-----

-----原答案----

There is a package manager for Typescript Definition Files. This is a community driven repository containing Typescript definitions for many popular libraries.

Typescript 定义文件有一个包管理器。这是一个社区驱动的存储库,包含许多流行库的 Typescript 定义。

You can install tsd by following the instructions here.

您可以按照此处的说明安装 tsd 。

Once you install tsd globally, you can install packages from your project root in the command line like this:

全局安装 tsd 后,您可以在命令行中从项目根目录安装软件包,如下所示:

$ tsd install express --save

This will create a typings directory if one doesn't exist and adds an express directory with an express.d.tsfile inside.

如果一个目录不存在,这将创建一个typings 目录,并添加一个包含express.d.ts文件的express 目录。

Screenshot

截屏

It also creates a tsd.d.tsfile that contains the references to all of your tsd files. If I install a few more tsd's, here is what it looks like.

它还会创建一个tsd.d.ts文件,其中包含对所有 tsd 文件的引用。如果我再安装几个 tsd,这就是它的样子。

enter image description here

在此处输入图片说明

Now to access my tsd files, all I need to do is reference their path in at the top of my code with /// <reference path="typings/tsd.d.ts" />

现在要访问我的 tsd 文件,我需要做的就是在我的代码顶部引用它们的路径 /// <reference path="typings/tsd.d.ts" />

enter image description here

在此处输入图片说明

Now I get intellisense.

现在我得到了智能感知。

enter image description here

在此处输入图片说明

回答by Dima Fomin

In Jan'2016 "tsd" package was deprecated. Use "typings" package instead.

2016 年 1 月,“tsd”包被弃用。改用“typings”包。

See https://github.com/DefinitelyTyped/tsd/issues/269

https://github.com/DefinitelyTyped/tsd/issues/269

And you could find in VS Code (ext install) two extentions - Typings Installerand Typingswhich helps to install d.ts definition files easily from VS Code.

您可以在 VS Code (ext install) 中找到两个扩展 - Typings InstallerTypings,这有助于从 VS Code 轻松安装 d.ts 定义文件。

回答by kepils

You can achieve this with jsconfig.json file after April 2017 release.

您可以在 2017 年 4 月发布后使用 jsconfig.json 文件实现此目的。

Sample content of the file:

文件的示例内容:

{
 "typeAcquisition": {
     "include": [
         "jquery",
          "underscore"
     ]
   }
}

See the jsoncifg.json reference for VSCode here.

此处查看 VSCode 的 jsoncifg.json 参考

回答by Mahesh V S

Check if you are working in Explicit Project mode(REF: https://code.visualstudio.com/Docs/languages/javascript#_javascript-projects-jsconfigjson)

检查您是否在显式项目模式下工作(参考:https: //code.visualstudio.com/Docs/languages/javascript#_javascript-projects-jsconfigjson

What is happening?

怎么了?

In the Explicit Project Mode, VS Code uses "main.d.ts" files under the typings folder for intellisense. This file will have reference to other definition files and hence the intellisence works perfect. In my case, the main.d.ts looks like the following

显式项目模式下,VS Code 使用类型文件夹下的“main.d.ts”文件进行智能感知。该文件将引用其他定义文件,因此智能工作完美。就我而言,main.d.ts 如下所示

/// <reference path="main/ambient/express-serve-static-core/index.d.ts" />
/// <reference path="main/ambient/express/index.d.ts" />
/// <reference path="main/ambient/node/index.d.ts" />
/// <reference path="main/ambient/serve-static/index.d.ts" />

In the File Scope Mode, VS Code will not check for the typings definitions and hence no intellisence. In such case to add intellisence, the reference tag will come handy as you are referring the definition manually. If you are referring manually, refer the main.d.ts under the typings rather than going for definition for a specific library. This will make your code less reference dense.

File Scope Mode 中,VS Code 不会检查类型定义,因此没有智能。在这种情况下,要添加智能,当您手动引用定义时,引用标签会派上用场。如果您手动引用,请参阅类型下的 main.d.ts,而不是查找特定库的定义。这将使您的代码不那么密集。

Also note that the typescript equivalent for jsconfig.jsonis tsconfig.jsonwhich will also set the editor to Explicit Project mode.

另请注意,与jsconfig.json等效的打字稿是tsconfig.json,它也会将编辑器设置为显式项目模式。

回答by tamj0rd2

If you'd like to automatically install the type definitions for your packages, you could download the Types auto installerextension. It will watch your package.jsonand bower.jsonand automatically install types for you.

如果你想为你的包自动安装类型定义,你可以下载Types 自动安装程序扩展。它将监视您package.jsonbower.json自动为您安装类型。

I think the best part about this extension is that you don't have to include the /// referencelines in your code because it installs the types through npm.

我认为这个扩展最好的部分是你不必/// reference在代码中包含这些行,因为它通过 npm 安装类型。

回答by Andrew Lavers

I got express intellisense to work with express by downloading the express.d.tsfile from https://github.com/borisyankov/DefinitelyTyped, and referencing it with a path relative to my project dir:

通过express.d.tshttps://github.com/borisyankov/DefinitelyTyped下载文件,并使用相对于我的项目目录的路径引用它,我得到了快速智能感知来使用 express :

/// <reference path="express.d.ts"/>

I'm still trying to find what /typingsrefers to. It might also be nice to configure d.tsfiles as part of project settings.

我仍然试图找到/typings指的是什么。将d.ts文件配置为项目设置的一部分也可能很好。

Edit:

编辑:

Found it.

找到了。

~/Downloads/VSCode-osx
? find . -type d -name "typings"
./Visual Studio Code.app/Contents/Resources/app/node_modules/applicationinsights/Scripts/typings

So they have node, async, and applicationInsightsbundled into the OSX .app by default. Anything else you want I guess you can simply include as I did above.

因此,他们有nodeasync,并applicationInsights捆绑到默认的OSX的.app。你想要的任何其他东西我想你可以简单地包括我上面所做的。

Edit Edit:

编辑编辑:

The tsd package managermentioned by @kurtcorbett looks nice, use that.

@kurtcorbett提到的tsd 包管理器看起来不错,使用它。

回答by Bandito11

What I did was touch the lightbulb and chose the option that said add reference to node/node.d.ts to the proyect.

我所做的是触摸灯泡并选择了将 node/node.d.ts 的引用添加到项目的选项。

After that I just wrote: /// at the top of the editor and it worked for me.

在那之后,我只是在编辑器的顶部写了:///,它对我有用。