VSCode中Prettier不按照我的Eslint配置格式化该如何解决？

问题核心 #

问题本质是Prettier默认规则与自定义Eslint规则冲突，且VSCode当前默认格式化工具优先级高于Eslint自动修复逻辑导致的。

解决步骤 #

步骤1：安装依赖包 #

项目根目录执行以下命令，安装规则兼容依赖：

npm install eslint-config-prettier eslint-plugin-prettier -D

• eslint-config-prettier：禁用所有和Prettier冲突的Eslint规则
• eslint-plugin-prettier：将Prettier的规则集成到Eslint中，统一用Eslint做规则校验和修复

步骤2：修改.eslintrc.js配置 #

在现有配置中新增extends字段，修改后完整配置如下：

module.exports = {
  // 新增extends字段，放在配置最前面即可
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  env: {
    node: true,
    es6: true,
    browser: true
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      modules: true,
      experimentalObjectRestSpread: true
    }
  },
  rules: {
    // 原有所有rule规则保持不变即可
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "eqeqeq": "error",
    "no-invalid-this": "error",
    "no-return-assign": "error",
    "no-unused-expressions": ["error", { allowTernary: true }],
    "no-useless-concat": "error",
    "no-useless-return": "error",
    "no-use-before-define": "error",
    "array-bracket-newline": ["error", { multiline: true, minItems: null }],
    "array-bracket-spacing": "error",
    "brace-style": ["error", "1tbs", { allowSingleLine: true }],
    "block-spacing": "error",
    "comma-dangle": "error",
    "comma-spacing": "error",
    "comma-style": "error",
    "computed-property-spacing": "error",
    "func-call-spacing": "error",
    "implicit-arrow-linebreak": ["error", "beside"],
    "keyword-spacing": "error",
    "multiline-ternary": ["error", "never"],
    "no-mixed-operators": "error",
    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
    "no-tabs": "error",
    "no-unneeded-ternary": "error",
    "no-whitespace-before-property": "error",
    "nonblock-statement-body-position": "error",
    "object-property-newline": [
      "error",
      { allowAllPropertiesOnSameLine: true }
    ],
    "quote-props": ["error", "as-needed"],
    "semi": ["error", "never"],
    "semi-spacing": "error",
    "space-before-blocks": "error",
    "space-in-parens": "error",
    "space-infix-ops": "error",
    "space-unary-ops": "error",
    "arrow-spacing": "error",
    "no-confusing-arrow": "error",
    "no-duplicate-imports": "error",
    "no-var": "error",
    "object-shorthand": "error",
    "prefer-const": "error",
    "prefer-template": "error"
  }
}

步骤3：修改VSCode配置 #

按下Ctrl+,打开VSCode设置，右上角点击打开设置（JSON）图标，添加以下配置：

{
  // 开启保存、粘贴时自动格式化
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // 将默认格式化工具设置为ESLint，替代Prettier
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // 开启ESLint校验的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  // 保存时自动执行ESLint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

备选方案（无需改默认格式化工具） #

如果想保留Prettier作为默认格式化工具，可以在项目根目录新建.prettierrc文件，配置和Eslint对齐的规则即可：

{
  "semi": false,
  "trailingComma": "none"
  // 其他和Eslint对齐的规则可以在这里补充
}

步骤4：验证生效 #

重启VSCode，重新打开项目文件，测试粘贴、保存操作，规则即可按照你的Eslint配置执行。如果仍有问题，检查项目根目录是否存在全局.prettierrc、.editorconfig文件，删除多余的规则配置文件即可。

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