--- title: "JavaScript 与 TypeScript" description: "JavaScript、TypeScript、Vue、Svelte、Astro 和 Angular 的语言服务器、Node.js 识别、npm 脚本、测试、调试与框架支持。" --- OpenIDEA 打开 JavaScript（`.js`、`.mjs`、`.cjs`、`.jsx`）和 TypeScript（`.ts`、`.mts`、`.cts`、`.tsx`）文件即可获得语法高亮和代码结构，无需任何配置；补全、跳转、重构和诊断由 TypeScript 语言服务器提供。Vue、Svelte、Astro 和 Angular 项目还会额外启动各自框架的语言服务器。所有语言的支持情况见[支持矩阵](/zh/languages/index)。 ## 语言服务器 | 文件 | 服务器 | 说明 | | --------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------- | | JS、JSX、TS、TSX | `vtsls` | 默认的 TypeScript 服务器。 | | JS、JSX、TS、TSX | `typescript-language-server` | 备选：仅在未安装 `vtsls` 时使用。 | | `.vue` | `vue-language-server` + `vtsls` | Vue 的 hybrid 模式：`.vue` 中的 TypeScript 由加载了 `@vue/typescript-plugin` 的 `vtsls` 处理。 | | `.svelte` | `svelte-language-server` | | | `.astro` | `astro-ls` | 需要 Node.js 和 TypeScript 库。 | | Angular 项目中的 TS 和 HTML | `angular-language-server`（`ngserver`） | 只在 `angular.json` 或 `node_modules/@angular/core` 所在目录之下启用。 | | 以上全部 | `oxlint` | 只在存在 `.oxlintrc.json`、`.oxlintrc.jsonc`、`oxlint.config.ts` 或 `oxlint.config.mts` 的目录之下启用。 | TypeScript 服务器以 `tsconfig.json`、`jsconfig.json` 或 `package.json` 所在目录为工作区根。不属于任何 `tsconfig.json` / `jsconfig.json` 的文件也会注册给 tsserver，零散脚本同样有代码智能。 有两处行为与服务器默认值不同：重命名符号时不会生成 `import { a as b }` 这样的别名；移动文件时服务器不会自行改写 import，而是由 IDE 先给出需要更新的 import，以预览形式展示，并可撤销。 ### TypeScript 版本 **设置 › 语言和框架 › TypeScript** 决定 `vtsls` 和 `typescript-language-server` 加载哪个 TypeScript： - **捆绑**（默认）：语言服务器自带的 TypeScript。 - 项目中已安装的 `node_modules/typescript`。 - 通过文件夹按钮选择任意 TypeScript `lib` 目录。 Vue、Astro 和 Angular 服务器也会使用这里选择的版本。TypeScript 7（原生移植版）没有语言服务 API，因此 IDE 在安装 `typescript-language-server` 以及 Vue、Svelte、Astro 服务器时会一并安装 `typescript@6`。 ## 环境配置 ### 安装语言服务器 打开某类文件而对应服务器缺失时，IDE 会弹出通知（例如 “vtsls (TypeScript) 未安装”），提供 **安装** 和 **语言服务器…** 两个按钮。**安装** 会调用 npm（或 pnpm）把包装进 IDE 自己的工具目录，不做全局安装，也不需要 `sudo`。前提是 `PATH` 上有 `npm` 或 `pnpm`。 所有语言服务器、调试器和格式化工具都列在 **设置 › 语言和框架 › 语言服务器** 中，可以在这里安装、重新安装、改用自己的可执行文件，或修改启动参数、环境变量和初始化选项。`PATH` 上已有的服务器也会被直接使用。 | 工具 | 安装方式 | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | `vtsls`、`typescript-language-server` | npm（`@vtsls/language-server`；`typescript-language-server` + `typescript@6`） | | `vue-language-server`、`svelte-language-server`、`astro-ls`、`angular-language-server` | npm | | `oxlint` | npm | | Prettier、oxfmt | npm | | JavaScript 调试器（vscode-js-debug） | GitHub release（`microsoft/vscode-js-debug`） | 如果项目自己的 `node_modules/.bin` 里有 Astro 或 Angular 服务器，会优先使用项目里的。 ### JavaScript 运行时 **设置 › 语言和框架 › JavaScript 运行时** 包含： - **首选运行时**：从行号栏和编辑器的 **运行** 操作运行 JavaScript、TypeScript 文件时用 Node.js、Bun 还是 Deno。**自动** 会从文件所在目录向上找到项目根目录，最近的 `deno.json` / `deno.jsonc` 用 Deno，`bun.lock` / `bun.lockb` 用 Bun，都没有时用 Node.js。 - **Node 解释器**：运行 npm 脚本、Node 文件以及基于 Node 的语言服务器所用的 `node`。**默认** 表示使用 `PATH` 上的 `node`。列表会列出 `PATH` 上找到的所有 Node.js，以及 nvm、Volta、fnm、mise、asdf 安装的版本。 - **在目标中运行**：在本机，或在 **设置 › 构建、执行、部署 › 运行目标** 中配置的某个运行目标里执行 Node 和包管理器命令。 - **软件包管理器**：检测出的脚本配置使用 `npm`、`pnpm`、`yarn` 还是 `bun`。**自动** 先读 `package.json` 的 `packageManager`，再看锁文件（`pnpm-lock.yaml`、`yarn.lock`、`bun.lock` / `bun.lockb`、`package-lock.json`），都没有时用 npm。 ## 格式化 **重新格式化代码**（`⌥⌘L` / `Ctrl+Alt+L`）默认交给语言服务器，除非配置了优先使用外部格式化工具： - **Prettier**（**设置 › 语言和框架 › Prettier**）默认处理 JavaScript、JSX、TypeScript、TSX、JSON、Vue、HTML、CSS、SCSS、Less、GraphQL、YAML 和 Markdown。未设置 **Prettier 路径** 时，依次查找项目 `node_modules`、IDE 管理的安装、`PATH`。 - **oxfmt**（**设置 › 语言和框架 › oxfmt**）在 oxfmt 配置文件（`.oxfmtrc.json`、`oxfmt.config.ts`）所在目录之下，或被选为格式化工具时，替代 Prettier 处理已启用的语言。 两个页面上，**格式化工具** 可选 **自动（优先语言服务器）** 或工具本身，**保存时运行** 控制保存时格式化，**启用的语言** 限定工具处理哪些语言。 ## 运行与测试 打开项目时，OpenIDEA 会自动检测运行配置： - 每个 `package.json` 脚本一个配置（`npm run build`、`pnpm run dev` 等），覆盖根包、嵌套包和 workspace 成员。名为 `test`、`jest`、`vitest` 或 `test:*` 的脚本是测试配置。 - `deno.json` / `deno.jsonc` 中每个 task 一个配置（`deno task `）。 在 `package.json` 中，每个 `scripts` 条目旁的边栏图标可以直接运行或调试该脚本。 在源文件中使用 **运行上下文配置**（`⌃⇧R` / `Ctrl+Shift+F10`）： - 测试文件（`*.test.*`、`*.spec.*`，或 `__tests__/` 下的文件）通过最近的测试脚本运行，并把该文件作为参数传入。`test`、`it`、`describe` 块旁的边栏图标通过追加 `-t ` 只运行单个测试或测试组。 - 其他 `.js` 文件用 `node` 运行（项目含 `deno.json` 或 `bun.lock` 时改用 `deno run` 或 `bun run`）。 - `.ts` 文件在 Node.js 22.18+ / 23.6+ 上直接运行，在 22.6–22.17 和 23.0–23.5 上加 `--experimental-strip-types`，更早的版本则通过 `tsx` 或 `ts-node` 运行。 Jest 和 Vitest 的输出会解析成测试树，支持 **重新运行失败的测试**。**使用覆盖率运行** 支持调用 `vitest` 或 `jest` 的脚本（Vitest 需要 `@vitest/coverage-v8` 之类的覆盖率 provider，缺失时 IDE 会提示添加），以及通过 `c8` 运行的 `node` / `tsx` / `ts-node`。详见[测试](/zh/guide/testing)和[覆盖率](/zh/guide/coverage)。 ## 调试 调试使用 JavaScript 调试器（vscode-js-debug）；未安装时，第一次调试会提示安装。 - **调试** 适用于 npm 脚本配置、Node.js 文件以及 `deno run` / `deno test`，子进程会自动附加。 - **附加到 Node.js** 是一种运行配置类型，用于附加到本机或其他机器上以 `--inspect` 启动的进程（默认端口 9229），可设置本地与远程根目录映射。 - 运行菜单中的 **附加到进程…** 会列出正在运行的 Node.js 进程。 开启 **不要步入库脚本**（**设置 › 构建、执行、部署 › 调试器 › 单步执行**，默认开启）后，单步调试会跳过 Node.js 内部代码和 `node_modules`。更多内容见[调试](/zh/guide/debugging)。 ## 框架支持 - **React**：JSX 和 TSX 有各自的高亮模式，并获得完整的 TypeScript 服务器支持；除此之外没有 React 专属功能。 - **Vue**：`.vue` 文件按块高亮，由 Vue Language Server 以 hybrid 模式提供支持。没有 `tsconfig.json` 的 Vue CLI 项目会读取 webpack 的 `resolve.alias`（如 `@/`），让 import 能正确解析。Prettier 可格式化 `.vue` 文件，模板中可用 Emmet。 - **Svelte**：使用 Svelte Language Server；高亮沿用 HTML 模式（script 按 TypeScript、style 按 CSS），标记部分可用 Emmet。 - **Astro**：使用 Astro Language Server，有专门的高亮模式。它需要 Node.js，找不到时请在 **设置 › 语言和框架 › JavaScript 运行时** 中选择。 - **Angular**：在含 `angular.json` 或已安装 `@angular/core` 的项目中，HTML 模板和组件里内联的 `template:` 字符串使用 Angular 高亮，Angular Language Server 提供模板补全、跳转和重命名，并按项目的 Angular 版本配置。 ## 已知限制 - 没有内置 ESLint 集成，内置的 linter 是 oxlint。可以在语言服务器页面通过 **添加语言服务器…** 自行添加其他服务器。 - 不支持浏览器（Chrome/Edge）调试，只能调试 Node.js 和 Deno。 - Bun 可以运行但无法调试：它的 inspector 使用 WebKit 协议，vscode-js-debug 无法附加。 - Deno 支持运行和调试，但没有 Deno 语言服务器，Deno 文件使用 TypeScript 服务器。 - 不支持 Deno task 的覆盖率。 - Emmet 只在 HTML、Vue 和 Svelte 中展开，JSX 中不可用。