将 ESLint 代码格式化规则迁移到 @stylistic/eslint-plugin 时出现问题

Question

我在我的节点/react/typescript 项目上使用 ESLint Stylistic 插件 和 ESLint 时遇到问题。

ESLint 具有已弃用的代码格式化规则，并建议使用ESLint Stylistic 插件代替代码格式化。我已使用

将其作为开发依赖项安装在我的节点项目上

npm i -D @stylistic/eslint-plugin

实际上我的设置使用rush，所以我使用了rush add命令，但无论如何它等同于上面的命令。

我已根据此处的说明修改了我的 .eslintrc.json 配置文件：https://eslint.style/packages/default

这就是我修改后的配置文件的样子：

{
  "ignorePatterns": [
    "**/dist/*"
  ],
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "@stylistic/eslint-plugin"
  ],
  "extends": [
    "eslint:recommended",
    "standard-with-typescript",
    "plugin:@stylistic/recommended-extends"
  ],
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  },
  "env": {
    "jest": true
  },
  "overrides": [
    {
      "files": [
        "test/**/*.ts",
        "test/**/*.tsx"
      ],
      "rules": {
        "@typescript-eslint/prefer-ts-expect-error": "off",
        "@typescript-eslint/consistent-type-assertions": "off"
      }
    },
    {
      "files": [
        "**/*.ts",
        "**/*.tsx"
      ],
      "rules": {
        "@typescript-eslint/restrict-template-expressions": "off",
        "@typescript-eslint/strict-boolean-expressions": "off",
        "@typescript-eslint/prefer-optional-chain": "error",
        "require-await": "error",
        "@stylistic/eslint-plugin/semi": [2, "never"],
        "@stylistic/eslint-plugin/comma-dangle": ["error", "never"],
        "@stylistic/eslint-plugin/no-trailing-spaces": "error",
        "@stylistic/eslint-plugin/brace-style": ["error", "1tbs", { "allowSingleLine": true }],
        "@stylistic/eslint-plugin/block-spacing": "error",
        "@stylistic/eslint-plugin/eol-last": ["error", "always"],
        "@stylistic/eslint-plugin/func-call-spacing": ["error", "never"],
        "@stylistic/eslint-plugin/key-spacing": ["error", { "beforeColon": false }],
        "@stylistic/eslint-plugin/keyword-spacing": ["error", { "before": true }],
        "@stylistic/eslint-plugin/linebreak-style": ["error", "unix"],
        "@stylistic/eslint-plugin/no-multiple-empty-lines": ["error", { "max": 2 }],
        "@stylistic/eslint-plugin/object-curly-spacing": ["error", "always"],
        "@stylistic/eslint-plugin/object-curly-newline": ["error", { "consistent": true }],
        "@stylistic/eslint-plugin/quotes": ["error", "single", { "avoidEscape": true }],
        "@stylistic/eslint-plugin/indent": ["error", 2, {
          "ignoredNodes": ["TemplateLiteral"],
          "SwitchCase": 1
        }],
        "import/order": [
          "error",
          {
            "groups": ["builtin", "external", "internal"],
            "pathGroups": [
              {
                "pattern": "react",
                "group": "external",
                "position": "before"
              }
            ],
            "pathGroupsExcludedImportTypes": ["react"],
            "alphabetize": {
              "order": "asc",
              "caseInsensitive": true
            }
          }
        ]
      }
    }
  ]
}

但是当我跑步时

npm run lint

我收到以下错误消息：

TypeError: Error while loading rule '@stylistic/comma-spacing': Cannot read properties of undefined (reading 'tokensAndComments')
Occurred while linting /Users/***/workspace/***/src/App.tsx
..
..

我做错了什么？正如你所看到的，配置文件甚至没有明确引用@stylistic/comma-spacing规则。

这是修改和安装插件之前配置文件的样子，并且运行良好：

{
  "ignorePatterns": [
    "**/dist/*"
  ],
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "standard-with-typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  },
  "env": {
    "jest": true
  },
  "overrides": [
    {
      "files": [
        "test/**/*.ts",
        "test/**/*.tsx"
      ],
      "rules": {
        "@typescript-eslint/prefer-ts-expect-error": "off",
        "@typescript-eslint/consistent-type-assertions": "off"
      }
    },
    {
      "files": [
        "**/*.ts",
        "**/*.tsx"
      ],
      "rules": {
        
        "@typescript-eslint/restrict-template-expressions": "off",
        "@typescript-eslint/strict-boolean-expressions": "off",
        "@typescript-eslint/prefer-optional-chain": "error",
        "require-await": "error",
        "semi": [2, "never"],
        "comma-dangle": ["error", "never"],
        "no-trailing-spaces": "error",
        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
        "block-spacing": "error",
        "eol-last": ["error", "always"],
        "func-call-spacing": ["error", "never"],
        "key-spacing": ["error", { "beforeColon": false }],
        "keyword-spacing": ["error", { "before": true }],
        "linebreak-style": ["error", "unix"],
        "no-multiple-empty-lines": ["error", { "max": 2 }],
        "object-curly-spacing": ["error", "always"],
        "object-curly-newline": ["error", { "consistent": true }],
        "quotes": ["error", "single", { "avoidEscape": true }],
        "indent": ["error", 2, {
          "ignoredNodes": ["TemplateLiteral"],
          "SwitchCase": 1
        }],
        "import/order": [
          "error",
          {
            "groups": ["builtin", "external", "internal"],
            "pathGroups": [
              {
                "pattern": "react",
                "group": "external",
                "position": "before"
              }
            ],
            "pathGroupsExcludedImportTypes": ["react"],
            "alphabetize": {
              "order": "asc",
              "caseInsensitive": true
            }
          }
        ]
      }
    }
  ]
}

感谢您的帮助。

Answer 1

你不应该在 eslint@8 下使用 eslint，我将我的 eslint@7 更新为 8，并解决了这个错误。