ESLint
WebStorm 集成了 ESLint ，提供了大量检查规则，并可通过插件扩展。 WebStorm 在编辑器中直接显示 ESLint 报告的警告和错误。 借助 ESLint，您还可以使用 JavaScript Standard Style ，并对 TypeScript 代码进行检查。
除 JavaScript 和 TypeScript 外，ESLint 也可应用于整个项目或特定部分中的其他类型文件，详见 配置代码检查范围。
开始之前
请确保您的计算机上已安装 Node.js。
请按照 配置本地 Node.js 解释器、 在 Windows Subsystem for Linux 上使用 Node.js 或 配置远程 Node.js 解释器 的说明在项目中配置 Node.js 解释器。
安装 ESLint
在嵌入式 终端 （Alt+F12 ）中，输入以下命令之一：
npm init @eslint/config@latest以在当前项目中安装 ESLint 并生成配置文件。回答向导中的问题。 完成后，WebStorm 会安装最新版本的 ESLint，并生成 eslint.config.js 配置文件。
npm install --save-dev eslint以开发依赖项形式安装 ESLint。npm install --g eslint进行全局安装。
pnpm create @eslint/config@latest以在当前项目中安装 ESLint 并生成配置文件。回答向导中的问题。 完成后，WebStorm 会安装最新版本的 ESLint，并生成 eslint.config.js 配置文件。
pnpm add -D eslint以开发依赖项形式安装 ESLint。pnpm add -g eslint进行全局安装。
yarn create @eslint/config以在当前项目中安装 ESLint 并生成配置文件。回答向导中的问题。 完成后，WebStorm 会安装最新版本的 ESLint，并生成 eslint.config.js 配置文件。
yarn add -D eslint以开发依赖项形式安装 ESLint。yarn add eslint进行全局安装。
可选地安装其他插件，例如 eslint-plugin-react 来检查 React 应用程序的代码质量。
请参阅 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 标志。
按下 Ctrl+Alt+S 以打开设置，然后选择 。
选择 手动 ESLint 配置。
在 额外 eslint 选项 字段中，输入
--flag unstable_ts_config。单击 应用 以保存更改并关闭对话框。
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 官方网站。
在 WebStorm 中配置 ESLint
默认情况下，ESLint 会被 自动配置。 您可以选择 手动指定所有配置设置，或禁用 ESLint。
自动配置 ESLint
在自动配置下，WebStorm 使用项目 node_modules 文件夹中的 ESLint 包和当前文件所在文件夹中的 配置文件。 如果在当前文件的文件夹中未找到 配置文件，WebStorm 将在其父文件夹中查找，直到项目根目录。
如果有多个 package.json 文件包含 ESLint 作为依赖项，WebStorm 将为每个 package.json 启动一个独立进程，并处理其下所有内容。 这样可以为单体仓库或包含多个 ESLint 配置的项目中的每个路径应用特定的 ESLint 版本或插件集。
要在当前项目中自动配置 ESLint，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选择 自动 ESLint 配置 选项。
要在所有新项目中自动配置 ESLint，请打开 新项目的设置 对话框（ ），转到 ，然后选择 自动 ESLint 配置 选项。
手动配置 ESLint
通过手动配置，您可以使用自定义的 ESLint 包、配置文件和工作目录，并应用各种附加规则和选项。
在 设置 对话框（Ctrl+Alt+S ）中，转到 ，然后选择 手动 ESLint 配置。
在 ESLint 包 字段中，指定 eslint 或 standard 包的位置。
在 工作目录 字段中，指定 ESLint 进程使用的工作目录。
默认情况下，该字段为空，WebStorm 会自动检测工作目录。 首先，它会查找包含 配置文件 的最接近被检查文件的目录。
如果自动检测到的工作目录不符合您的项目配置，您需要手动指定工作目录。请使用分号分隔。可接受的值如下： 请使用分号作为分隔符。 可接受的值如下：
绝对路径。
相对于项目基础目录的路径（即存储 WebStorm 项目元数据的 .idea 文件夹的父目录）。 例如：
./：使用项目基础目录作为 ESLint 进程的工作目录。client;server：将 <project_base_dir>/client 和 <project_base_dir>/server 作为工作目录。 对于既不在 client 也不在 server 文件夹中的文件，将按照上述说明 自动检测 工作目录。packages/*： <project_base_dir>/packages 目录中的每个子文件夹将作为相应检查文件的工作目录。
如果某些被检查文件在文件夹层级中不属于项目基础目录，可以使用相对于内容根目录的路径。
定义工作目录相对路径的 Glob 模式。 例如，使用
**/foo -*时，每个以foo-开头命名的目录都将作为相应已 lint 文件的工作目录。
选择要使用的配置。
自动搜索 ：如果在受支持格式的 配置文件 中配置了 ESLint 规则，请选择此选项。
WebStorm 会从待检查文件所在的文件夹开始查找此类文件，然后在其父文件夹中查找，并依此类推，直到项目根目录为止。
配置文件 - 选择此选项以使用自定义文件，并在 路径 字段中指定文件位置。
有关配置 ESLint 的更多信息，请参阅 ESLint 官方网站。
可选：
在 额外eslint 选项 (O) 字段中，指定运行 ESLint 时使用的附加命令行选项，使用空格分隔。 例如，要使用 以 TypeScript 编写的配置文件 ，请输入
--flag unstable_ts_config。有关 ESLint CLI 选项的更多信息，请参阅 ESLint 官方网站。
在 附加规则目录 字段中，指定包含附加代码验证规则的文件的位置。 这些规则将在默认配置文件或自定义配置文件中的规则之后应用，并相应地覆盖这些规则。
有关 ESLint 配置文件 和 添加规则 的更多信息，请参阅 ESLint 官方网站。
配置代码检查范围
打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选择 自动 ESLint 配置 或 手动 ESLint 配置。
在 对文件运行 字段中，指定定义要 lint 的文件集合的模式。 您可以接受默认模式，也可以输入自定义模式。
使用默认模式
**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue}时，ESLint 会在每次更新 JavaScript、TypeScript、JSX、TSX、HTML 或 Vue 文件时进行处理。 要 lint 其他类型文件或特定文件夹中的文件，请使用 glob pattern 来更新默认模式。例如，如需自动 lint CoffeeScript 文件，请将
coffee添加到默认模式中，如下所示：**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}要对特定文件夹（包括其子文件夹）中的文件进行 lint，请将
**/*替换为<path to the folder>/**/*。假设，您的项目具有以下结构：
要仅对 coffee 文件夹中的文件执行 lint，请按如下方式更新模式：
coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,html,vue,coffee}结果，文件 linting.coffee 会被 lint，而 no_linting .coffee 不会。
在保存时自动修复问题
每次您手动使用 Ctrl+S 保存更改，或者当启动运行/调试配置、关闭 WebStorm 或执行版本控制操作时，ESLint 都可以修复检测到的问题。更多信息请参阅 自动保存。
打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选中 保存时运行 eslint --fix 复选框。
代码检查
安装并启用后，每次打开 JavaScript 文件时，ESLint 将自动激活。 您还可以配置 ESLint 以 在保存时自动检测并修复问题。
默认情况下，WebStorm 会根据 ESLint 配置中的严重级别标记检测到的问题。 请参阅 配置 ESLint 高亮显示 ，了解如何覆盖这些设置。
当前文件中检测到的错误及其快速修复可通过编辑器和 文件 选项卡中的 问题 工具窗口中查看。
所有之前打开过的文件中的错误及其快速修复将显示在 项目错误 选项卡中的 问题 工具窗口中。 要打开工具窗口，请点击编辑器右上角的 检查 小部件：
更多信息请参阅 在编辑器中查看问题和应用快速修复 与 问题工具窗口。
在编辑器中查看问题并应用快速修复
要查看问题描述，请将鼠标悬停在高亮代码上。
要解决检测到的问题，请点击 ESLint：修复 '<rule name>' 或按下 Alt+Shift+Enter。
要解决当前文件中检测到的所有问题，请点击 更多操作 （Alt+Enter ），然后从列表中选择 。
更多信息请参阅 在编辑器中查看问题和应用快速修复。
您还可以配置 ESLint，在保存文件时自动修复该文件中的所有问题。 要配置此行为，请在 ESLint 页面的 设置 对话框中勾选 保存时运行 eslint --fix 复选框，如 在 WebStorm 中激活和配置 ESLint 中所述。
在“问题”工具窗口中执行代码检查
配置 ESLint 的高亮显示
默认情况下，WebStorm 会根据 ESLint 配置中的严重性等级标记检测到的错误和警告。 例如，错误将使用红色波浪线突出显示，警告则标记为黄色背景。 如需了解更多信息，请参见 代码检查 和 更改代码检查严重性。
更改 ESLint 配置中某一规则的严重级别
在 配置文件中，找到您要编辑的规则，并将其值设置为
1warn或2error。详细了解请参见 ESLint 官方网站。
忽略配置中的严重级别
您可以覆盖 ESLint 配置中的严重性等级，使 WebStorm 忽略这些设置，并将 linter 报告的所有内容显示为错误、警告或自定义颜色。
忽略配置中的严重级别
在 设置 对话框（Ctrl+Alt+S ）中，选择 。 将打开 检查页面。
在中间窗格中，转到 JavaScript | 代码质量工具 | ESLint。
在右侧窗格中，取消选中 使用配置文件中的规则严重级别 复选框，并选择要使用的严重性等级，以替代默认值。
从 ESLint 导入代码样式
您可以将部分 ESLint 代码风格规则导入到 WebStorm 的 JavaScript 代码风格设置中。 这使 WebStorm 在自动补全、生成、重构代码或添加 import 语句时，为您的项目使用更准确的代码风格选项。 在使用 重新格式化 操作时，WebStorm 将不再破坏从 ESLint 视角看格式正确的代码。
WebStorm 支持所有官方格式的 ESLint 配置，另请参见上方的 支持的 ESLint 配置文件格式：
适用于 ESLint 版本 9 及以上的 eslint.config.js 、 eslint.config.mjs 、 eslint.config.cjs 、 eslint.config.ts 、 eslint.config.mts 或 eslint.config.cts （flat 格式）。
适用于 ESLint 版本 8 及以下的 .eslintrc 文件及带有
eslintConfig属性的 package.json 文件。
详细了解请参见 ESLint 官方网站。
首次打开项目时，WebStorm 会自动从项目的 ESLint 配置中导入代码风格设置。
如果您的 ESLint 配置已更新（手动或从版本控制中），请在编辑器中打开该配置文件，并从上下文菜单中选择 应用 ESLint 代码样式规则。
或者，直接在文件顶部的问题提示中选择 是 回答 “应用 ESLint 的代码样式？”。
已应用规则列表显示在 通知 工具窗口中：
使用 JavaScript Standard Style
您可以将 JavaScript Standard Style 设置为您的应用默认 JavaScript 代码风格，这样在编写或重新格式化代码时将应用其主要规则。 由于 Standard 基于 ESLint，您还可以通过 WebStorm 中的 ESLint 集成使用 Standard。
安装 JavaScript Standard
在嵌入式 终端 （Alt+F12 ）中，键入：
npm install standard --save-dev详细了解请参见 JavaScript Standard Style 官方网站。
通过 ESLint 启用 Standard 检查
如果您打开的项目中 standard 被列在项目的 package.json 文件中，WebStorm 将自动启用 Standard 的代码检查。
在 设置 对话框（Ctrl+Alt+S ）中，前往 。
在打开的 ESLint 页面上，选择 手动 ESLint 配置 并在 ESLint 包 字段中指定
standard包的位置。
将 JavaScript Standard Style 设置为默认样式
在 设置 对话框（Ctrl+Alt+S ）中，前往 。
在 JavaScript 页面中，点击 设置来源 ，然后选择 JavaScript Standard 样式。 该风格将替换您当前的代码风格方案。
使用 Docker 的 ESLint
借助 WebStorm，您可以像在本地一样，在 Docker 容器中对您的代码运行 ESLint。
详细了解请参见 Node.js 与 Docker。
请确保在 设置 | 插件 页面、 已安装 选项卡下启用了所需的 Node.js、 Node.js Remote Interpreter 和 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" } }在编辑器中任意位置右键点击，然后在上下文菜单中选择 运行 '<package manager> install'。
之后，ESLint 的工作方式与在本地处理代码时相同。 在编辑器中或 问题 工具窗口中查看检测到的不一致项描述，并应用建议的快速修复。
