ESLint 配置生成器
生成 .eslintrc.json 或 eslint.config.js 配置模板：勾选 TypeScript、React、Vue、Node、浏览器、Jest / Vitest、Prettier 兼容与 import 排序等常用规则集，实时预览并复制。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
规则集
勾选项目里用到的语言、框架与工具，配置会实时生成。
生成的配置
eslint.config.js3import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import configPrettier from 'eslint-config-prettier';
export default [
{ ignores: ["dist","node_modules"] },
js.configs.recommended,
...tseslint.configs.recommended,
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
},
},
rules: {
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
},
},
configPrettier,
];
这个工具能做什么
- 新项目搭 ESLint 时不想翻文档：勾一遍技术栈，直接拿到能跑的 eslint.config.js 或 .eslintrc.json。
- 老项目从 .eslintrc 迁移到 flat config：先用 legacy 模式导出当前配置对照，再切到 flat 模式生成新版骨架。
- 把团队约定固化下来：TypeScript + Prettier 兼容 + import 排序 + 忽略 dist，生成后提交进仓库，避免每个人各写一套。
- 只想补一个测试环境的规则时，直接勾 Jest 或 Vitest，把生成的片段粘进现有配置。
示例
输入
配置格式 legacy（.eslintrc.json），勾选 TypeScript + 浏览器 + Prettier 兼容，忽略项 dist、node_modules
输出
{
"root": true,
"env": {
"es2022": true,
"browser": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_"
}
]
},
"ignorePatterns": [
"dist",
"node_modules"
]
}同样的勾选切到 flat config，会生成 import 了 typescript-eslint、globals 和 eslint-config-prettier 的 eslint.config.js。
常见问题
flat config 和 .eslintrc 该选哪个？
ESLint 9 起 flat config（eslint.config.js）是默认格式，新项目直接用它。ESLint 8 及更早、或者依赖还没适配 flat 的插件时才用 .eslintrc.json，此时记得确认 ESLINT_USE_FLAT_CONFIG 之类的环境变量与团队一致。
「Prettier 兼容」这一项做了什么？
它会引入 eslint-config-prettier（flat 里是 configPrettier，legacy 里是 extends 中的 "prettier"），作用是关掉 indent、quotes、semi 这类会跟 Prettier 打架的格式规则。它不负责运行 Prettier，格式化仍由 prettier 命令完成。
忽略项为什么不能用 / 开头或带空格？
flat config 的 ignores 用相对路径或 glob 匹配，写成 /dist 会被当成绝对路径而失效；带空格的路径在 JSON 与 glob 里容易产生歧义。所以工具会直接拦下并提示，让你写成 dist 或 build/**。
生成的配置能直接跑吗？
语法上是完整可运行的，但插件本身要先安装：比如勾了 TypeScript 就需要 npm i -D eslint typescript-eslint（或 @typescript-eslint/parser + @typescript-eslint/eslint-plugin，legacy 写法）。工具不会替你决定包管理器，也不会写入 package.json。
配置会上传到服务器吗？
不会。所有拼接都在浏览器里完成，页面不发任何请求；生成的文本只存在于当前页面，刷新即丢失，记得先复制再离开。
关键词：eslinteslint configflat configeslintrctypescript-eslinteslint 配置代码检查lint 规则eslint 生成器前端工程化