RubyMine 2025.2 Help

ESLint

RubyMine 集成了 ESLint ,提供了广泛的 lint 规则,并且可以通过插件扩展。 RubyMine 在编辑器中直接显示 ESLint 报告的警告和错误,实时更新。 使用 ESLint,您还可以使用 JavaScript Standard Stylelint 您的 TypeScript 代码

除了 JavaScript 和 TypeScript 之外,ESLint 还可以应用于整个项目或其特定部分中的其他类型文件,请参阅 配置 linting 范围

开始之前

  1. 下载并安装 Node.js

  2. 按照 配置本地 Node.js 解释器在 Windows Subsystem for Linux 上使用 Node.js配置远程 Node.js 解释器 中的说明,在项目中配置 Node.js 解释器。

安装 ESLint

  1. 在嵌入式 终端 (Alt+F12) 中,输入以下命令之一:

    • 在当前项目中 npm init @eslint/config@latest 安装 ESLint 并生成配置文件。

      回答向导中的问题。 结果是,RubyMine 安装最新版本的 ESLint 并生成一个 eslint.config.js 配置文件。

    • npm install --save-dev eslint 将 ESLint 安装为开发依赖项。

    • npm install --g eslint 以全局安装。

    • 在当前项目中 pnpm create @eslint/config@latest 安装 ESLint 并生成配置文件。

      回答向导中的问题。 结果是,RubyMine 安装最新版本的 ESLint 并生成一个 eslint.config.js 配置文件。

    • pnpm add -D eslint 将 ESLint 安装为开发依赖项。

    • pnpm add -g eslint 以全局安装。

    • 在当前项目中 yarn create @eslint/config 安装 ESLint 并生成配置文件。

      回答向导中的问题。 结果是,RubyMine 安装最新版本的 ESLint 并生成一个 eslint.config.js 配置文件。

    • yarn add -D eslint 将 ESLint 安装为开发依赖项。

    • yarn add eslint 以全局安装。

  2. 如果需要,安装其他插件,例如 eslint-plugin-react来检查 React 应用程序的代码质量。

了解更多信息,请访问 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, );

    了解更多信息,请访问 ESLint 官方网站

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

    了解更多信息,请访问 ESLint 官方网站

在 RubyMine 中配置 ESLint

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

自动配置 ESLint

通过自动配置,RubyMine 使用项目 node_modules 文件夹中的 ESLint 包和当前文件所在文件夹中的 配置文件。 如果在当前文件文件夹中未找到 配置文件,RubyMine 将在其父文件夹中查找,直到项目根目录。

如果您有多个 package.json 文件,将 ESLint 列为依赖项,RubyMine 会为每个 package.json 单独启动一个进程,并处理其下的一切内容。 这可以让您将特定的 ESLint 版本或一组特定的插件应用到 monorepo 或具有多个 ESLint 配置的项目的每个路径。

  • 要在当前项目中自动配置 ESLint,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ,并选择 自动 ESLint 配置 选项。

  • 要在所有新项目中自动配置 ESLint,请打开 新项目设置 对话框(文件 | 新项目设置 | 设置 用于新项目 ),转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ,并选择 自动 ESLint 配置 选项。

手动配置 ESLint

通过手动配置,您可以使用自定义 ESLint 包、配置文件和工作目录,并应用各种附加规则和选项。

  1. 设置 对话框(Ctrl+Alt+S )中,进入 语言与框架 | JavaScript | 代码质量工具 | ESLint ,然后选择 手动 ESLint 配置

  2. ESLint 软件包 字段中,指定 eslintstandard 包的位置。

  3. 工作目录 字段中,指定 ESLint 进程的工作目录。

    默认情况下,该字段为空,RubyMine 会自动检测工作目录。 首先,它会查找包含 配置文件 的最接近被 lint 文件的目录。

    如果自动检测到的工作目录与您的项目配置不匹配,您需要手动指定工作目录。 使用分号作为分隔符。 可接受的值是:

    • 绝对路径。

    • 与项目基本目录(存储 RubyMine 特定项目信息的 .idea 文件夹的上级文件夹)相关的路径。 例如:

      1. ./ :使用项目基目录作为 ESLint 进程的工作目录。

      2. client;server :使用 <project_base_dir>/client <project_base_dir>/server 作为工作目录。 对于既不在 client 也不在 服务器 文件夹下的文件,工作目录将会 如上所述自动检测

      3. packages/* <project_base_dir>/packages 目录的每个子文件夹都将用作相应 linted 文件的工作目录。

    • 如果某些经过 lint 的文件不在文件夹层次结构中的项目基目录下,您可以使用相对于内容根目录的路径。

    • Glob 模式定义工作目录的相对路径。 例如,带有 **/foo -* 的每个以 foo- 开头的目录将被用作对应被 lint 的文件的工作目录。

  4. 请选择要使用的配置。

    • 自动搜索 :选择此选项,如果 ESLint 规则配置在支持格式的 配置文件 中。

      RubyMine 从要检查的文件存储的文件夹开始查找此类文件,然后在其父文件夹中搜索,依此类推,直到项目根目录。

    • 配置文件 — 选择此选项以使用自定义文件,并在 Path 字段中指定文件位置。

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

  5. 可选:

    • 额外eslint 选项 (O) 字段中,指定运行 ESLint 的其他命令行选项,使用空格作为分隔符。 例如,要使用 用 TypeScript 编写的配置文件 ,请输入 --flag unstable_ts_config

      了解有关 ESLint CLI 选项的更多信息,请访问 ESLint 官方网站

    • 附加规则目录 字段中,指定包含额外代码验证规则的文件位置。 这些规则将在默认配置文件或自定义配置文件中的规则之后应用,并相应地覆盖它们。

      更多信息,请查看 ESLint 官网的 ESLint 配置文件添加规则

配置 linting 范围

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ,然后选择 自动 ESLint 配置手动 ESLint 配置

  2. 运行 文件 字段中,指定定义待检查文件集合的模式。 您可以接受默认模式或输入自定义模式。

    默认模式下, **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue} ,ESLint 将会唤醒并处理任何更新的 JavaScript、TypeScript、JSX、TSX、HTML 或 Vue 文件。 要检查其他类型的文件或存储在特定文件夹中的文件,请使用 glob patterns更新默认模式。

    • 例如,要自动 lint CoffeeScript 文件,也可以将 coffee 添加到默认模式中,如下所示:

      **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}
    • 要从特定文件夹中(包括子文件夹)清理文件,请将 **/* 替换为 <path to the folder>/**/*

      假设,您的项目结构如下:

      ESLint:自定义模式。 示例项目结构

      若要仅 lint coffee 文件夹中的文件,请将模式更新如下:

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}

      因此, linting.coffee 文件进行了 lint,而 no_linting .coffee 文件没有。

保存时自动修复问题

ESLint 可以在每次保存更改时修复检测到的问题,无论是手动保存、使用 Ctrl+S ,还是自动保存、启动运行/调试配置、关闭 RubyMine 或执行版本控制操作。欲了解更多信息,请参阅 自动保存

  • 打开 设置 对话框 (Ctrl+Alt+S ),进入 语言与框架 | JavaScript | 代码质量工具 | ESLint ,并选择 保存时运行 eslint --fix 复选框。

检查您的代码

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

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

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

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

检查小部件

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

在编辑器中查看问题并应用快速修复

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

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

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

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

    ESLint:解决问题

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

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

在 Problems 工具窗口中检查您的代码

  • 要打开 问题 工具窗口,点击编辑器右上角的 检查 小部件。

    检查小部件

    或者,从主菜单中选择 查看 | 工具窗口 | 问题 或按 Alt+6

  • 文件 选项卡中,查看问题描述、应用快速修复、导航至源代码中出现错误的片段,并可在 编辑器预览 窗格中直接修复这些问题,而无需离开工具窗口。 了解更多信息,请参阅 问题工具窗口

    在问题工具窗口中快速修复
  • 项目错误 选项卡中,查看当前会话中打开的所有文件中的错误,错误信息按检测出错误的文件分组。

    问题工具窗口,ESLint。 项目错误选项卡显示整个项目中先前打开文件的语法错误

    在这里,您可以查看问题描述,应用快速修复,导航到源代码中发生错误的片段,并在 编辑器预览 面板中修复它们,而无需离开工具窗口。 了解更多信息,请参见 Problems tool window

为 ESLint 配置高亮

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

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

忽略配置中的严重级别

您可以覆盖 ESLint 配置中的严重性,以便 RubyMine 忽略它们,并将 linter 报告的所有内容显示为错误、警告或自定义颜色。

为 ESLint 指定自定义严重级别

忽略配置中的严重级别

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

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

  3. 在右侧窗格中,取消选中 从配置文件中使用规则严重性 复选框,然后选择要使用的严重级别来替代默认级别。

从 ESLint 导入代码样式

您可以将部分 ESLint 代码样式 rules 导入到 RubyMine 的 JavaScript 代码样式 settings 中。 这使得 RubyMine 在自动补全、生成、重构代码或添加导入语句时能够使用更准确的代码风格选项。 当您使用 重新格式化 操作时,RubyMine 将不再破坏从 ESLint 角度来看格式正确的代码。

RubyMine 支持所有官方格式的 ESLint 配置,请参阅上文的 支持的 ESLint 配置文件格式

  • eslint.config.js eslint.config.mjs eslint.config.cjs eslint.config.ts eslint.config.mts eslint.config.cts (平面格式),适用于 ESLint 版本 9 及更高版本。

  • .eslintrc 文件和带有 eslintConfig 属性的 package.json 文件,适用于 ESLint 版本 8 及更早版本。

了解更多信息,请访问 ESLint 官方网站

  • 当您第一次打开项目时,RubyMine 会自动从项目的 ESLint 配置中导入代码样式。

  • 如果您的 ESLint 配置已更新(手动或通过版本控制),请在编辑器中打开它,并从上下文菜单中选择 应用 ESLint 代码风格规则

    从 JavaScript 或 YAML 配置文件中导入 ESLint 代码风格规则

    或者,只需在文件顶部的 “应用 ESLint 的代码样式?” 问题上回答

    应用规则的列表显示在 通知 工具窗口中:

    事件日志工具窗口显示已应用的 ESLint 规则列表

使用 JavaScript Standard Style

您可以将 JavaScript Standard Style 设置为应用程序的默认 JavaScript 代码样式,这样当您键入代码或重新格式化代码时,它的主要规则就会被应用。 由于 Standard 基于 ESLint,您也可以通过 RubyMine ESLint 集成使用 Standard。

安装 JavaScript Standard

通过 ESLint 启用 Standard 检查

如果您打开的项目中 standard 被列在项目的 package.json 文件中,RubyMine 会自动启用 Standard 的 linting。

  1. 设置 对话框 (Ctrl+Alt+S) 中,前往 语言与框架 | JavaScript | 代码质量工具 | ESLint

  2. 在打开的 ESLint 页面上,选择 手动 ESLint 配置 并在 ESLint 包 字段中指定 standard 包的位置。

将 JavaScript Standard Style 设置为默认

  1. 设置 对话框 (Ctrl+Alt+S) 中,前往 编辑器 | 代码样式 | JavaScript

  2. JavaScript页面上,点击 设置从 ,然后选择 JavaScript Standard Style。 该样式将替换您当前的方案。

使用 Docker 的 ESLint

使用 RubyMine,您可以在 Docker 容器内运行 ESLint 来检查代码,与在本地运行的方式相同。

请从 使用 Docker 运行 Node.js 了解更多。

  1. 按照 Node.jsNode.js Remote Interpreter 中的描述,在 设置 | 插件 页面、选项卡 Marketplace 中安装 从 JetBrains Marketplace 安装插件

  2. 请确保在设置中启用了 Docker 插件。 按 Ctrl+Alt+S 打开设置,然后选择 Plugins。 请点击 已安装 选项卡。 在搜索字段中输入 Docker。 有关插件的更多信息,请参阅 插件管理

  3. 下载、安装并配置 Docker ,具体步骤请参见 Docker 主题。

  4. 在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose将其设置为默认在您的项目中。 还要确保与此远程解释器关联的软件包管理器 设置为项目默认

  5. 请打开您的 package.json 并确保 ESLint 列在 devDependencies 部分:

    { "name": "node-eslint", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "2.0.0-beta11" }, "devDependencies": { "@eslint/js": "^9.15.0", "eslint": "^9.15.0", "globals": "^15.12.0" } }
  6. 在编辑器中的任意位置右键点击,然后从上下文菜单中选择 运行 '<包管理器> install'

  7. 在那之后,ESLint 的工作方式与您在本地处理代码时相同。 在编辑器或 问题 工具窗口中查看检测到的不一致描述并应用建议的快速修复。

    在 Docker 容器中使用 ESLint
最后修改日期: 2025年 9月 26日