ESLint9 的配置

时代变了，ESLint 更新到9.x之后，废弃了部分对格式的规则，只保留了对语法的校验。所以如果需要 ESLint 自动化格式，需要安装额外的插件以及配置。

本文适用 eslint >= 9.0.0
本文包括 vue + typescript 的配置

安装

参考package.json配置

{
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@stylistic/eslint-plugin": "^2.11.0",
    "@vue/eslint-config-typescript": "^14.1.4",
    "eslint": "^9.16.0",
    "eslint-plugin-vue": "^9.32.0",
    "globals": "^15.13.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.17.0"
  }
}

eslint.config.js

概括来说，需要更多的手动配置。包括：

• 配置更多的样式规则
• 配置 vue 的规则
• 配置 vue + typescript 的规则

import pluginVue from "eslint-plugin-vue";
import tsEslint from "typescript-eslint";
import stylistic from "@stylistic/eslint-plugin";
import vueTsEslintConfig from "@vue/eslint-config-typescript";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    plugins: {
      "@stylistic": stylistic,
    },
    languageOptions: {
      parser: tsEslint.parser,
    },
    files: ["**/*.js", "**/*.ts", "**/*.tsx", "**/*.vue"],
    rules: {
      ...stylistic.configs["recommended-flat"].rules,
      // 拓展 stylistic 的规则
      "@stylistic/semi": "error",
    },
  },
  ...pluginVue.configs["flat/recommended"],
  ...vueTsEslintConfig(),
  {
    rules: {
      // 自定义规则
    },
  },
];