Experience

ESLint与Prettier规则冲突解决方案 ​

1. 冲突的本质 ​

1.1 为什么会产生冲突？ ​

  • ESLint和Prettier在代码格式化方面存在重叠规则
  • 两者的规则可能有不同的实现方式
  • 某些ESLint规则可能与Prettier的格式化结果冲突
javascript
// 示例：冲突的规则
// ESLint配置
{
  "quotes": ["error", "single"]
}

// Prettier配置
{
  "singleQuote": false  // 使用双引号
}

// 这种情况下，代码会在ESLint和Prettier之间来回格式化

2. 解决方案 ​

2.1 使用eslint-config-prettier ​

bash
# 1. 安装依赖
npm install --save-dev eslint-config-prettier

# 2. 配置.eslintrc
{
  "extends": [
    "eslint:recommended",
    "prettier"  // 必须放在最后，用于覆盖之前的规则
  ]
}

2.2 使用eslint-plugin-prettier ​

bash
# 1. 安装依赖
npm install --save-dev eslint-plugin-prettier

# 2. 配置.eslintrc
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"  // 将Prettier规则作为ESLint规则运行
  }
}

2.3 使用推荐的组合配置 ​

javascript
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'  // 这一行配置包含了上述所有设置
  ]
}

// 这个配置会：
// 1. 启用eslint-plugin-prettier
// 2. 设置prettier/prettier规则为"error"
// 3. 继承eslint-config-prettier的规则

3. 实际操作流程 ​

3.1 完整的配置步骤 ​

bash
# 1. 安装所需依赖
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

# 2. 创建配置文件
touch .eslintrc.js .prettierrc
javascript
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    // 这里的规则会覆盖extends中的规则
    // 建议只放必要的规则，避免与Prettier冲突
  }
}

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

3.2 验证配置是否生效 ​

javascript
// 1. 添加npm scripts
{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write ."
  }
}

// 2. 运行检查
npm run lint
npm run format

4. 常见问题处理 ​

4.1 规则优先级 ​

  1. Prettier规则优先：

    • 使用plugin:prettier/recommended确保Prettier规则优先
    • 避免在ESLint中配置与格式化相关的规则

  2. ESLint规则优先：

    • 如果某些场景必须使用ESLint规则
    • 可以在.prettierrc中设置相应选项为false

4.2 特殊文件处理 ​

javascript
// .eslintrc.js
module.exports = {
  overrides: [
    {
      files: ['*.test.js'],
      rules: {
        'prettier/prettier': ['error', {
          // 测试文件使用不同的格式化规则
          printWidth: 100
        }]
      }
    }
  ]
}

5. 最佳实践建议 ​

  1. 配置文件管理：

    • 将配置文件添加到版本控制
    • 在团队中统一使用相同的配置
    • 避免本地覆盖全局配置

  2. 编辑器集成：

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