现已发布！阅读有关一月份的新功能和修复。

使用 JavaScript

本主题介绍 Visual Studio Code 支持的一些高级 JavaScript 功能。通过使用 TypeScript 语言服务，VS Code 可以为 JavaScript 提供智能代码补全（IntelliSense）以及类型检查。

IntelliSense

Visual Studio Code 的 JavaScript IntelliSense 提供智能代码补全、参数信息、引用搜索以及许多其他高级语言功能。我们的 JavaScript IntelliSense 由 TypeScript 团队开发的 JavaScript 语言服务提供支持。虽然 IntelliSense 应该适用于大多数 JavaScript 项目而无需任何配置，但你可以通过 JSDoc 或配置 jsconfig.json 项目使 IntelliSense 更加有用。

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

当类型推断无法提供所需信息时，可以通过 JSDoc 注释显式提供类型信息。本文档介绍当前支持的 JSDoc 注释。

除了对象、方法和属性之外，JavaScript IntelliSense 窗口还为文件中的符号提供基本的单词补全。

类型定义和自动类型获取

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

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

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

lodash typings

Visual Studio Code 会自动下载并管理你项目中 package.json 中列出或你导入到 JavaScript 文件中的包的类型声明文件。

{
  "dependencies": {
    "lodash": "^4.17.0"
  }
}

你也可以在 jsconfig.json 中显式列出要为其获取类型声明文件的包。

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

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

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

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

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

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

如果你已安装 npm 但仍看到警告消息，可以通过 typescript.npm 设置明确告知 VS Code 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 项目，请在 JavaScript 代码的根目录创建 jsconfig.json，如下所示。JavaScript 项目是项目的源文件，不应包含派生文件或打包文件（例如 dist 目录）。

jsconfig setup

在更复杂的项目中，工作区中可能会定义多个 jsconfig.json 文件。你希望这样做，以便一个项目的源代码不会出现在另一个项目的 IntelliSense 中。

下图展示了一个具有 client 和 server 文件夹的项目，其中包含两个独立的 JavaScript 项目

multiple jsconfigs

编写 jsconfig.json

下面是 jsconfig.json 文件的简单模板，它将 JavaScript target 定义为 ES6，并且 exclude 属性排除 node_modules 文件夹。你可以将此代码复制并粘贴到 jsconfig.json 文件中。

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

exclude 属性告诉语言服务哪些文件不属于你的源代码。如果 IntelliSense 速度慢，请将文件夹添加到 exclude 列表（如果 VS Code 检测到补全速度慢，它会提示你执行此操作）。你应该排除构建过程生成的任何文件（例如 dist 目录）。这些文件会导致建议显示两次并减慢 IntelliSense 的速度。

你可以使用 include 属性显式设置项目中的文件。如果不存在 include 属性，则默认为包含其包含目录和子目录中的所有文件。指定 include 属性后，仅包含这些文件。

这是一个带有显式 include 属性的示例

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

最佳实践和最少出错的途径是使用带有单个 src 文件夹的 include 属性。请注意，exclude 和 include 中的文件路径相对于 jsconfig.json 的位置。

有关更多信息，请参阅完整的 jsconfig.json 文档。

迁移到 TypeScript

可以将 TypeScript 和 JavaScript 项目混合在一起。要开始迁移到 TypeScript，请将 jsconfig.json 文件重命名为 tsconfig.json 并将 allowJs 属性设置为 true。有关更多信息，请参阅 从 JavaScript 迁移。

注意： jsconfig.json 与 tsconfig.json 文件相同，只是将 allowJs 设置为 true。请参阅此处 tsconfig.json 的文档以查看其他可用选项。

检查 JavaScript 类型

VS Code 允许你在常规 JavaScript 文件中利用 TypeScript 的一些高级类型检查和错误报告功能。这是捕获常见编程错误的绝佳方式。这些类型检查还支持一些令人兴奋的 JavaScript 快速修复，包括添加缺失的导入和添加缺失的属性。

Using type checking and Quick Fixes in a JavaScript file

TypeScript 可以在 .js 文件中像在 .ts 文件中一样推断类型。当无法推断类型时，可以使用 JSDoc 注释指定它们。你可以阅读有关 TypeScript 如何使用 JSDoc 进行 JavaScript 类型检查的更多信息，请参阅 检查 JavaScript 文件类型。

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

你可以根据自己的需求通过几种不同的方式开始进行类型检查。

按文件

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

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

如果你只想在少数文件中尝试类型检查，而不是对整个代码库启用它，使用 // @ts-check 是一个好方法。

使用设置

要在不更改任何代码的情况下为所有 JavaScript 文件启用类型检查，只需将 "js/ts.implicitProjectConfig.checkJs": true 添加到你的工作区或用户设置中即可。这会为任何不属于 jsconfig.json 或 tsconfig.json 项目的 JavaScript 文件启用类型检查。

你可以使用文件顶部的 // @ts-nocheck 注释选择不进行类型检查的单个文件

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

你也可以使用错误前一行的 // @ts-ignore 注释在 JavaScript 文件中禁用单个错误

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

使用 jsconfig 或 tsconfig

要在属于 jsconfig.json 或 tsconfig.json 的 JavaScript 文件中启用类型检查，请在项目的编译器选项中添加 "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: Select TypeScript Version 命令进行检查。你必须在编辑器中打开一个 .js/.ts 文件才能运行此命令。如果你打开一个 TypeScript 文件，版本会显示在右下角。

全局变量和类型检查

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

window.onload = function() {
  if (window.webkitNotifications.requestPermission() === CAN_NOTIFY) {
    window.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
  } else {
    alert('Could not notify');
  }
};

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

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

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

首先，在项目根目录创建 jsconfig.json

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

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

现在在工作区的某个位置创建一个 globals.d.ts 文件

interface Window {
  webkitNotifications: any;
}

declare var CAN_NOTIFY: number;

.d.ts 文件是类型声明。在这种情况下，globals.d.ts 会让 TypeScript 知道存在一个全局的 CAN_NOTIFY 并且 window 上存在一个 webkitNotifications 属性。你可以阅读有关编写 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 文件转换为带有源映射的可读 ES5 JavaScript。你可以通过将以下配置添加到 tasks.json 文件（位于工作区的 .vscode 文件夹下）轻松地将 Babel 集成到你的工作流程中。group 设置使此任务成为默认的 Task: Run Build Task 手势。isBackground 告诉 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": true
    }
  ]
}

添加此设置后，你可以使用 Run Build Task 命令（⇧⌘B (Windows, Linux Ctrl+Shift+B)）启动 Babel，它将把 src 目录中的所有文件编译到 lib 目录中。

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

禁用 JavaScript 支持

如果你更喜欢使用其他 JavaScript 语言工具（如 Flow）支持的 JavaScript 语言特性，你可以禁用 VS Code 内置的 JavaScript 支持。你通过禁用内置的 TypeScript 语言扩展TypeScript and JavaScript Language Features (vscode.typescript-language-features) 来实现这一点，该扩展也提供 JavaScript 语言支持。

要禁用 JavaScript/TypeScript 支持，请转到“扩展”视图（⇧⌘X (Windows, Linux Ctrl+Shift+X)），然后筛选内置扩展（在 ... 更多操作下拉菜单中选择显示内置扩展），然后键入“typescript”。选择 TypeScript and JavaScript Language Features 扩展并按下禁用按钮。VS Code 内置扩展只能被禁用，不能被卸载，并且可以随时重新启用。

TypeScript and JavaScript Language Features extension

部分 IntelliSense 模式

VS Code 尝试为 JavaScript 和 TypeScript 提供跨项目的 IntelliSense，这就是自动导入和转到定义等功能成为可能的原因。然而，在某些情况下，VS Code 仅限于处理当前打开的文件，而无法加载构成你的 JavaScript 或 TypeScript 项目的其他文件。

这可能发生在几种情况下

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

在这些情况下，VS Code 的 IntelliSense 将以部分模式运行。部分模式会尽力为所有打开的 JavaScript 或 TypeScript 文件提供 IntelliSense，但功能有限，无法提供任何跨文件 IntelliSense 功能。

哪些功能会受到影响？

这是一个不完整的功能列表，它们在部分模式下被禁用或功能受限

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

在 vscode.dev 和 github.dev 上禁用了其他一些功能

检查你是否处于部分模式

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

Partial mode status item

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

02/04/2026
English 한국어 中文(简体) 中文(繁體)
© . This site is unofficial and not affiliated with Microsoft.