ESLint + Prettier 配置指南，别再为格式吵架了

团队里两个人因为缩进 2 格还是 4 格吵了一下午。后来配了 ESLint + Prettier，提交代码自动格式化，再也没为这种事吵过。

ESLint 和 Prettier 的区别

• ESLint：检查代码质量（未使用变量、缺少 key、隐式类型转换等）
• Prettier：统一代码格式（缩进、引号、分号、换行等）

两者有重叠（比如引号、分号），需要配置好让它们不冲突。

安装

# ESLint
npm install -D eslint @eslint/js typescript-eslint

# Prettier
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint 配置（Flat Config，ESLint 9+）

// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettierConfig from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig,  // 关掉跟 Prettier 冲突的 ESLint 规则

  {
    rules: {
      // 常用规则
      'no-console': 'warn',
      'no-debugger': 'warn',
      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      'prefer-const': 'error',
      'no-var': 'error',
      'eqeqeq': ['error', 'always'],       // 必须用 === 
      'no-implicit-coercion': 'error',     // 禁止隐式转换
      'no-duplicate-imports': 'error',

      // TypeScript 相关
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    }
  },

  {
    ignores: ['dist/', 'node_modules/', 'public/']
  }
]

Prettier 配置

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

// .prettierignore
dist
node_modules
public
*.min.js

两者配合的关键

eslint-config-prettier 的作用是关掉所有跟 Prettier 冲突的 ESLint 规则。这样 ESLint 只管代码质量，Prettier 只管格式，各司其职。

// eslint.config.js 里加这一行就行
import prettierConfig from 'eslint-config-prettier'

export default [
  // ...其他配置
  prettierConfig,  // 必须放在最后，覆盖前面的冲突规则
]

编辑器自动格式化

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

保存的时候：先 ESLint 自动修复代码问题 → 再 Prettier 格式化。

提交前自动检查

npm install -D lint-staged husky

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,json,md}": [
      "prettier --write"
    ]
  }
}

# 初始化 husky
npx husky init
echo "npx lint-staged" > .husky/pre-commit

每次 git commit 之前，自动对暂存的文件跑 ESLint 修复和 Prettier 格式化。格式不对的代码根本提交不上去。

常用 ESLint 规则推荐

规则	作用
no-console: warn	console.log 提醒（生产环境不该有）
no-unused-vars: error	未使用变量报错
prefer-const: error	没被重新赋值的 let 改成 const
eqeqeq: error	禁止 == 和 !=
no-implicit-coercion: error	禁止 !!x 这种隐式转换
no-duplicate-imports: error	同一模块不能 import 两次
no-return-await: error	不必要的 return await
require-await: error	async 函数里必须有 await

总结

ESLint 管质量，Prettier 管格式，eslint-config-prettier 消除冲突。配合 lint-staged + husky 在提交前自动修复。配一次之后，团队再也不会为格式吵架了。