解决ESLint与Prettier来回运行时的格式化冲突问题

问题背景 #

package.json中配置了两条命令：

"scripts": {
  "format": "prettier --write \"{src,{tests,mocks}}/**/*.{js,ts,vue}\"",
  "lint": "eslint . -c .eslintrc.js --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx --fix --ignore-path .gitignore"
}

执行时出现循环冲突：

• 执行npm run format：正常完成
• 执行npm run lint：部分文件被ESLint修改格式（空格调整、多行合并单行等）
• 再次执行npm run format：Prettier将格式还原
• 再次执行npm run lint：ESLint再次修改格式

已在.eslintrc.js中引入prettier扩展和插件，但冲突仍存在。需求是让npm run lint仅检查代码逻辑错误，完全遵循Prettier的格式化规则，不再修改格式化内容。

.prettierrc配置如下：

{
    "semi": true,
    "trailingComma": "none",
    "singleQuote": true,
    "printWidth": 80,
    "arrowParens": "avoid"
}

解决方法 #

1. 安装依赖 #

确保已安装eslint-config-prettier（禁用ESLint中与Prettier冲突的规则）和eslint-plugin-prettier（将Prettier规则转为ESLint规则）：

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

2. 修正ESLint配置 #

修改.eslintrc.js，关键调整如下：

• 在extends数组中，将'plugin:prettier/recommended'放在最后一位，确保它覆盖所有前置扩展的冲突规则
• 移除rules中手动设置的格式化类规则（比如indent、semi、quotes等）
• 确保plugins中包含prettier

示例配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    // 你的其他基础扩展（如vue、typescript相关）
    'plugin:vue/vue3-essential',
    '@typescript-eslint/recommended',
    // 必须放在最后
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  plugins: [
    '@typescript-eslint',
    'prettier'
  ],
  rules: {
    // 只保留逻辑检查类规则，不要格式化规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
    // 设置Prettier规则的报错级别，可选error或warn
    'prettier/prettier': 'error'
  }
};

3. 调整lint命令（可选） #

如果不需要ESLint自动修复任何内容，可去掉--fix参数：

"lint": "eslint . -c .eslintrc.js --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx --ignore-path .gitignore"

若仍需ESLint修复逻辑错误，只要配置正确，--fix只会处理逻辑类问题，不会修改Prettier的格式化结果。

4. 验证效果 #

执行npm run format后再运行npm run lint，若没有出现格式回退，说明冲突已解决。

内容的提问来源于stack exchange，提问作者Neha Soni