在 VSCode 中，为什么 Prettier 会格式化我的代码，然后将其突出显示为错误？

Question

这很令人困惑，因为我有一个项目设置了 .eslintrc.js，它的格式一切正常，但我无法让它在另一个设置非常相似的项目上工作。这是那个文件：

我将 Prettier 设置为格式化程序，并将 VSCode 设置为保存时格式化。但是当它格式化时，它似乎使用了 VSCode 中 Prettier 设置页面中的规则，而不是 eslintrc 文件中的规则。结果是它以一种方式格式化代码，然后抛出一个 linting 错误，因为它的格式化方式不符合规则。我知道这一定很愚蠢，但我不知道如何使它使用 ESLint 设置进行格式化。

这是eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    "prettier",
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["@typescript-eslint", "prettier"],
  settings: {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      typescript: {}
    }
  },
  rules: {
    "prettier/prettier": ["error"],
    "react/jsx-uses-react": 1,
    "max-len": [2, { code: 80, comments: 120, tabWidth: 2 }],
    "@typescript-eslint/interface-name-prefix": 0,
    "@typescript-eslint/no-unused-vars": 0
  }
};

Answer 1

好吧，所以这里的答案是在.prettierrc 中实施正确的 Prettier 规则。

可以专门为工作区设置 VSCode Prettier 设置，这让我感到困惑（我在另一个工作区中将 trailingComma 设置为 none，这让我对为什么该工作区正确格式化内容感到困惑）。

我将这段代码添加到.prettierrc，这使得 Prettier 格式化程序符合 ESLint 规则：

{
  "arrowParens": "avoid",
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

我（错误地？）认为 Prettier 自动从 ESLint 规则派生了它的格式选项。