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

问题描述

这令人困惑，因为我有一个项目设置了 .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
  }
};

解决方法

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

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

我将此代码添加到.prettierrc中，这使得 Prettier 格式化程序与 ESLint 规则保持一致：

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

我（错误地？）认为 Prettier 会自动从 ESLint 规则中导出其格式选项。