RubyMine 2025.2 Help

TypeScript 语法检查

推荐的 TypeScript 代码检查工具是 ESLint ,它提供了广泛的检查规则,并且可以通过插件进行扩展。 RubyMine 在编辑器中直接显示 ESLint 报告的警告和错误,实时更新。 从 ESLint 了解更多。

@typescript-eslint/parser 设置为您项目的 ESLint 配置中的解析器时,RubyMine 会在 .ts .tsx 文件中突出显示 ESLint 报告的错误。 了解更多信息,请参阅 typescript-eslint 仓库中的 readme 文件

开始之前

  1. 下载并安装 Node.js

  2. 按照 配置本地 Node.js 解释器在 Windows Subsystem for Linux 上使用 Node.js配置远程 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 版本,RubyMine 能识别以下文件类型中的配置:

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. 点击 Apply 保存更改并关闭对话框。

ESLint 版本 8 及更早版本

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

  • .eslintignore

  • package.json 具有 eslintIgnoreeslintConfig 属性。 此配置系统已被弃用,了解更多信息,请访问 ESLint 官方网站

了解如何从 ESLint 配置迁移指南 切换到平面格式。

创建和编辑配置文件

  • 打开一个配置文件或在项目根目录中创建一个新文件。 根据您使用的 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 官方网站

在 RubyMine 中配置 ESLint

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

了解更多信息,请参阅 ESLint

使用 ESLint 抑制 TypeScript 代码的检查

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

检查您的代码

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

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

当前文件中检测到的错误描述及其快速修复方法可在编辑器和 Problems 工具窗口的 文件 选项卡中查看。

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

检查小部件

有关详情,请参阅 在编辑器中查看问题并应用快速修复以及 问题工具窗口

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

    ESLint:错误和警告会被突出显示,问题的描述显示在工具提示中。

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

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

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

    在问题工具窗口中快速修复

    了解更多信息,请参阅 问题工具窗口

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

了解更多信息,请参阅 在编辑器中查看问题并应用快速修复ESLint

TSLint

您也可以在 RubyMine 内使用 TSLint 代码验证工具,无需运行应用程序即可检查您的 TypeScript 代码中最常见的错误。 当工具激活时,它会对所有打开的 TypeScript 文件进行检查并标记检测到的问题。

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

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

开始之前

  1. 下载并安装 Node.js

  2. 确保在项目中配置了本地 Node.js 解释器:打开 设置 对话框(Ctrl+Alt+S ),然后转到 语言和框架 | Node.jsNode 解释器(I) 字段显示默认项目 Node.js 解释器。 了解更多,见 配置本地 Node.js 解释器

  3. 请确保在 JavaScript and TypeScriptTSLint必需插件在 设置 | 插件 页面的 已安装 标签上已启用。 如需了解更多信息,请参阅 管理插件

安装 TSLint

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

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

    可以从 TSLint 官方网站了解更多信息。

创建 TSLint 配置文件

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

    cd <project root> tslint --init

在 RubyMine 中激活并配置 TSLint

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

如果您有多个 package.json 文件,其中列出了 TSLint 作为依赖项,RubyMine 将为每个 package.json 启动一个单独的进程,并处理其下的所有内容。 此功能使您可以将特定的 TSLint 版本或一组特定插件应用于 monorepo 或具有多个 TSLint 配置的项目中的每条路径。

这种行为是所有新 RubyMine 项目的默认设置。 要在先前创建的项目中启用此功能,请转到 语言与框架 | TypeScript | TSLint设置 对话框(Ctrl+Alt+S )并选择 自动 TSLint 配置 选项。

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

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

  2. 请选择 手动配置 选项。

  3. 请指定 TSLint 包的路径。

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

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

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

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

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

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

为 TSLint 配置高亮显示

默认情况下,RubyMine 会根据 TSLint 配置文件中的严重级别标记检测到的错误和警告。 例如,错误会用红色波浪线突出显示,而警告则会用黄色背景标记。 如需更多信息,请参阅 代码检查更改检查严重性

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

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

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

忽略配置中的严重级别

  1. 设置 对话框 (Ctrl+Alt+S) 中,前往 编辑器|检查Inspections 页 打开。

  2. 在中央窗格中,转到 JavaScript 和 TypeScript | 代码质量工具 | TSLint

  3. 在右侧窗格中,清除 从配置文件中使用规则严重性 复选框并选择要使用的严重级别,而不是默认级别。

    为 TSLint 指定自定义严重级别

从 TSLint 配置文件导入代码样式

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

  • 当您第一次打开项目时,RubyMine 会自动从项目 tslint.json tslint.yaml tslint.yml 导入代码风格。

  • 如果 tslint.json tslint.yaml tslint.yml 被更新(手动或通过版本控制),请在编辑器中打开它并从上下文菜单中选择 应用 TSLint 代码样式规则

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

TSLint 快速修复

RubyMine 允许您自动修复 TSLint 报告的一些问题。

ws_tslint_quick_fixes.png
  • 要修复特定错误,请将文本光标放置在高亮代码处,按 Alt+Enter ,然后从列表中选择 TSLint:修复“<current error>”

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

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

通过添加禁用注释来动态禁用 TSLint 规则

临时禁止 TSLint 规则

  1. 将文本光标置于 TSLint 报告的错误或警告处,然后按 Alt+Enter

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

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

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