ESLint
RubyMine 集成了 ESLint ,提供了广泛的 lint 规则,并且可以通过插件扩展。 RubyMine 在编辑器中直接显示 ESLint 报告的警告和错误,实时更新。 使用 ESLint,您还可以使用 JavaScript Standard Style 并 lint 您的 TypeScript 代码。
除了 JavaScript 和 TypeScript 之外,ESLint 还可以应用于整个项目或其特定部分中的其他类型文件,请参阅 配置 linting 范围。
开始之前
下载并安装 Node.js。
按照 配置本地 Node.js 解释器、 在 Windows Subsystem for Linux 上使用 Node.js 或 配置远程 Node.js 解释器 中的说明,在项目中配置 Node.js 解释器。
安装 ESLint
在嵌入式 终端 (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以全局安装。
如果需要,安装其他插件,例如 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 标志。
按 Ctrl+Alt+S 打开设置,然后选择 。
请选择 手动 ESLint 配置。
在 额外的 eslint 选项 字段中,输入
--flag unstable_ts_config。点击 Apply 保存更改并关闭对话框。
ESLint 版本 8 及更早版本
.eslintrc.* ( .eslintrc 、 .eslintrc.json 或 .eslintrc.yaml 文件,或其他支持的格式文件)。
.eslintignore
package.json 具有
eslintIgnore或eslintConfig属性。 此配置系统已被弃用,了解更多信息,请访问 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 ),转到 ,并选择 自动 ESLint 配置 选项。
要在所有新项目中自动配置 ESLint,请打开 新项目设置 对话框( ),转到 ,并选择 自动 ESLint 配置 选项。
手动配置 ESLint
通过手动配置,您可以使用自定义 ESLint 包、配置文件和工作目录,并应用各种附加规则和选项。
在 设置 对话框(Ctrl+Alt+S )中,进入 ,然后选择 手动 ESLint 配置。
在 ESLint 软件包 字段中,指定 eslint 或 standard 包的位置。
在 工作目录 字段中,指定 ESLint 进程的工作目录。
默认情况下,该字段为空,RubyMine 会自动检测工作目录。 首先,它会查找包含 配置文件 的最接近被 lint 文件的目录。
如果自动检测到的工作目录与您的项目配置不匹配,您需要手动指定工作目录。 使用分号作为分隔符。 可接受的值是:
绝对路径。
与项目基本目录(存储 RubyMine 特定项目信息的 .idea 文件夹的上级文件夹)相关的路径。 例如:
./:使用项目基目录作为 ESLint 进程的工作目录。client;server:使用 <project_base_dir>/client 和 <project_base_dir>/server 作为工作目录。 对于既不在 client 也不在 服务器 文件夹下的文件,工作目录将会 如上所述自动检测。packages/*: <project_base_dir>/packages 目录的每个子文件夹都将用作相应 linted 文件的工作目录。
如果某些经过 lint 的文件不在文件夹层次结构中的项目基目录下,您可以使用相对于内容根目录的路径。
Glob 模式定义工作目录的相对路径。 例如,带有
**/foo -*的每个以foo-开头的目录将被用作对应被 lint 的文件的工作目录。
请选择要使用的配置。
自动搜索 :选择此选项,如果 ESLint 规则配置在支持格式的 配置文件 中。
RubyMine 从要检查的文件存储的文件夹开始查找此类文件,然后在其父文件夹中搜索,依此类推,直到项目根目录。
配置文件 — 选择此选项以使用自定义文件,并在 Path 字段中指定文件位置。
了解更多关于配置 ESLint 的信息,请访问 ESLint 官方网站。
可选:
在 额外eslint 选项 (O) 字段中,指定运行 ESLint 的其他命令行选项,使用空格作为分隔符。 例如,要使用 用 TypeScript 编写的配置文件 ,请输入
--flag unstable_ts_config。了解有关 ESLint CLI 选项的更多信息,请访问 ESLint 官方网站。
在 附加规则目录 字段中,指定包含额外代码验证规则的文件位置。 这些规则将在默认配置文件或自定义配置文件中的规则之后应用,并相应地覆盖它们。
更多信息,请查看 ESLint 官网的 ESLint 配置文件 和 添加规则。
配置 linting 范围
打开 设置 对话框(Ctrl+Alt+S ),转到 ,然后选择 自动 ESLint 配置 或 手动 ESLint 配置。
在 运行 文件 字段中,指定定义待检查文件集合的模式。 您可以接受默认模式或输入自定义模式。
默认模式下,
**/*.{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>/**/*。假设,您的项目结构如下:

若要仅 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 ),进入 ,并选择 保存时运行 eslint --fix 复选框。
检查您的代码
安装并启用后,ESLint 会在您每次打开 JavaScript 文件时自动激活。 您还可以配置 ESLint 以 在保存时自动检测并修复问题。
默认情况下,RubyMine 会根据 ESLint 配置中的严重性级别标记检测到的问题。 请参阅 配置 ESLint 高亮显示 ,了解如何覆盖这些设置。
当前文件中检测到的错误描述及其快速修复方法可在编辑器和 Problems 工具窗口的 文件 选项卡中查看。
所有之前打开的文件中的错误及其快速修复会显示在 项目错误 选项卡的 问题 工具窗口中。 若要打开工具窗口,请点击编辑器右上角的 检查 小组件:

有关详情,请参阅 在编辑器中查看问题并应用快速修复以及 问题工具窗口。
在编辑器中查看问题并应用快速修复
要查看问题描述,请将鼠标悬停在高亮代码上。

要解决检测到的问题,请点击 ESLint:修复“<rule name>” 或按 Alt+Shift+Enter。
要解决当前文件中的所有检测到的问题,请点击 更多操作 (Alt+Enter )并从列表中选择 。

如需更多信息,请参阅 在编辑器中查看问题并应用快速修复。
您还可以配置 ESLint 在保存文件时修复文件中的所有问题。 要配置此类行为,请在 保存时运行 eslint --fix 复选框,在 ESLint 页面的 设置 对话框中,如 在 RubyMine 中激活和配置 ESLint 所述。
在 Problems 工具窗口中检查您的代码
要打开 问题 工具窗口,点击编辑器右上角的 检查 小部件。

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

在 项目错误 选项卡中,查看当前会话中打开的所有文件中的错误,错误信息按检测出错误的文件分组。

在这里,您可以查看问题描述,应用快速修复,导航到源代码中发生错误的片段,并在 编辑器预览 面板中修复它们,而无需离开工具窗口。 了解更多信息,请参见 Problems tool window。
为 ESLint 配置高亮
默认情况下,RubyMine 会根据 ESLint 配置中的严重性级别标记检测到的错误和警告。 例如,错误会用红色波浪线突出显示,而警告则会用黄色背景标记。 如需更多信息,请参阅 代码检查 和 更改检查严重性。
在 ESLint 配置中更改规则的严重级别
在 配置文件 中,找到您想要编辑的规则,并将其值设置为
1warn或2error。了解更多信息,请访问 ESLint 官方网站。
忽略配置中的严重级别
您可以覆盖 ESLint 配置中的严重性,以便 RubyMine 忽略它们,并将 linter 报告的所有内容显示为错误、警告或自定义颜色。

忽略配置中的严重级别
在 设置 对话框(Ctrl+Alt+S )中,选择 。 检查页面 打开。
在中央窗格中,转到 JavaScript | 代码质量工具 | ESLint。
在右侧窗格中,取消选中 从配置文件中使用规则严重性 复选框,然后选择要使用的严重级别来替代默认级别。
从 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 代码风格规则。

或者,只需在文件顶部的 “应用 ESLint 的代码样式?” 问题上回答 是。
应用规则的列表显示在 通知 工具窗口中:

使用 JavaScript Standard Style
您可以将 JavaScript Standard Style 设置为应用程序的默认 JavaScript 代码样式,这样当您键入代码或重新格式化代码时,它的主要规则就会被应用。 由于 Standard 基于 ESLint,您也可以通过 RubyMine ESLint 集成使用 Standard。
安装 JavaScript Standard
在嵌入的 终端 (Alt+F12 )中,输入:
npm install standard --save-dev了解更多信息,请访问 JavaScript Standard Style 官方网站。
通过 ESLint 启用 Standard 检查
如果您打开的项目中 standard 被列在项目的 package.json 文件中,RubyMine 会自动启用 Standard 的 linting。
在 设置 对话框 (Ctrl+Alt+S) 中,前往 。
在打开的 ESLint 页面上,选择 手动 ESLint 配置 并在 ESLint 包 字段中指定
standard包的位置。
将 JavaScript Standard Style 设置为默认
在 设置 对话框 (Ctrl+Alt+S) 中,前往 。
在 JavaScript页面上,点击 设置从 ,然后选择 JavaScript Standard Style。 该样式将替换您当前的方案。
使用 Docker 的 ESLint
使用 RubyMine,您可以在 Docker 容器内运行 ESLint 来检查代码,与在本地运行的方式相同。
请从 使用 Docker 运行 Node.js 了解更多。
按照 Node.js 和 Node.js Remote Interpreter 中的描述,在 设置 | 插件 页面、选项卡 Marketplace 中安装 从 JetBrains Marketplace 安装插件。
请确保在设置中启用了 Docker 插件。 按 Ctrl+Alt+S 打开设置,然后选择 。 请点击 已安装 选项卡。 在搜索字段中输入 Docker。 有关插件的更多信息,请参阅 插件管理。
下载、安装并配置 Docker ,具体步骤请参见 Docker 主题。
在 Docker 中配置 Node.js 远程解释器或通过 Docker Compose并 将其设置为默认在您的项目中。 还要确保与此远程解释器关联的软件包管理器 设置为项目默认。
请打开您的 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" } }在编辑器中的任意位置右键点击,然后从上下文菜单中选择 运行 '<包管理器> install'。
在那之后,ESLint 的工作方式与您在本地处理代码时相同。 在编辑器或 问题 工具窗口中查看检测到的不一致描述并应用建议的快速修复。
