Eslint、Prettier 和 VSCode 配置不起作用

Question

我正在尝试将旧的 eslint 配置文件转换为新的 eslint 配置，但是我无法让它工作。

我正在起诉 VScode，我的旧设置有效，它强调了格式错误的代码，并且在上下文菜单 ALT + Enter 中显示修复所有可自动修复的选项。然而新版本没有这样做。

我的旧 .exlintrc.cjs 配置：

const fs = require("fs");
const path = require("path");

const prettierOptions = JSON.parse(fs.readFileSync(path.resolve(__dirname, ".prettierrc.json"), "utf8"));

module.exports = {
    root: true,
    env: { browser: true, es2021: true, es6: true },
    overrides: [
        {
            files: ["**/*.ts?(x)"],
            rules: {
                "@typescript-eslint/explicit-function-return-type": "off",
                "max-lines": "off",
                "max-lines-per-function": "off",
                "no-magic-numbers": "off",
                "no-undef": "off",
            },
        },
    ],
    extends: ["airbnb-base", "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
    ignorePatterns: ["dist", ".eslintrc.cjs"],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: "latest",
        sourceType: "module",
        project: "./tsconfig.json",
    },
    plugins: ["prettier", "unused-imports"],
    settings: {
        "import/resolver": {
            node: {
                extensions: [".js", ".ts"],
                moduleDirectory: ["src", "node_modules"],
            },
        },
    },
    rules: {
        "@typescript-eslint/no-non-null-assertion": "error",
        "prettier/prettier": ["warn", { prettierOptions }],
        "@typescript-eslint/no-explicit-any": "off",
        "no-unused-vars": "off",
        "no-use-before-define": "off",
        "import/no-default-export": 0,
        "@typescript-eslint/no-use-before-define": ["error"],
        "import/no-unresolved": "off",
        "no-shadow": "off",
        "@typescript-eslint/no-shadow": "off",
        "no-loop-func": "off",
        "no-param-reassign": "off",
        "no-nested-ternary": "off",
        "import/no-extraneous-dependencies": "off",
        "no-useless-constructor": "off",
        "max-classes-per-file": "off",
        "no-empty-function": "off",
        "import/prefer-default-export": "off",
        "import/extensions": ["error", "ignorePackages", { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" }],
        "import/order": [
            "warn",
            {
                groups: [
                    ["builtin", "external"],
                    "internal",
                    ["parent", "sibling", "index"],
                    "object",
                    "type",
                ],
                "newlines-between": "always",
                alphabetize: {
                    order: "asc",
                },
                pathGroups: [
                    {
                        pattern: "./**/*.less",
                        group: "object",
                    },
                    {
                        pattern: "**/*.less",
                        group: "object",
                    },
                    {
                        pattern: "./**/*.{jpg,jpeg,png,gif,svg,ico}",
                        group: "type",
                    },
                    {
                        pattern: "**/*.{jpg,jpeg,png,gif,svg,ico}",
                        group: "type",
                    },
                ],
            },
        ],
    },
};

我的 .prettierrc.json 配置：

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "jsxSingleQuote": true,
    "quoteProps": "as-needed",
    "htmlWhitespaceSensitivity": "css",
    "singleQuote": false,
    "semi": true,
    "printWidth": 120,
    "useTabs": true,
    "tabWidth": 8,
    "trailingComma": "all",
    "endOfLine": "auto",
    "proseWrap": "never"
}

这是Vite生成的新.eslint.config.js文件：

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
)

我想使用 Vite 生成的新版本 eslint，但我无法让它正常工作，VSCode 要么完全忽略了规则，要么只是在输出终端中抛出一个错误，缺少插件（已安装）或某种“0”错误。

Answer 1

这是一个工作配置，需要一段时间才能收集所有内容。它是针对 TypeScript 量身定制的（具有严格的类型检查），但一切都可以作为开始：

import eslint from "@eslint/js";
import tslint from "typescript-eslint";
import stylistic from "@stylistic/eslint-plugin";
import jsdoc from "eslint-plugin-jsdoc";
import preferArrow from "eslint-plugin-prefer-arrow";
import importPlugin from "eslint-plugin-import";

export default tslint.config(
    eslint.configs.recommended,
    ...tslint.configs.strictTypeChecked,
    ...tslint.configs.stylisticTypeChecked,
    jsdoc.configs["flat/recommended"],
    {
        // This must be in its own object to avoid a bug in the ESLint parser.
        ignores: ["src/generated/*"],
    },
    {
        plugins: {
            "@stylistic": stylistic,
            "jsdoc": jsdoc,
            "prefer-arrow": preferArrow,
            "import": importPlugin,
        },
        languageOptions: {
            parser: tslint.parser,
            parserOptions: {
                projectService: {
                    defaultProject: "tsconfig.json",
                    allowDefaultProject: ["*.mjs", "jest.config.ts"],
                    project: "tsconfig.json",
                },
                tsconfigRootDir: import.meta.dirname,
                sourceType: "module",
            },
        },
        rules: {
            "no-fallthrough": [
                "warn",
                {
                    "commentPattern": "\\[falls?-through\\]",
                    "allowEmptyCase": true
                }
            ],
            "max-len": [
                "error",
                {
                    "ignoreRegExpLiterals": false,
                    "ignoreStrings": false,
                    "code": 120
                }
            ],
            "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
            "curly": ["error", "all"],
            "arrow-body-style": ["error", "always"],
            "@stylistic/padding-line-between-statements": [
                "error",
                {
                    "blankLine": "always",
                    "prev": "*",
                    "next": "return"
                }
            ],
            "@stylistic/quotes": [
                "error",
                "double",
                {
                    "avoidEscape": true,
                    "allowTemplateLiterals": true
                }
            ],

... etc.
        },
    }
);

我将其存储在文件 eslint.config.mjs 中，因为我使用 ESM。 ESLint 应该自动拾取它，但有时我必须手动重新启动它（命令面板 -> ESLint：重新启动 ESLint 服务器），甚至重新启动 VS Code。有关更多详细信息，请检查“ESLint”输出通道，如果配置文件有问题，它会提供大量信息。如果该通道不存在，则意味着您的 ESLint 甚至尚未启动。