前端项目同时配置ESlint和Prettier

在前端项目中同时使用 ESlint（代码检查） 和 Prettier（代码格式化） 可以确保代码既符合规范又风格统一。以下是详细配置步骤：

---

1. 安装依赖

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

• eslint：JavaScript/TypeScript 代码检查工具。
• prettier：代码格式化工具。
• eslint-config-prettier：关闭 ESLint 中与 Prettier 冲突的规则。
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行。

---

2. 配置 ESLint

.eslintrc.js（示例）

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended", // ESLint 推荐规则
    "plugin:react/recommended", // React 推荐规则（可选）
    "plugin:@typescript-eslint/recommended", // TS 推荐规则（可选）
    "plugin:prettier/recommended", // 必须放在最后，避免冲突
  ],
  parser: "@typescript-eslint/parser", // 解析 TS（可选）
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": "error", // 让 Prettier 的错误以 ESLint 错误显示
    "no-console": "warn", // 自定义规则示例
    "react/prop-types": "off", // 关闭 React prop-types 检查（可选）
  },
};

关键点：

• "plugin:prettier/recommended" 必须放在 extends 的最后，确保覆盖冲突的 ESLint 规则。
• "prettier/prettier": "error" 让 Prettier 的格式化问题以 ESLint 错误显示。

---

3. 配置 Prettier

.prettierrc（示例）

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

说明：

• 这些规则可根据团队风格调整，如 singleQuote: true（使用单引号）。
• 文件支持 .prettierrc / .prettierrc.json / prettier.config.js 等格式。

---

4. 配置 VS Code 自动格式化

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

作用：

• 保存时自动运行 Prettier 格式化 + ESLint 修复。
• 确保 ESLint 和 Prettier 插件已安装。

---

5. 添加 Git 提交检查（可选）

使用 husky + lint-staged 在提交前自动检查和修复代码：

npm install --save-dev husky lint-staged
npx husky init

package.json 配置

{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

效果 ：提交代码前自动执行 eslint --fix 和 prettier --write。

---

6. 运行检查

• 手动检查 ESLint：

  npx eslint src --fix

• 手动运行 Prettier：

  npx prettier --write src/**/*.{js,jsx,ts,tsx}

---

常见问题

Q1: ESLint 和 Prettier 冲突了怎么办？

• 确保 eslint-config-prettier 已正确配置（extends 中放在最后）。
• 检查 .eslintrc 是否包含与 Prettier 冲突的规则（如 quotes、semi）。

Q2: 保存时没有自动格式化？

• 检查 VS Code 是否安装了 ESLint 和 Prettier 插件。
• 确保 .vscode/settings.json 配置正确。

---

总结

工具	作用	配置文件
ESLint	代码质量检查（语法、逻辑错误）	.eslintrc.js
Prettier	代码风格格式化（缩进、引号等）	.prettierrc

通过以上配置，ESLint 和 Prettier 可以完美协作，既保证代码质量，又统一代码风格。 🚀