WebStorm 2025.2 Help

TypeScript 代码检查

针对 TypeScript 代码,推荐使用 ESLint ,它提供了大量可通过插件扩展的代码检查规则。 WebStorm 会在编辑器中实时显示 ESLint 报告的警告和错误。 详细了解请参阅 ESLint

当项目的 ESLint 配置中设置了 @typescript-eslint/parser 作为解析器时,WebStorm 会在 .ts .tsx 文件中突出显示 ESLint 报告的错误。 详细了解请参阅 typescript-eslint 仓库中的 readme 文件

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 请按以下方式在项目中配置 Node.js 解释器: 配置本地 Node.js 解释器在 Windows 子系统中使用 Node.js ,或 配置远程 Node.js 解释器

安装 ESLint

ESLint 版本 9 及更高版本

  • 在嵌入的 终端Alt+F12 )中输入:

    npm install --save-dev eslint @eslint/js typescript typescript-eslint

    pnpm add --save-dev eslint @eslint/js typescript typescript-eslint

    yarn add --dev eslint @eslint/js typescript typescript-eslint

详细了解请参阅 typescript-eslint 官方网站

ESLint 版本 8 及更早版本

  • 在嵌入的 终端Alt+F12 )中输入:

    npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

    pnpm add --save-dev eslint @eslint/js typescript-eslint

    yarn add --dev eslint @eslint/js typescript-eslint

详细了解请参阅 typescript-eslint 官方网站

配置文件

根据您使用的 ESLint 版本,WebStorm 可识别以下文件类型的配置:

ESLint 版本 9 及更高版本

eslint.config.js eslint.config.mjs eslint.config.cjs (扁平格式),详细了解请参阅 ESLint 官方网站

您也可以使用以 TypeScript 编写的配置文件,例如 eslint.config.ts eslint.config.mts eslint.config.cts 。 为此,您需要指定 unstable_ts_config 标志。

  1. Ctrl+Alt+S 打开设置,然后选择 语言与框架 | JavaScript | 代码质量工具 | ESLint

  2. 选择 手动 ESLint 配置

  3. 额外 eslint 选项 字段中输入 --flag unstable_ts_config

  4. 点击 应用 保存更改并关闭对话框。

ESLint 版本 8 及更早版本

  • .eslintrc.* .eslintrc .eslintrc.json .eslintrc.yaml 文件,或其他支持的文件格式)。

  • .eslintignore

  • package.json 包含 eslintIgnoreeslintConfig 属性。 此配置系统已弃用,详细信息请参阅 ESLint 官方网站

请参阅 ESLint 配置迁移指南了解如何切换到 flat 格式。

创建并编辑配置文件

  • 在项目根目录中打开一个配置文件,或创建一个新的配置文件。 根据所使用的 ESLint 版本填写配置文件:

    // @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, tseslint.configs.recommended, );

    详细信息请参阅 typescript-eslint 官方网站

    /* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };

    详细信息请参阅 typescript-eslint 官方网站

在 WebStorm 中配置 ESLint

默认情况下,ESLint 会 自动进行配置。 您也可以选择 手动指定所有配置设置,或禁用 ESLint。

详细信息请参阅 ESLint

使用 ESLint 抑制对 TypeScript 代码的检查

  • 如果您已在使用 @typescript-eslint/parser ,但不希望通过 ESLint 检查 TypeScript 代码,请将 .ts .tsx 添加到 .eslintignore 文件中。

检查代码

安装并启用后,每次打开 TypeScript 文件时 ESLint 会自动激活。 您也可以配置 ESLint,在保存时 自动检测并修复问题

默认情况下,WebStorm 会根据 ESLint 配置中的严重性等级标记检测到的问题。 请参阅 配置 ESLint 高亮显示以了解如何覆盖这些设置。

当前文件中检测到的问题的描述和快速修复可在编辑器和 “问题”工具窗口的 文件 选项卡中查看。

此前打开的所有文件中的错误以及其快速修复将在 项目错误 选项卡的 问题 工具窗口中显示。 要打开工具窗口,请点击编辑器右上角的 检查 小部件:

代码检查小部件

如需了解更多信息,请参阅 在编辑器中查看问题并应用快速修复“问题”工具窗口

  • 要查看编辑器中问题的描述,请将鼠标悬停在高亮的代码上。

    ESLint:高亮显示错误和警告,并在工具提示中显示问题描述。

    要解决检测到的问题,请单击 ESLint:修复 '<rule name>' 或按 Alt+Shift+Enter

    要解决当前文件中检测到的所有问题,请单击 更多操作Alt+Enter ),并从列表中选择 ESLint:修复当前文件

    ESLint:解决问题
  • 或者,打开 文件 选项卡的 问题 工具窗口 Alt+6 ,您可以在此查看问题描述、应用快速修复、导航至发生错误的源代码片段,并在 编辑器预览 面板中直接修复这些问题,无需离开工具窗口。

    “问题”工具窗口中的快速修复

    详细信息请参阅 “问题”工具窗口

  • 您还可以配置 ESLint,在保存文件时修复该文件中的所有问题。 要配置此类行为,请在 设置 对话框的 ESLint 页面中选中 保存时运行 eslint --fix 复选框,如 在 WebStorm 中激活并配置 ESLint 中所述。

详细信息请参阅 在编辑器中查看问题并应用快速修复ESLint

TSLint

您还可以在 WebStorm 中使用 TSLint 代码验证工具,在不运行应用程序的情况下检查 TypeScript 代码中最常见的错误。 启用该工具后,它会分析所有已打开的 TypeScript 文件并标记出检测到的问题。

要查看问题的描述,请将鼠标悬停在高亮的代码上。 默认情况下,WebStorm 会根据 TSLint 配置文件中的严重性等级标记检测到的问题。 请参阅 配置 TSLint 高亮显示以了解如何覆盖这些设置。

TSLint:高亮显示错误和警告,并在工具提示中显示问题描述。

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 请确保在项目中配置了本地 Node.js 解释器:打开 设置 对话框(Ctrl+Alt+S ),并转到 语言和框架 | Node.jsNode 解释器(I) 字段显示了默认项目的 Node.js 解释器。 详细信息请参阅 配置本地 Node.js 解释器

  3. 请确保在设置中启用了 TSLint 捆绑插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 TSLint。 如需详细了解插件,请参阅 管理插件

安装 TSLint

  • 在嵌入式 终端Alt+F12 )中,输入:

    npm install tslint typescript&#xa0;--save-dev

    请访问 TSLint 官方网站了解更多信息。

创建 TSLint 配置文件

  • 在嵌入式 终端Alt+F12 )中,输入:

    cd <project root> tslint --init

在 WebStorm 中激活并配置 TSLint

默认情况下,WebStorm 使用项目 node_modules 文件夹中的 TSLint 包,以及当前文件所在文件夹中的 tslint.json 配置文件。 如果当前文件所在文件夹中未找到 tslint.json 配置文件,WebStorm 将在其上级文件夹中查找,直到项目根目录为止。

如果您有多个包含 TSLint 作为依赖项的 package.json 文件,WebStorm 会为每个 package.json 启动一个单独的进程,并处理其下的所有内容。 这样,您就可以为单体仓库中的每个路径或具备多个 TSLint 配置的项目应用特定的 TSLint 版本或插件集。

在所有新建的 WebStorm 项目中,此行为为默认开启。 要在已创建的项目中启用此行为,请在 语言与框架 | TypeScript | TSLint 中打开 设置 对话框(Ctrl+Alt+S ),并选择 自动 TSLint 配置 选项。

您还可以手动配置 TSLint,以使用自定义 TSLint 包和 tslint.json ,并指定一些附加规则。

  1. 设置 对话框中(Ctrl+Alt+S ),进入 语言与框架 | TypeScript | TSLint

  2. 选择 手动配置 选项。

  3. 指定 TSLint 包的路径。

  4. 配置文件 区域中,指定要使用的配置。

    默认情况下,WebStorm 会优先查找 tslint.json tslint.yaml tslint.yml 配置文件。 WebStorm 将从待检查文件所在的文件夹开始搜索,然后在上级文件夹中查找,直到项目根目录为止。 如果未找到 tslint.json tslint.yaml tslint.yml 配置文件,TSLint 将使用其默认嵌入式配置文件。 因此,您需要在 tslint.json tslint.yaml tslint.yml 配置文件中,或在自定义配置文件中定义要应用的配置,也可以依赖默认的嵌入式配置。

    • 要使 WebStorm 查找 tslint.json tslint.yaml tslint.yml 文件,请选择 自动搜索 选项。

    • 若要使用自定义文件,请选择 配置文件 选项,并在 路径 字段中指定文件的位置。 从列表中选择路径,或手动输入,或者点击 “浏览”按钮 ,在打开的对话框中选择相关文件。

    请访问 TSLint 官方网站了解关于 TSLint 配置的更多信息。

  5. 如有必要,在 附加规则目录 字段中指定包含附加代码验证规则的文件位置。 这些规则将在 tslint.json tslint.yaml tslint.yml 定义的规则或上述自定义配置文件中的规则之后应用,因此将会覆盖它们。

配置 TSLint 的高亮显示

默认情况下,WebStorm 会根据 TSLint 配置文件中的严重级别标记检测到的错误和警告。 例如,错误以下划红线标记,警告则以黄色背景标示。 如需了解详情,请参阅 代码检查更改代码检查严重性

在 TSLint 配置中更改规则的严重性级别

  • 在 TSLint 配置文件中,找到要编辑的规则,并将其 ID 设置为 warningerror。 请访问 TSLint 官方网站了解更多信息。

您可以覆盖 TSLint 配置文件中的严重级别,使 WebStorm 忽略它们,并将 linter 报告的所有内容显示为错误、警告或自定义颜色。

忽略配置中的严重性级别

  1. 设置 对话框中(Ctrl+Alt+S ),进入 编辑器 | 检查。 将打开 检查设置页面

  2. 在中间窗格中,进入 JavaScript 和 TypeScript | 代码质量工具 | TSLint

  3. 在右侧窗格中,取消选中 使用配置文件中的规则严重程度 复选框,并选择要使用的严重级别以替代默认设置。

    为 TSLint 指定自定义严重性级别

从 TSLint 配置文件导入代码风格

WebStorm 能识别在 tslint.json tslint.yaml tslint.yml 配置文件中描述的一些 TSLint 规则,并允许您将这些规则应用到项目中的 TypeScript 代码样式配置

  • 首次打开项目时,WebStorm 会自动从项目的 tslint.json tslint.yaml tslint.yml 中导入代码样式。

  • 如果 tslint.json tslint.yaml tslint.yml 已更新(无论是手动更新还是通过版本控制更新),请在编辑器中打开该文件,然后从上下文菜单中选择 应用 TSLint 代码样式规则

    从编辑器导入 TSLint 代码风格规则:上下文菜单

TSLint 快速修复

WebStorm 允许您自动修复 TSLint 报告的部分问题。

ws_tslint_quick_fixes.png
  • 要修复特定错误,请将插入点置于高亮显示的代码上,按下 Alt+Enter ,然后从列表中选择 TSLint:修复 '<current error>'

  • 要修复文件中检测到的所有问题,请选择 TSLint:修复当前文件

    如需了解更多信息,请参阅 应用快速修复

您可以对当前文件,甚至对当前行,抑制 TSLint 规则。 WebStorm 会自动以 /* tslint:disable:<rule name>// tslint:disable-next-line:<rule name> 的格式生成禁用注释,并分别置于文件顶部或当前行之上。

通过添加 disable 注释即时禁用 TSLint 规则

即时抑制 TSLint 规则

  1. 将插入点置于 TSLint 报告的错误或警告上,并按下 Alt+Enter

  2. 选择要禁用规则的快速修复,并按下 Right

  3. 从列表中选择 在当前文件中抑制 <rule name>在当前行中抑制 <rule name>

最后修改日期: 2025年 9月 26日