Eslint结合Prettier时无法规避eslint-config-prettier行长度报错

我之前也碰到过一模一样的问题！核心原因是 eslint-config-prettier 默认不会自动关闭ESLint原生的 max-len 规则——它只负责禁用那些和Prettier格式化逻辑直接冲突的规则，而行长度检查属于ESLint独立的校验规则，得额外处理才行。

下面给你两种靠谱的解决方案，选一种就行：

方案一：用预设配置一键搞定（最省心） #

直接借助 eslint-plugin-prettier 的预设配置，让ESLint完全遵循Prettier的规则来校验，包括你设置的行长度。

1. 先安装依赖：

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

2. 修改你的 .eslintrc.js，把 extends 数组更新成这样：

module.exports = {
  parserOptions: { 
    ecmaVersion: 6 
  },
  env: { 
    es6: true, 
    browser: true 
  },
  extends: [
    // 保留你原来的其他扩展（比如'eslint:recommended'之类的）
    'plugin:prettier/recommended' // 必须放在最后，确保覆盖所有冲突规则
  ]
};

这个预设帮你自动完成了三件事：

• 启用 eslint-config-prettier，禁用所有和Prettier冲突的ESLint规则
• 启用 eslint-plugin-prettier 插件
• 把 prettier/prettier 设为错误级规则，让Prettier的格式化问题以ESLint错误的形式显示

方案二：手动配置（更灵活） #

如果不想用预设，也可以手动关闭ESLint的行长度规则，同时让ESLint校验Prettier的格式：

修改 .eslintrc.js 如下：

module.exports = {
  parserOptions: { ecmaVersion: 6 },
  env: { es6: true, browser: true },
  extends: [
    // 你的其他扩展
    'prettier' // 放在最后禁用冲突规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error', // 让ESLint检查Prettier格式
    'max-len': 'off' // 手动关闭ESLint原生的行长度校验
  }
};

最后别忘了重启编辑器里的ESLint服务（比如VSCode里按 Ctrl+Shift+P，输入 ESLint: Restart ESLint Server），重新检查文件后，行长度的错误就会消失了——现在ESLint会完全遵循你在 prettierrc.config.js 里设置的 printWidth: 2000 来判断行长度。

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