eslint 命令

1. 什么是 ESLint？

ESLint 是一个可配置的 JavaScript 代码检查工具，用于识别和报告 JavaScript 代码中的模式问题。它允许您定义自己的代码风格规则集，帮助团队保持一致的代码质量和风格。

2. 安装

2.1 全局安装

bash 
npm install -g eslint

2.2 局部安装（推荐）

bash 
npm install eslint --save-dev

安装完成后，初始化 ESLint 配置：

bash 
npx eslint --init

这将引导您完成配置过程，包括选择代码风格、环境、框架等。

3. 基本用法

3.1 检查单个文件

bash 
eslint file.js

3.2 检查多个文件

bash 
eslint file1.js file2.js

3.3 检查目录

bash 
eslint src/

3.4 检查目录及其子目录

bash 
eslint src/**

4. 常用命令选项

4.1 修复问题

bash 
eslint --fix file.js

自动修复可修复的问题（如缩进、分号等）。

4.2 指定配置文件

bash 
eslint -c .eslintrc.json file.js

使用特定的配置文件而不是默认的配置文件。

4.3 使用不同的报告格式

bash 
eslint -f json file.js > results.json

支持的格式：

  • stylish (默认)
  • json
  • junit
  • checkstyle
  • html

4.4 忽略文件

bash 
eslint --ignore-path .eslintignore file.js

使用指定的忽略文件，默认会查找项目根目录的 .eslintignore 文件。

4.5 启用/禁用规则

bash 
eslint --rule 'semi: 2' file.js

在命令行上临时启用或禁用特定规则。

4.6 安静模式

bash 
eslint --quiet file.js

只报告错误，忽略警告。

4.7 缓存检查结果

bash 
eslint --cache file.js

缓存检查结果，只检查修改过的文件，提高检查速度。

5. 配置文件

ESLint 支持多种格式的配置文件：

  • .eslintrc.js (JavaScript)
  • .eslintrc.yaml / .eslintrc.yml (YAML)
  • .eslintrc.json (JSON)
  • .eslintrc (JSON 或 YAML)
  • package.json (在 eslintConfig 字段中)

5.1 基本配置示例

json 
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

5.2 常用配置选项

  • env: 指定代码运行的环境（如浏览器、Node.js、ES6+ 等）
  • extends: 继承已有的配置（如 eslint:recommended、airbnb、standard 等）
  • parser: 指定解析器（如 @typescript-eslint/parser 用于 TypeScript）
  • parserOptions: 配置解析器选项
  • plugins: 加载额外的插件
  • rules: 定义或覆盖规则
  • globals: 声明全局变量

6. 忽略文件

创建 .eslintignore 文件来指定 ESLint 应该忽略的文件和目录：

text 
# 忽略所有 node_modules 目录
node_modules/

# 忽略所有构建输出目录
dist/
build/

# 忽略特定文件
.env
*.min.js

7. 与其他工具集成

7.1 VS Code

安装 ESLint 扩展，在编辑器中实时显示和修复问题。

7.2 Webpack

使用 eslint-webpack-plugin 在构建过程中运行 ESLint：

bash 
npm install eslint-webpack-plugin --save-dev

在 webpack 配置中添加：

javascript 
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new ESLintPlugin({
      fix: true
    })
  ]
};

7.3 Git Hooks

使用 husky 和 lint-staged 在提交前运行 ESLint：

bash 
npm install husky lint-staged --save-dev

在 package.json 中配置：

json 
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

8. 常见问题

8.1 ESLint 找不到模块

确保已安装所有必要的依赖项，特别是自定义规则或插件。

8.2 规则冲突

当继承多个配置时，可能会发生规则冲突。使用 rules 字段手动解决冲突。

8.3 性能问题

对于大型项目，使用 --cache 选项可以显著提高检查速度。

9. 总结

ESLint 是一个强大的 JavaScript 代码检查工具，可以帮助您和您的团队保持一致的代码质量和风格。通过合理配置和使用，可以大大提高开发效率和代码可维护性。

要了解更多信息，请访问 ESLint 官方文档。

最后更新：2026-02-05