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 提交前检查片段,每个文件单独一键复制。纯本地生成。
项目类型(可多选组合)
代码风格
配套与额外规则
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类型定义