知识库

Appearance

Return to top
On this page

ESLint 快速入门

ESLint 是一个静态代码分析工具，用于识别 JavaScript 和 JSX 代码中的问题。本章将指导您快速上手 ESLint。

安装 ESLint

全局安装

bash
# 使用 npm 全局安装
npm install -g eslint

# 使用 yarn 全局安装
yarn global add eslint

项目本地安装（推荐）

bash
# 使用 npm
npm install --save-dev eslint

# 使用 yarn
yarn add --dev eslint

初始化配置

交互式初始化

bash
# 在项目根目录运行
npx eslint --init

这个命令会引导您回答一系列问题来生成配置文件：

  1. 选择如何使用 ESLint（检查语法、发现问题、代码格式化）
  2. 选择模块系统（ES6 modules、CommonJS 等）
  3. 选择代码运行环境（浏览器、Node.js 等）
  4. 选择代码规范（JavaScript Standard、Airbnb、Google 等）
  5. 选择代码格式（JavaScript、TypeScript）

手动创建配置文件

您也可以手动创建配置文件，如 .eslintrc.js：

javascript
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    // 规则配置
  }
};

基本使用

检查单个文件

bash
# 检查单个文件
npx eslint myfile.js

# 检查多个文件
npx eslint file1.js file2.js

# 检查整个目录
npx eslint src/

自动修复

bash
# 自动修复可修复的问题
npx eslint myfile.js --fix
npx eslint src/ --fix

输出格式

bash
# 使用不同的输出格式
npx eslint src/ --format unix
npx eslint src/ --format json
npx eslint src/ --format html --output-file results.html

基本配置示例

.eslintrc.js 配置文件

javascript
module.exports = {
  // 环境定义
  env: {
    browser: true,        // 启用浏览器全局变量
    es2021: true,         // 启用 ES2021 功能
    node: true,           // 启用 Node.js 全局变量
    jest: true            // 启用 Jest 全局变量
  },
  
  // 继承的配置
  extends: [
    'eslint:recommended'  // 使用 ESLint 推荐的规则
  ],
  
  // 解析器选项
  parserOptions: {
    ecmaVersion: 12,      // 使用 ES2021 语法
    sourceType: 'module', // 支持 ES6 模块
    ecmaFeatures: {
      jsx: true           // 支持 JSX
    }
  },
  
  // 具体规则
  rules: {
    'no-console': 'warn',     // 禁止使用 console，警告级别
    'no-unused-vars': 'error', // 禁止未使用的变量，错误级别
    'semi': ['error', 'always'] // 要求使用分号
  },
  
  // 全局变量
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  }
};

package.json 集成

在 package.json 中添加脚本：

json
{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "lint:report": "eslint src/ --format html --output-file reports/lint-results.html"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

使用方法：

bash
# 运行 lint 脚本
npm run lint

# 自动修复
npm run lint:fix

常用规则示例

javascript
module.exports = {
  rules: {
    // 错误类规则
    'no-console': 'warn',           // 禁止 console，警告
    'no-debugger': 'error',         // 禁止 debugger，错误
    'no-undef': 'error',            // 禁止未定义变量
    
    // 风格类规则
    'indent': ['error', 2],         // 2个空格缩进
    'quotes': ['error', 'single'],  // 使用单引号
    'semi': ['error', 'always'],    // 要求分号
    'comma-dangle': ['error', 'never'], // 禁止尾随逗号
    
    // 最佳实践类规则
    'eqeqeq': 'error',              // 要求使用 === 和 !==
    'no-var': 'error',              // 禁止使用 var
    'prefer-const': 'error'         // 优先使用 const
  }
};

忽略文件

创建 .eslintignore 文件来忽略不需要检查的文件：

node_modules/
dist/
build/
*.min.js
coverage/
.next/
.nuxt/

小结

通过本章的学习，您已经掌握了 ESLint 的基本安装、配置和使用方法。ESLint 是一个非常灵活的工具，可以根据项目需求进行详细配置。下一章我们将深入探讨 ESLint 的基础概念。