ESLint与Prettier配置详解

1. 分工界定

1.1 ESLint的职责

• 代码质量问题：
  • 发现并修复潜在的运行时错误
  • 检查未使用的变量和函数
  • 确保函数调用前已定义
  • 防止无限循环等逻辑错误
  • 检查最佳实践和设计模式

// ESLint关注的问题示例
// 1. 未使用的变量
const unused = 'test';  // ESLint会警告

// 2. 潜在错误
const obj = null;
console.log(obj.name);  // ESLint会警告可能的空指针

// 3. 最佳实践
if (condition = true) { }  // ESLint会警告赋值操作

1.2 Prettier的职责

• 代码风格问题：
  • 统一代码格式
  • 处理行长度
  • 处理引号样式
  • 处理缩进
  • 处理空格和换行

// Prettier关注的格式问题
// 1. 长行格式化
const longString = "这是一个非常长的字符串，Prettier会自动帮我们换行并保持适当的缩进";

// 2. 对象格式化
const user = {
  name: "John",
  age: 30,
  address: "Street"
};

// 3. 函数调用格式化
someFunction(
  longArgument1,
  longArgument2,
  longArgument3
);

2. 规则冲突解决方案

2.1 标准配置方案

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'  // 关键配置
  ],
  rules: {
    // 这里的规则会覆盖extends中的规则
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2
}

2.2 冲突处理原则

1. 优先级处理：

   • Prettier的格式化规则优先
   • ESLint负责代码质量检查
   • 使用eslint-config-prettier禁用冲突规则

2. 配置文件分离：

   • .eslintrc专注于代码质量规则
   • .prettierrc专注于代码格式规则
   • 避免规则重叠

3. 团队协作处理

3.1 强制性配置

// package.json
{
  "scripts": {
    "lint": "eslint --fix .",
    "format": "prettier --write .",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

3.2 处理个人偏好问题

针对"单引号vs双引号"等争议

1. 制定明确的团队规范：

   • 在项目初期确定规范
   • 编写详细的规范文档
   • 说明规范的原因和好处

2. 自动化工具强制执行：

   • 使用husky设置git hooks
   • 使用lint-staged在提交前自动格式化
   • CI/CD流程中加入检查

3. 配置IDE插件：

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

4. 处理异议的方法：
   • 解释统一规范的必要性
   • 提供具体的业务场景说明
   • 展示规范带来的团队效益
   • 允许在特定文件中使用特例规则

4. 最佳实践建议

4.1 渐进式适配

// .eslintrc.js
module.exports = {
  rules: {
    // 可以先设置为warning，逐步迁移到error
    'quotes': ['warn', 'double'],
    'semi': ['warn', 'always']
  }
}

4.2 规则定制化

// 针对不同类型文件使用不同规则
module.exports = {
  overrides: [
    {
      files: ['*.test.js'],
      rules: {
        // 测试文件的特殊规则
        'max-lines': 'off'
      }
    }
  ]
}

4.3 文档化

# 项目代码规范

## 为什么选择这些规则？
- 双引号：与HTML保持一致，避免转义
- 分号：避免ASI带来的问题
- 缩进：提高代码可读性

## 如何执行？
1. 安装依赖
2. 配置编辑器
3. 执行lint命令

## 常见问题解决
...

5. 实际项目经验

1. 渐进式推进：

   • 先在新项目中应用
   • 旧项目逐模块迁移
   • 设置合理的过渡期

2. 团队培训：

   • 举办规范说明会
   • 提供配置文档
   • 建立问题反馈机制

3. 持续优化：

   • 定期收集团队反馈
   • 及时调整不合理规则
   • 更新规范文档

---