eslint9配置跟之前的版本相差比较多。

import globals from "globals";
import eslint_js from "@eslint/js";
import reactPlugin from "eslint-plugin-react";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import tsEslintPlugin from "@typescript-eslint/eslint-plugin";
import tsEslintParser from "@typescript-eslint/parser";

import reactHooksPlugin from "eslint-plugin-react-hooks";
import eslintConfigPrettier from "eslint-config-prettier";

const customTsFlatConfig = [
    {
        name: "typescript-eslint/base",
        languageOptions: {
            parser: tsEslintParser,
            sourceType: "module"
        },
        files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
        rules: {
            ...tsEslintPlugin.configs.recommended.rules
        },
        plugins: {
            // ts 语法特有的规则，例如泛型
            "@typescript-eslint": tsEslintPlugin
        }
    }
];

export default [
    // es  lint默认规则
    eslint_js.configs.recommended,

    // prettier 默认推荐规则
    eslintPluginPrettierRecommended,
    //ts默认规则
    ...customTsFlatConfig,
    {
        name: "global config",
        languageOptions: {
            globals: {
                ...globals.es2022,
                ...globals.browser,
                ...globals.node
            },
            parserOptions: {
                warnOnUnsupportedTypeScriptVersion: false
            }
        },
        rules: {
            "no-unused-vars": "off",
            "no-undef": "off",
            "@typescript-eslint/no-explicit-any": "off",
            //关闭不能再promise中使用ansyc
            "no-async-promise-executor": "off",
            //关闭不能再常量中使用??
            "no-constant-binary-expression": "off",
            "@typescript-eslint/ban-types": "off",
            "@typescript-eslint/no-unused-vars": "off",

            //禁止失去精度的字面数字
            "@typescript-eslint/no-loss-of-precision": "off"
        }
    },

    {
        ignores: ["**/node_modules", "**/dist", "**/output"]
    },
    {
        name: "react-eslint",
        files: ["src/*.{js,jsx,mjs,cjs,ts,tsx}"],
        plugins: {
            react: reactPlugin,
            "react-hooks": reactHooksPlugin
        },
        languageOptions: {
            ...reactPlugin.configs.recommended.languageOptions
            // parserOptions: {
            //   ecmaFeatures: {
            //     jsx: true,
            //   },
            // },
        },
        rules: {
            ...reactPlugin.configs.recommended.rules
        },
        settings: {
            react: {
                // 需要显示安装 react
                version: "detect"
            }
        }
    },
    {
        languageOptions: { globals: { ...globals.browser, ...globals.node } }
    },
    eslintConfigPrettier
];

需要安装的包

"devDependencies": {
        "@eslint/js": "^9.5.0",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
        "@typescript-eslint/eslint-plugin": "^7.14.1",
        "@typescript-eslint/parser": "^7.14.1",
        "@vitejs/plugin-react": "^3.1.0",
        "eslint": "^9.5.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-react": "^7.34.3",
        "eslint-plugin-react-hooks": "^4.6.2",
        "husky": "^9.0.11",
        "lint-staged": "^15.2.7",
        "prettier": "^3.3.2",
        "typescript": "^4.9.5",
        "vite": "^4.2.0"
}

@eslint/js与eslint应该可以选择一个包，这里之前做尝试就都安装了。

.prettierrc.cjs配置

module.exports = {
    printWidth: 300, // 指定代码长度，超出换行
    tabWidth: 4, // tab 键的宽度
    useTabs: false, // 不使用tab
    semi: true, // 结尾加上分号
    singleQuote: false, // 使用单引号
    quoteProps: "as-needed", // 要求对象字面量属性是否使用引号包裹,(‘as-needed’: 没有特殊要求，禁止使用，'consistent': 保持一致 , preserve: 不限制，想用就用)
    jsxSingleQuote: false, // jsx 语法中使用单引号
    trailingComma: "none", // 确保对象的最后一个属性后有逗号
    bracketSpacing: true, // 大括号有空格 { name: 'rose' }
    jsxBracketSameLine: false, // 在多行JSX元素的最后一行追加 >
    arrowParens: "always", // 箭头函数，单个参数添加括号
    requirePragma: false, // 是否严格按照文件顶部的特殊注释格式化代码
    insertPragma: false, // 是否在格式化的文件顶部插入Pragma标记，以表明该文件被prettier格式化过了
    proseWrap: "preserve", // 按照文件原样折行
    htmlWhitespaceSensitivity: "ignore", // html文件的空格敏感度，控制空格是否影响布局
    endOfLine: "auto" // 结尾是 \n \r \n\r auto
};

.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

配置提交自动格式化

配置script命令

 "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "prettier": "prettier --write .",
        "lint": "eslint ./src/**/*.{js,vue,ts,tsx,jsx} --fix",
        "prepare": "husky",
        "husky:init": "pnpm exec husky init",
        "lint-staged": "lint-staged"
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "npm run lint",
            "prettier --write"
        ],
        "*.{mjs,cjs,json}": [
            "prettier --write"
        ]
    }

执行 npm run prepare 会生成git提交的husk配置

执行 npm run lint会按照配置的eslint检查代码

执行 npm run lint-staged 会按照配置的lint-staged命令，先执行 npm run lint 在执行prettier --write 格式化代码

那么只需要在提交的时候执行 npm run lint-staged

配置提交钩子函数

pre-commit文件中写入

npm run lint-staged

完结撒花。