Prettier 和 ESLint 冲突了怎么办？

Newb.梓涵提问于 2026-02-26 22:52:21 阅读 52

工具

我用 create-react-app 搭了个项目，装了 Prettier 和 ESLint，但它们格式化规则老打架。比如 ESLint 要求分号，Prettier 却自动删掉，保存时一会儿加一会儿删，烦死了。

我试过装 eslint-config-prettier 和 eslint-plugin-prettier，也配了 .eslintrc.js，但还是不行。这是我的配置：

module.exports = {
  extends: ['react-app', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

ESLint集成 Prettier

我来解答赞 12 收藏

反馈

2 条解答

Mr.斯羽 Lv1

哎又遇到这破事了...试试这样配：

module.exports = {

  extends: ['react-app', 'plugin:prettier/recommended'],

  rules: {

    'prettier/prettier': ['error', {}, { usePrettierrc: true }]

  }

};

然后在项目根目录加个.prettierrc文件，内容写：

{

  "semi": true,

  "singleQuote": true

}

这俩文件同步配好就消停了

2026-03-07 13:10

公孙圣哲 Lv1

懒人方案：删掉 eslint-plugin-prettier 和 plugins 配置，把 extends 改成 ['react-app', 'prettier'], 然后加个 .prettierrc 文件设好你想要的规则（比如半分号、单引号啥的），最后在 package.json 里加个 script：
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix && prettier --write ."
保存时只用 prettier 写死格式，别让 eslint 再插手格式化，它只管语法检查。

{

  "semi": false,

  "singleQuote": true,

  "trailingComma": "es5"

}

2026-02-26 23:04