使用 JavaScript

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

IntelliSense

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

关于JavaScript IntelliSense的工作原理，包括基于类型推理、JSDoc注释、TypeScript声明以及JavaScript与TypeScript项目的混合，请参见JavaScript语言服务文档。

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

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

类型与自动类型获取

IntelliSense for JavaScript 库和框架由 TypeScript 类型声明（类型）文件驱动。类型声明文件用 TypeScript 编写，以表达参数和函数的数据类型，使 VS Code 能够以高效的方式提供丰富的 IntelliSense 体验。

许多流行图书馆附带打字文件，所以你会自动获得IntelliSense文件。对于不包含类型配置的库，VS Code 的自动类型采集会自动为您安装社区维护的打字文件。

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

洛达什类型

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

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

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

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

大多数常见的JavaScript库都附带声明文件，或者提供类型声明文件。

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

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

执行NPM——版本通过终端或命令提示符快速检查 NPM 是否已安装并可用。

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

如果你安装了 npm 但仍然看到警告信息，你可以明确告诉 VS Code npm 安装在哪里，方法是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语言服务提供的语言特性选项。对于常见的设置，ajsconfig.json文件不是必须的，但在某些情况下你需要添加一个jsconfig.json.

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

jsconfig.json位置

要定义我们的代码为JavaScript项目，创建jsconfig.json在你JavaScript代码的根节点，如下所示。JavaScript项目是项目的源文件，不应包含派生或打包文件（例如：分区目录）。

jsconfig 设置

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

下面展示的一个项目客户端以及服务器文件夹，显示两个独立的JavaScript项目：

多个jsconfig

写作jsconfig.json

下面是一个简单的模板jsconfig.json文件，定义了JavaScript目标存在ES6以及排除属性排除node_modules文件夹。你可以把这段代码复制粘贴到你的jsconfig.json档案。

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

该排除属性告诉语言服务哪些文件不属于你的源代码。如果IntelliSense很慢，就在你的文件夹里添加排除列表（如果 VS Code 检测到完成缓慢，会提示你这么做）。你会想要排除由构建进程生成的文件（例如分区目录）。这些文件会导致建议出现两次，并会拖慢IntelliSense的速度。

你可以用包括属性。如果没有包括属性存在时，默认包含包含目录和子目录中的所有文件。当包括属性被指定，只包含这些文件。

这里有一个显式的示例包括属性：

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

最佳实践且出错率最小的方法是使用包括属性为单一SRC文件夹。注意文件路径排除以及包括相对于 的位置jsconfig.json.

更多信息请参见完整的jsconfig.json文档。

迁移到 TypeScript

TypeScript和JavaScript项目可以混合使用。要开始迁移到 TypeScript，请将jsconfig.json文件tsconfig.json并设置允许属性到确实如此.更多信息请参见从JavaScript迁移。

注： jsconfig.json与tsconfig.json文件，仅为允许设置为 true。参见的文档tsconfig.json这里是想看看其他可用的选项。

类型检查JavaScript

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

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

TypeScript 可以推断.js文件与.ts文件。当类型无法推断时，可以使用 JSDoc 注释来指定。你可以在 Type Checking JavaScript 文件中了解更多关于 TypeScript 如何使用 JavaScript 类型检查的信息。

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

根据你的需求，你可以用几种不同的方式开始排版检查。

每个文件

在 JavaScript 文件中启用类型检查最简单的方法是添加@ts勾放到文件顶端。

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

使用@ts勾如果你只是想尝试在几个文件中输入检查，但还没能为整个代码库启用，这是个不错的方法。

使用设定

要在不更改代码的情况下启用所有JavaScript文件的类型检查，只需添加“js/ts.implicitProjectConfig.checkJs”： true进入你的工作区或用户设置。这使得对任何不属于jsconfig.json或tsconfig.json项目。

你可以用@ts-不切文件顶部的注释：

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

你也可以使用@ts-忽略请在错误前的那行评论：

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

使用 jsconfig 或 tsconfig

为了启用属于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-不切以禁止每个文件的类型检查。

JavaScript 类型检查需要 TypeScript 2.3。如果你不确定工作区当前激活的TypeScript版本，可以执行TypeScript：选择TypeScript版本命令来检查。你一定有.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勾使用上述代码，你会看到关于全局变量使用的一些错误：

  1. 2号线 - 属性“webkitNotifications”在类型“Window”中不存在。
  2. 2号线 - 找不到名字“CAN_NOTIFY”。
  3. 3号线 - 属性“webkitNotifications”在类型“Window”中不存在。

如果你想继续使用，那就更好了@ts勾但要确定这些不是你应用本身的问题，你必须告知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存在且 awebkit通知性质存在于窗户.你可以阅读更多关于写作的内容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 转译器将 ES6 文件转换为可读的 ES5 JavaScript 并带有源映射。你可以通过将下面的配置添加到你的工作流程中，轻松地将巴别塔整合进你的工作流程tasks.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": true
    }
  ]
}

添加这个后，你可以用 ⇧⌘B（Windows，Linux Ctrl+Shift+B）（运行构建任务）命令启动 Babel，它会从以下SRC目录自由党目录。

提示：如需使用巴别塔CLI的帮助，请参阅使用巴别塔的说明。上面的例子使用了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 语言功能扩展

部分智能感知模式

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（例如：目标）不被尊重。
  • 仅报告语法错误。语义错误——如访问未知属性或错误传递函数类型——不会被报告。
  • 语义错误的快速修复功能已被禁用。
  • 符号只能在当前文件中解析。从其他文件导入的任何符号都会被视为任何类型。
  • 像“前往定义”和“查找所有引用”这样的命令只适用于已打开的文件，而不能覆盖整个项目。这也意味着你安装的任何包的符号node_module无法解决。
  • Workspace 符号搜索只会包含当前打开文件中的符号。
  • 自动导入被禁用了。
  • 重命名功能已被禁用。
  • 许多重构被禁用。

部分额外功能被禁用vscode.dev以及github.dev:

检查你是否处于部分模式

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

部分模式状态项

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