在 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 规则中派生出它的格式化选项。

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

In VSCode, why is Prettier formatting my code and then highlighting it as an error?

eslint

visual-studio-code

prettier