Problems migrating ESLint code formatting rules to @stylistic/eslint-plugin

Question

I'm getting issues using the ESLint Stylistic plugin with ESLint on my node/react/typescript project.

ESLint has deprecated code formatting rules and has recommended using the ESLint Stylistic plugin instead for code formatting. I've installed it on my node project as a dev dependency using

npm i -D @stylistic/eslint-plugin

Actually my setup uses rush so I used a rush add command but it equates to the above anyway.

I've modified my .eslintrc.json config file according to their instructions here: https://eslint.style/packages/default

This is what my modified config file looks like:

{
  "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
            }
          }
        ]
      }
    }
  ]
}

However when I run

npm run lint

I get the following error message:

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

What am I doing wrong? As you can see the config file isn't even explicitly referencing the @stylistic/comma-spacing rule.

This is what the config file looked like before modifying and installing the plugin and it worked fine:

{
  "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
            }
          }
        ]
      }
    }
  ]
}

Thanks for any help.

Answer 1

you should not use eslint under eslint@8, I update my eslint@7 to 8, and I solve this error.