Node.js ESLint 与代码风格检查

ESLint 检查代码质量和风格，帮助团队保持代码一致性。

安装与初始化

安装

npm install --save-dev eslint

初始化配置

npx eslint --init

# 交互式配置
# ? How would you like to use ESLint? -> To check syntax, find problems, and enforce code style
# ? What type of modules? -> CommonJS
# ? Which framework? -> None of these
# ? Where does your code run? -> Node
# ? How would you like to define a style? -> Use a popular style guide
# ? Which style guide? -> Standard / Airbnb / Google
# ? What format? -> JavaScript

配置文件

.eslintrc.js

module.exports = {
  env: {
    node: true,      // Node.js 全局变量
    es2021: true,    // ES2021 语法
    jest: true,      // Jest 全局变量
  },
  extends: [
    'eslint:recommended',  // 推荐规则
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
    'no-unused-vars': 'error',
    'no-console': 'warn',
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
  },
};

规则级别

常用规则配置

代码质量规则

rules: {
  'no-unused-vars': 'error',           // 未使用变量
  'no-undef': 'error',                // 未定义变量
  'no-console': 'warn',               // 禁用 console
  'no-debugger': 'error',             // 禁用 debugger
  'no-alert': 'error',                // 禁用 alert
  'no-eval': 'error',                 // 禁用 eval
  'no-implied-eval': 'error',         // 禁用隐式 eval
  'no-new-func': 'error',             // 禁用 new Function
  'eqeqeq': ['error', 'always'],      // 使用 ===
  'no-trailing-spaces': 'error',     // 禁止尾随空格
}

风格规则

rules: {
  'indent': ['error', 2],                    // 缩进 2 空格
  'quotes': ['error', 'single'],             // 单引号
  'semi': ['error', 'always'],               // 分号
  'comma-dangle': ['error', 'always-multiline'], // 尾随逗号
  'no-multiple-empty-lines': ['error', { max: 1 }], // 空行限制
  'eol-last': ['error', 'always'],           // 文件末尾换行
}

使用方式

命令行

# 检查文件
npx eslint src/index.js

# 检查目录
npx eslint src/

# 自动修复
npx eslint src/ --fix

# 输出格式
npx eslint src/ -f stylish    # 默认格式
npx eslint src/ -f json       # JSON 格式
npx eslint src/ -f html       # HTML 格式

package.json 脚本

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix"
  }
}

.eslintignore

node_modules/
dist/
*.min.js
coverage/

集成 Prettier

安装

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

配置

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier',  // 放在最后，覆盖冲突规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

预设配置

Airbnb 风格

npm install --save-dev eslint-config-airbnb-base

// .eslintrc.js
module.exports = {
  extends: 'airbnb-base',
};

Standard 风格

npm install --save-dev eslint-config-standard

// .eslintrc.js
module.exports = {
  extends: 'standard',
};

注释控制

禁用规则

/* eslint-disable no-console */
console.log('允许使用 console');
/* eslint-enable no-console */

// 单行禁用
// eslint-disable-next-line no-unused-vars
const unused = 'test';

// 禁用整个文件
/* eslint-disable */

注意事项

• 配合 git hook 在提交前自动检查（husky + lint-staged）
• 规则循序渐进，避免一次性开启过多规则
• Prettier 负责格式化，ESLint 负责代码质量
• 团队统一配置，避免风格冲突

要点总结

• npx eslint --init 初始化配置
• rules 自定义规则，级别为 off/warn/error
• --fix 自动修复可修复的问题
• extends: 'prettier' 避免与 Prettier 冲突
• 配合 husky 实现提交前检查