typescript 文件中的 prettier-eslint 運行兩次並且與 eslint 規則有沖突

Question

我對配置更漂亮和 eslint 有疑問。 示例 function：

const foo = () => {
  [1, 2, 3].forEach((element) => {
    console.log(element);
  });
};

當我保存括號從元素中刪除時，我收到一個錯誤：“箭頭 function 參數周圍的預期括號帶有花括號。（eslintarrow-parens）。” 此問題僅出現在 TypeScript 文件中。 在 JavaScript 中，括號不會被刪除。 隱式箭頭換行和操作符換行規則也會出現同樣的問題。 我怎樣才能讓它在 TypeScript 中工作？

vscode設置。json：

  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },

eslintrc.js

const typescriptEslintRecommended = require("@typescript-eslint/eslint-plugin").configs.recommended;
module.exports = {
    parser: "babel-eslint",
    env: {
        browser: true,
        jest: true,
    },
    extends: ["plugin:react/recommended", "airbnb", "eslint:recommended"],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: "module",
    },
    plugins: ["react"],
    rules: {
        "max-len": [
            "error",
            {
                code: 200,
            },
        ],
        "no-restricted-syntax": ["error"],
        "no-lonely-if": 0,
        allowElseIf: 0,
        "prefer-template": 2,
        "default-case": 2,
        "no-mixed-operators": 1,
        "no-confusing-arrow": 0,
        "no-new": 0,
        "no-undef": 2,
        "no-bitwise": 1,
        "import/no-unresolved": [
            1,
            {
                ignore: [".+/components/.+"],
            },
        ],
        "arrow-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "object-curly-spacing": ["error", "always"],
        "keyword-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "space-infix-ops": [
            "error",
            {
                int32Hint: false,
            },
        ],
        "func-call-spacing": ["error", "never"],
        "key-spacing": [
            "error",
            {
                beforeColon: false,
            },
        ],
        "arrow-parens": [
            2,
            "as-needed",
            {
                requireForBlockBody: true,
            },
        ],
        "no-nested-ternary": "warn",
        "no-multiple-empty-lines": [
            "warn",
            {
                max: 1,
            },
        ],
        "require-atomic-updates": "error",
        radix: ["error", "as-needed"],
        "react/prop-types": [1],
        "linebreak-style": 0,
        "jsx-a11y/click-events-have-key-events": [0],
        "jsx-a11y/no-noninteractive-element-interactions": [0],
        "react/require-default-props": [0],
        "no-console": [1],
        "prefer-const": "error",
        "react/forbid-prop-types": [1],
        "react/state-in-constructor": 0,
        "react/jsx-props-no-spreading": 0,
        "react/jsx-filename-extension": [
            2,
            {
                extensions: [".js", ".jsx", ".ts", ".tsx"],
            },
        ],
        "jsx-quotes": 0,
        quotes: 0,
        "import/no-extraneous-dependencies": 0,
        indent: [
            "error",
            4,
            {
                SwitchCase: 1,
            },
        ],
        "react/jsx-indent": ["error", 4],
        "react/jsx-indent-props": ["error", 4],
        "max-params": ["error", 7],
        "object-curly-newline": [
            "error",
            {
                ObjectExpression: "always",
                ObjectPattern: {
                    multiline: true,
                },
                ImportDeclaration: "never",
                ExportDeclaration: {
                    multiline: true,
                    minProperties: 3,
                },
            },
        ],
        "import/prefer-default-export": "off",
        "no-unused-vars": "warn",
        "no-plusplus": [
            2,
            {
                allowForLoopAfterthoughts: true,
            },
        ],
        "no-submodule-imports": 0,
        "import/extensions": 0,
        "max-classes-per-file": ["error", 2],
    },
    settings: {
        "import/resolver": {
            node: {
                paths: ["src"],
                extensions: [".js", ".jsx", ".ts", ".tsx"],
            },
        },
    },
    overrides: [
        {
            files: ["**/*.ts", "**/*.tsx"],
            parser: "@typescript-eslint/parser",
            parserOptions: {
                project: "./tsconfig.json",
            },
            plugins: ["@typescript-eslint"],
            rules: Object.assign(typescriptEslintRecommended.rules, {
                "@typescript-eslint/no-unused-vars": "off",
                "@typescript-eslint/member-delimiter-style": "warn",
                "@typescript-eslint/explicit-function-return-type": "off",
                "react/prop-types": "off",
                "no-use-before-define": "off",
                camelcase: "off",
                "@typescript-eslint/camelcase": "off",
            }),
        },
    ],
};

漂亮的rc.js：

{
  "prettier.eslintIntegration": true
}

Answer 1

好的，我找到了解決方案。 我不得不將 ts 和 tsx 文件的 vsCode 默認格式化程序從 PrettierESLint 更改為 ESLint。

  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },