使用JavaScript

本主题描述了 Visual Studio Code 支持的一些高级 JavaScript 功能。通过使用 TypeScript 语言服务，VS Code 可以为 JavaScript 提供智能完成（IntelliSense）以及类型检查。

智能感知

Visual Studio Code 的 JavaScript IntelliSense 提供了智能代码完成、参数信息、引用搜索以及许多其他高级语言功能。我们的 JavaScript IntelliSense 由 JavaScript 语言服务提供支持，该服务由 TypeScript 团队开发。虽然 IntelliSense 对大多数 JavaScript 项目来说在没有配置的情况下应该可以正常工作，但你可以通过使用 JSDoc 或配置一个 jsconfig.json项目。

有关JavaScript IntelliSense如何工作的详细信息，包括基于类型推断、JSDoc注释、TypeScript声明以及混合JavaScript和TypeScript项目，请参阅JavaScript语言服务文档。

当类型推断无法提供所需信息时，可以使用JSDoc注释显式地提供类型信息。本文档描述了当前支持的JSDoc注释。

除了对象、方法和属性之外，JavaScript 智能感知Windows还为文件中的符号提供基本的单词完成功能。

类型定义和自动类型获取

IntelliSense 对 JavaScript 库和框架的支持由 TypeScript 类型声明 (typings) 文件提供。类型声明文件是用 TypeScript 编写的，因此它们可以表达参数和函数的数据类型，使 VS Code 能以高性能的方式提供丰富的 IntelliSense 体验。

许多流行的库都附带了typings文件，因此你可以自动获得它们的IntelliSense。对于没有包含typings的库，VS Code的自动类型获取将自动为您安装社区维护的类型文件。

自动类型获取需要npmjs，这是Node.js的包管理器，包含在Node.js运行时中。在这个图像中，你可以看到对流行的lodash库的方法的IntelliSense，包括方法签名、参数信息和方法文档。

lodash 类型定义

类型声明文件会自动下载并由Visual Studio Code管理，适用于您项目中列出的包。package.json或者你导入到一个JavaScript文件中。

{
  "依赖项": {
    "lodash": "^4.17.0"
  }
}

你也可以在jsconfig.json中明确列出需要获取类型声明文件的包。

{
  "类型获取": {
    "包含": ["jquery"]
  }
}

大多数常见的JavaScript库都附带声明文件或有可用的类型声明文件。

修复自动类型获取中npm未安装的警告

自动类型获取使用 npm，Node.js 的包管理器，来安装和管理类型声明（typings）文件。为了确保自动类型获取能够正常工作，请首先确保您的机器上已安装 npm。

执行npm --版本从终端或命令提示符快速检查npm是否已安装并可用。

npm 随 Node.js 运行时一起安装，您可以从 Nodejs.org 下载。安装当前的 LTS（长期支持）版本，npm 可执行文件将默认添加到您的系统路径中。

如果你已经安装了npm，但仍然看到警告信息，你可以通过以下方式明确告知VS Codenpm的安装位置typescript.npm 设置。这应该设置为你机器上npm可执行文件的完整路径，这不需要与你在工作区中用来管理包的npm版本匹配。typescript.npm需要 TypeScript 2.3.4+。

例如，在Windows系统上，你会在你的环境变量中添加一个像这样的路径settings.json文件:

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

JavaScript 项目 (jsconfig.json)

目录中存在一个jsconfig.json文件，这表明该目录是一个JavaScript项目的根目录。jsconfig.json 指定根文件和由 JavaScript 语言服务提供的语言功能的选项。对于常见的设置，一个 jsconfig.json文件不是必需的，但在某些情况下，您可能会希望添加一个jsconfig.json输入：.

并非所有文件都应包含在您的JavaScript项目中（例如，您希望排除某些文件不显示IntelliSense）。这种情况在前端和后端代码中很常见。
您的工作区包含多个项目上下文。在这种情况下，您应该添加一个jsconfig.json每个项目在根文件夹中的文件。
您正在使用TypeScript编译器将JavaScript源代码降级编译。

jsconfig.json的位置

为了将我们的代码定义为一个JavaScript项目，请创建jsconfig.json在你的JavaScript代码的根目录下，如下所示。JavaScript项目是项目的源文件，不应包括派生或打包的文件（例如一个距离目录）。

jsconfig 配置

在更复杂的项目中，你可能有不止一个jsconfig.json文件定义在工作区内部。您需要这样做，以便一个项目中的源代码不会出现在另一个项目的IntelliSense中。

如下所示的项目具有一个客户和服务器文件夹，显示两个独立的JavaScript项目：

多个jsconfigs

编写 jsconfig.json

以下是简单的模板jsconfig.json文件，定义了JavaScript目标成为ES6和排除属性排除节点模块文件夹。您可以将此代码复制并粘贴到您的jsconfig.json文件。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

该排除属性告诉语言服务哪些文件不是您源代码的一部分。如果IntelliSense速度慢，请添加文件夹到您的排除列表（如果 VS Code 检测到慢速完成，它将提示您执行此操作）。您将需要排除生成的文件（例如一个构建过程）距离目录）。这些文件会导致建议显示两次，并会减慢IntelliSense的速度。

您可以使用以下方法明确设置项目中的文件包括属性。如果无包括如果该属性存在，则默认包括包含目录及其子目录中的所有文件。当一个包括如果指定了属性，则仅包括这些文件。

这是一个带有明确示例的示例包括属性:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

最佳实践并且错误最少的方法是使用包括属性与单一源文件夹。请注意文件路径在排除和包括与位置相关jsconfig.json输入：.

欲了解更多信息，请参阅完整的jsconfig.json 文档.

迁移到TypeScript

可以拥有混合的TypeScript和JavaScript项目。要开始向TypeScript迁移，请重命名你的jsconfig.json文件到tsconfig.json并设置允许JavaScript属性到真欲了解更多信息，请参阅从JavaScript迁移。

注意： jsconfig.json与 a 相同tsconfig.json文件，仅限允许JavaScript 设置为 true。参见文档 tsconfig.json在这里查看其他可用选项。

类型检查JavaScript

VS Code允许您在普通的JavaScript文件中利用TypeScript的一些高级类型检查和错误报告功能。这是捕捉常见编程错误的好方法。这些类型检查还为JavaScript提供了一些令人兴奋的快速修复，包括添加缺失的import和添加缺失的属性。

在JavaScript文件中使用类型检查和快速修复

TypeScript 可以推断类型.js文件与...中的相同输入：.ts 文件。当类型无法推断时，可以使用 JSDoc 注释来指定它们。您可以在 TypeScript 如何使用 JSDoc 对 JavaScript 文件进行类型检查中阅读更多内容。

JavaScript 的类型检查是可选的，并且需要手动选择。现有的 JavaScript 验证工具，如 ESLint，可以与新的内置类型检查功能一起使用。

根据您的需求，您可以有几种不同的方式开始进行类型检查。

每个文件

在JavaScript文件中启用类型检查的最简单方法是通过添加// @ts-check到文件顶部。

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // 错误: 类型 '123' 不能分配给类型 'string'

使用// @ts-check如果你只想在几个文件中尝试类型检查，而不希望立即为整个代码库启用它，这是一个不错的方法。

使用设置

要为所有JavaScript文件启用类型检查而无需更改任何代码，请添加"js/ts.implicitProjectConfig.checkJs": true到你的工作区或用户设置。这使得任何不是的一部分的JavaScript文件都可以进行类型检查jsconfig.json或tsconfig.json项目。

您可以将个别文件从类型检查中排除，使用// @ts-nocheck文件顶部的注释：

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

您还可以在JavaScript文件中禁用个别错误使用一个// @ts-ignore在错误前一行的注释：

让 easy = 'abc';
// @ts-ignore
easy = 123; // 无错误

使用jsconfig或tsconfig

启用JavaScript文件的类型检查，这些文件是的一部分jsconfig.json或tsconfig.json，添加"checkJs": true到项目的编译选项：

jsconfig.json输入：

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

tsconfig.json输入：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

这使得可以对项目中的所有JavaScript文件进行类型检查。你可以使用// @ts-nocheck要禁用每个文件的类型检查。

JavaScript 类型检查需要 TypeScript 2.3。如果你不确定当前在你的工作区中使用的是哪个版本的 TypeScript，请运行 TypeScript: 选择 TypeScript 版本 命令来检查。你必须有一个 .js/.ts在编辑器中打开文件以运行此命令。如果您打开一个TypeScript文件，版本号将显示在右下角。

全局变量和类型检查

假设你正在处理使用全局变量或非标准DOM API的遗留JavaScript代码：

```html
Windows.onload = 函数() {
  if (Windows.webkitNotifications.requestPermission() === CAN_NOTIFY) {
    Windows.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
  } else {
    alert('Could not notify');
  }
};
```

如果你尝试使用// @ts-check使用上述代码时，您会看到许多关于使用全局变量的错误：

第2行-属性 'webkitNotifications' 在类型 'Window' 上不存在。
第2行-无法找到名称 'CAN_NOTIFY'。
第3行-属性 'webkitNotifications' 在类型 'Window' 上不存在。

如果您想继续使用// @ts-check但是你确信这些并不是你应用程序的实际问题，你需要让 TypeScript 知道这些全局变量。

首先，创建一个jsconfig.json在你项目的核心：

{
  "compilerOptions": {},
  "exclude": ["node_modules", "**/node_modules/*"]
}

然后重新加载 VS Code 以确保更改已应用。存在一个jsconfig.json让 TypeScript 知道你的 Javascript 文件是更大项目的一部分。

现在创建一个globals.d.ts将你的工作区保存在某个地方:

接口 Windows {
  webkitNotifications: 任何;
}

声明 变量 CAN_NOTIFY：数字;

d.ts文件是类型声明。在这种情况下，globals.d.ts让我们告知 TypeScript 一个全局可以通知存在并且awebkit通知属性存在于Windows您可以阅读更多关于写作的信息d.ts 在 TypeScript 文档中。 d.ts文件不会改变JavaScript的评估方式，它们仅用于提供更好的JavaScript语言支持。

使用任务

使用TypeScript编译器

TypeScript 的一个关键特性是能够使用最新的 JavaScript 语言特性，并生成可以在尚未理解这些较新特性的 JavaScript 运行时执行的代码。由于 JavaScript 也使用相同的语言服务，现在它也可以利用这一相同的功能。

TypeScript 编译器翻译结果：tsc可以将ES6的JavaScript文件编译到另一种语言级别。配置jsconfig.json使用所需的选项，然后使用 –p 参数来执行翻译结果：tsc使用你的jsconfig.json文件，例如tsc -p jsconfig.json进行低级编译。

在jsconfig 文档中了解更多关于低版本编译的编译选项。

运行 Babel

该Babel翻译器将ES6文件转换为带有Source Maps的可读ES5 JavaScript。您可以轻松地通过在您的Babel中添加以下配置来将其集成到您的工作流程中任务.json文件（位于工作区的.vscode文件夹)。组 设置使此任务成为默认任务 任务：运行构建任务 动作。 是否为背景告诉 VS Code 在后台继续运行此任务。要了解更多信息，请访问任务。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch",
      "command": "${workspaceFolder}/node_modules/.bin/babel",
      "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
      "type": "shell",
      "group": { "kind": "build", "isDefault": true },
      "isBackground": 真
    }
  ]
}

一旦你添加了这个，你就可以开始Babel，使用⇧⌘B（Windows, Linux Ctrl+Shift+B）（运行构建任务）命令，它将编译所有文件来自源目录到库目录。

提示： 有关 Babel CLI 的帮助，请参阅使用 Babel 中的说明。上面的示例使用了 CLI 选项。

禁用JavaScript支持

如果您更喜欢使用其他JavaScript语言工具（如Flow）支持的JavaScript语言特性，您可以禁用VS Code的内置JavaScript支持。您可以通过禁用内置的TypeScript语言扩展TypeScript和JavaScript语言特性（vscode.typescript-language-features）来实现，它也提供了JavaScript语言支持。

要禁用JavaScript/TypeScript支持，请转到扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 并在内置扩展 (显示内置扩展 在 ... 更多操作 下拉菜单中筛选)，然后输入'typescript'。选择 TypeScript和JavaScript语言特性扩展并按下禁用按钮。VS Code内置扩展无法卸载，只能禁用，并且可以随时重新启用。

TypeScript 和 JavaScript 语言特性扩展

部分IntelliSense模式

VS Code 试图为 JavaScript 和 TypeScript 提供整个项目的 IntelliSense，这使得自动导入和跳转到定义等特性成为可能。然而，在某些情况下，VS Code 仅能处理当前打开的文件，并且无法加载构成您的 JavaScript 或 TypeScript 项目的其他文件。

这可能发生在以下几种情况：

您正在 vscode.dev 或 github.dev 上使用 JavaScript 或 TypeScript 代码，并且 VS Code 正在浏览器中运行。
你从虚拟文件系统中打开一个文件（例如，使用GitHub 仓库扩展时）。
项目当前正在加载。加载完成后，您将开始获得项目范围内的IntelliSense。

在这种情况下，VS Code 的 IntelliSense 将以 部分模式 运作。部分模式会尽最大努力为任何打开的 JavaScript 或 TypeScript 文件提供 IntelliSense，但存在局限性，无法提供任何跨文件的 IntelliSense 功能。

哪些功能受到影响？

以下是一份不完整的列表，这些功能在部分模式下被禁用或功能受限：

所有打开的文件都被视为单个项目的一部分。
来自您的配置选项jsconfig或tsconfig（例如目标) 不会被尊重。
仅报告语法错误。语义错误（例如访问未知属性或传递错误类型给函数）不报告。
快速修复语义错误已禁用。
符号只能在当前文件中解析。从其他文件导入的任何符号将被视为属于任何类型。
诸如跳转到定义和查找所有引用的命令将仅对已打开的文件有效，而不是在整个项目中有效。这也意味着，任何在下安装的包中的符号节点模块将不会得到解决。
工作区符号搜索将仅包括当前打开文件中的符号。
自动导入已禁用。
重命名已禁用。
许多重构已禁用。

一些附加功能已禁用vscode.dev和github.dev输入：

自动类型获取目前不支持。

检查你是否处于部分模式

要检查当前文件是否使用了局部模式的IntelliSense而不是项目范围的IntelliSense，请将鼠标悬停在JavaScript或TypeScript状态栏中的语言状态项：

部分模式状态项

状态项将显示部分模式如果当前文件处于部分模式。