如何在基于React的Vuexy项目中修复Prettier配置异常

问题根因 #

• 依赖不全：当前仅安装了prettier与eslint-config-prettier，缺少核心依赖eslint-plugin-prettier，ESLint无法调用Prettier执行格式化、识别格式类问题。
• 规则冲突：在ESLint中手动写了大量代码风格类规则，这类规则和Prettier的格式化逻辑重叠。虽然引入了eslint-config-prettier，但手动配置的规则优先级高于extends引入的配置，会直接和Prettier的格式化逻辑打架，出现格式错乱、保存时反复修改格式的问题。
• 职责混淆：ESLint核心定位是代码质量校验，所有代码格式化相关规则应该完全交给Prettier接管，两者同时管控格式必然出现冲突。

修复步骤 #

• 补装缺失依赖
  在项目根目录执行如下命令：

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

• 修正.eslintrc.js配置
  替换原有配置为以下内容，删除所有格式类ESLint规则，引入Prettier官方推荐配置：

module.exports = {
  env: {
    node: true,
    es6: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      modules: true,
      experimentalObjectRestSpread: true,
    },
  },
  // 该配置会自动启用prettier插件、注册prettier格式规则、关闭所有和prettier冲突的ESLint规则
  extends: ['plugin:prettier/recommended'],
  rules: {
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    // 仅保留代码质量类规则，所有格式相关规则全部移除，交给Prettier统一管理
    // Best Practices
    eqeqeq: 'error',
    'no-invalid-this': 'error',
    'no-return-assign': 'error',
    'no-unused-expressions': ['error', { allowTernary: true }],
    'no-useless-concat': 'error',
    'no-useless-return': 'error',
    // Variable
    'no-use-before-define': 'error',

    // ES6
    'no-duplicate-imports': 'error',
    'no-var': 'error',
    'object-shorthand': 'error',
    'prefer-const': 'error',
    'prefer-template': 'error',
  },
}

• 新增Prettier独立配置文件
  在项目根目录新建.prettierrc.js，统一维护格式化规则，和你之前预期的代码风格对齐：

module.exports = {
  semi: false, // 关闭行尾分号，和之前ESLint配置的规则一致
  singleQuote: true, // 使用单引号
  tabWidth: 2,
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'always',
  endOfLine: 'lf'
}

• 清理缓存生效配置
  执行如下命令清理ESLint旧缓存，重启编辑器即可：

npx eslint --fix . --cache

如果使用VSCode，确认开启了editor.formatOnSave，默认格式化器选择Prettier即可。

验证方式 #

执行npx prettier --write .批量格式化项目文件，或者打开任意文件触发保存格式化，不会再出现格式错乱、规则冲突的问题。

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