ESLint 配置生成器

选框架与规则,生成 ESLint 9 flat config、.prettierrc、.editorconfig 与 husky 配套片段

ESLint 9 改用 eslint.config.js(flat config)后,旧 .eslintrc 教程全部失效。本工具按项目类型(Vue 3 / React / TypeScript / Node / 纯 JS)与代码风格(引号、分号、缩进、尾逗号)生成 import 关系正确的 flat config,并附带可切换标签页的 .prettierrc、.editorconfig 与 husky + lint-staged 提交前检查片段,每个文件单独一键复制。纯本地生成。

项目类型(可多选组合)

代码风格

配套与额外规则

放到项目根目录,ESLint 9 会自动读取此文件
import js from '@eslint/js'
import globals from 'globals'
import prettier from 'eslint-config-prettier'

export default [
  {
    ignores: ['dist/**', 'node_modules/**', 'coverage/**']
  },
  js.configs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,jsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: { ...globals.browser },
    },
    rules: {
      'no-console': 'warn',
      'quotes': ['error', 'single'],
      'semi': ['error', 'always'],
      'indent': ['error', 2],
      'comma-dangle': ['error', 'es5'],
      'no-var': 'error',
    }
  },
  // 放在数组末尾,关闭与 Prettier 冲突的格式规则
  prettier,
]

运行 npx eslint . 验证;报错缺包时按下方提示安装。

依赖安装提示:npm i -D eslint @eslint/js globals prettier eslint-config-prettier

#关于 ESLint 配置生成器

ESLint 9 默认使用 flat config:项目根放一个 eslint.config.js,导出一个配置对象数组,后写的项目覆盖先写的规则。旧的 .eslintrc.* 与 extends 链在 9.x 中不再是首选写法,插件也必须显式 import 并挂进数组。本工具按勾选组合生成对应 import 与配置块。

flat config 的数组顺序

推荐顺序是:全局忽略(ignores)→ js.configs.recommended → 框架插件推荐集(如 eslint-plugin-vue 的 flat/recommended、typescript-eslint 推荐集)→ 你的自定义 rules 块 → 最后放 eslint-config-prettier 关掉与 Prettier 冲突的格式规则。prettier 配置必须放数组末尾才生效。

Vue + TypeScript 的解析器组合

.vue 文件必须用 vue-eslint-parser 做外层 parser,再把 parserOptions.parser 指向 typescript-eslint 处理 <script lang="ts"> 部分——两个 parser 直接互换是最常见的报错来源。勾选 Vue + TS 时本工具会生成这套组合。

husky + lint-staged 怎么接

提交前检查的链路是:git commit → husky 的 pre-commit 钩子 → lint-staged 只对暂存文件跑 eslint --fix 与 prettier --write。本工具的 husky 标签页给出安装命令、钩子脚本内容与 package.json 的 lint-staged 段,三段拼起来即可用。

常见问题

  • 和旧 .eslintrc 什么关系?ESLint 9 只自动读取 eslint.config.js;如仍在用 .eslintrc,需要设 ESLINT_USE_FLAT_CONFIG=false 或迁移到 flat config,推荐后者。
  • 装完插件仍报 not found?flat config 是显式 import,确认包名与版本匹配 ESLint 9(vue 用 eslint-plugin-vue@9+,TS 用 typescript-eslint@8+),且已安装 globals 包。
  • prettier 和 eslint 冲突?把 eslint-config-prettier 放到配置数组最后一项即可关闭冲突的格式规则;代码格式化统一交给 prettier,ESLint 只管质量问题。

相关工具推荐

Spine动画编辑器

专业的Spine动画预览和编辑工具,支持多引擎导出

热门 新品 本地

SQL查询优化器

分析SQL查询并提供优化建议

热门 新品 本地

JVM启动参数配置

可视化配置Java虚拟机启动参数,支持内存、GC、性能等选项

热门 新品 本地

代码片段转换

不同编程语言间代码片段转换(如Python↔JavaScript)

热门 新品 本地

IP地址查询

查询IP地址的地理位置、运营商、ASN等信息,支持IPv4和IPv6

热门 新品 本地

JSON转TypeScript接口

根据JSON数据自动生成TypeScript类型定义

热门 新品 本地

相关教程