打字稿文件中的 prettier-eslint 运行两次并且与 eslint 规则有冲突

如何解决打字稿文件中的 prettier-eslint 运行两次并且与 eslint 规则有冲突

我在配置 prettier 和 eslint 方面有问题。示例函数：

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

当我从元素中删除括号时，我收到一个错误： “箭头函数参数周围的预期括号具有带花括号的主体。（eslintarrow-parens）。” 此问题仅出现在 TypeScript 文件中。 JavaScript 中的括号不会被删除。 隐式箭头换行和运算符换行规则也会出现同样的问题。如何让它在 TypeScript 中工作？

vscode settings.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","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","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",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",}),};

prettierrc.js：

{
  "prettier.eslintIntegration": true
}

解决方法

好吧，我找到了解决方案。我不得不将 ts 和 tsx 文件的 vsCode 默认格式化程序从 PrettierESLint 更改为 ESLint 。

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