JavaScript代码规范_ESLint与Prettier团队协作配置_技术教程

ESLint与Prettier配合可统一代码风格，提升协作效率。1. ESLint检查代码质量，Prettier处理格式化；2. 安装eslint、prettier及相关插件；3. 配置.eslintrc.js，extends中加入'prettier'并启用prettier/prettier规则；4. 创建.prettierrc定义格式规范；5. 编辑器安装ESLint和Prettier插件，开启保存自动格式化；6. 可选配置lint-staged和Husky在提交前自动检查与修复。配置文件需纳入版本控制，确保团队一致。

在团队协作开发中，保持 JavaScript 代码风格统一是提升可读性、减少冲突和提高维护效率的关键。ESLint 和 Prettier 是目前最主流的代码检查与格式化工具组合。合理配置二者协同工作，能有效避免风格争议，让团队专注业务逻辑。

为什么需要 ESLint + Prettier 配合

ESLint 负责代码质量检查（如未使用变量、潜在错误），也可处理部分代码风格问题；Prettier 则专注于代码格式化（缩进、引号、括号等），强制统一输出样式。两者分工明确：ESLint 管“对不对”，Prettier 管“好不好看”。

若不加以整合，可能出现 ESLint 与 Prettier 规则冲突（例如分号、引号风格）。因此需通过 eslint-config-prettier 禁用所有与格式相关的 ESLint 规则，交由 Prettier 统一处理。

基础依赖安装

项目根目录执行以下命令安装必要依赖：

npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
npm install --save-dev @babel/eslint-parser（如使用 Babel）

若使用 React：

npm install --save-dev eslint-plugin-react

ESLint 配置文件（.eslintrc.js）

创建 .eslintrc.js 并写入：

module.exports = {
  env: {
    browser: true,
    es2025: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier', // 必须放在最后，关闭与 Prettier 冲突的 ESLint 规则
  ],
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error', // 启用 Prettier 格式检查
    'no-unused-vars': 'warn',
    'no-console': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Prettier 配置文件（.prettierrc）

创建 .prettierrc 定义格式规范：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid"
}

支持 JSON、YAML 或 .prettierrc.js 格式。团队应统一选择一种并提交到仓库。

集成到开发环境

确保编辑器自动格式化并提示 ESLint 错误：

VS Code 安装插件：ESLint、Prettier - Code formatter
启用保存自动修复："editor.formatOnSave": true
设置默认格式化工具为 Prettier

这样开发者在保存文件时，Prettier 自动格式化，ESLint 检查语法和规则，即时反馈问题。

配合 Git 提交拦截（可选）

使用 lint-staged 和 Husky 在提交前自动检查与格式化：

npm install --save-dev lint-staged husky
在 package.json 中添加：

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

这样可防止不符合规范的代码被提交，保障仓库代码整洁。

基本上就这些。配置一次，全队受益。关键是把配置文件纳入版本控制，确保所有人使用同一套规则。团队协作不再因空格还是制表符争论。