元素
元素
工具
博客
问答

ESLint和Prettier配置冲突怎么解决？代码格式检查老报错

Zz子斌 阅读 51
前端

最近团队要求统一代码规范，我把ESLint和Prettier都配上了，但每次保存代码都会报错，比如”Unexpected spaces”和”Missing semicolon”。

尝试过安装eslint-config-prettier，并在.eslintrc里加了”plugins”:[“prettier”]，但问题没解决。现在保存时Prettier会自动修正缩进，但ESLint又报”Line exceeds maximum length”。

这是我的配置片段：


module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  rules: {
    'max-len': ['error', { code: 80 }],
    'prettier/prettier': ['error', { printWidth: 120 }]
  }
};

同事说可能是两个工具的格式规则打架，但具体该怎么调整才能让它们和谐共存呢？

代码规范代码质量
我来解答 赞 14 收藏
二维码
手机扫码查看
反馈
2 条解答
上官瑞红
上官瑞红 Lv1
这个问题我之前也碰到过，确实挺烦人的。你现在的配置其实已经接近正确答案了，但还差一点点调整。

问题的根源在于ESLint和Prettier的规则有重叠，比如你提到的行宽限制，ESLint的max-len和Prettier的printWidth其实是同一个东西，它们打架了。解决的关键是让Prettier负责格式化，ESLint负责代码质量检查。

建议这样改你的配置：

先把eslint-config-prettier放到extends数组的最后面，它的作用是关闭所有可能和Prettier冲突的ESLint规则。然后把max-len规则删掉，因为这个应该交给Prettier来管。

修改后的配置大概长这样：

module.exports = {

  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],

  rules: {

    'prettier/prettier': ['error', { printWidth: 120 }]

  }

};


另外记得检查下编辑器的设置，确保保存时只让Prettier格式化代码。如果你用的是VSCode，settings.json里可以这样配：

{

  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  }

}


最后再运行下 npm install eslint-config-prettier --save-dev 确保安装了最新版本。这样改完后，Prettier专注搞格式，ESLint专注查代码问题，它们就能愉快地一起工作了。

对了，记得让你同事也同步更新下配置，不然大家的开发环境不一致还是会很痛苦。
点赞 2
2026-02-19 23:12
一静静
一静静 Lv1
你这个问题是典型的ESLint和Prettier规则打架，主要是因为两者的配置没对齐。复制下面的配置，能解决你的问题。

先把依赖装全了，确保你安装了这些包：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier


然后用这个配置覆盖你的.eslintrc文件：
module.exports = {

  extends: [

    'eslint:recommended',

    'plugin:prettier/recommended'

  ],

  plugins: ['prettier'],

  rules: {

    'prettier/prettier': ['error', { printWidth: 80, semi: true, singleQuote: true }],

    'max-len': 'off'

  }

};


这里的关键点是把 max-len 规则关掉，因为Prettier的 printWidth 已经管了行宽的事儿，再开 max-len 就重复了。另外统一把 printWidth 改成80，跟团队约定的代码规范保持一致。

最后检查下你的编辑器设置，确保保存时只让Prettier格式化代码，别让ESLint再插一脚。比如VSCode的话，在settings.json里加这个：
{

  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": false

  }

}


这样配完应该就没冲突了。如果还有问题，大概率是你其他插件或者全局配置在捣乱，可以挨个排查下。
点赞 1
2026-02-17 01:00
相关推荐
元素
元素
工具
博客
问答
登录/注册