ESLint config generator
Build an .eslintrc.json or eslint.config.js template by ticking TypeScript, React, Vue, Node, browser, Jest / Vitest, Prettier compatibility and import sorting, with a live preview you can copy.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Rule sets
Tick the languages, frameworks and tools your project uses — the config updates as you type.
Generated config
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,
];
What this tool does
- Bootstrap ESLint for a new project without rereading the docs: tick your stack and get a working eslint.config.js or .eslintrc.json.
- Migrate an old project from .eslintrc to flat config: export the current settings in legacy mode, then generate the new flat skeleton.
- Freeze your team conventions — TypeScript, Prettier compatibility, import sorting, ignored folders — and commit the result instead of letting everyone invent their own setup.
- Add rules for one environment only: tick Jest or Vitest and paste just that block into your existing config.
Example
Input
Format legacy (.eslintrc.json), TypeScript + browser + Prettier compatibility ticked, ignores dist and node_modules
Output
{
"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"
]
}With the same ticks but flat config selected, you get an eslint.config.js that imports typescript-eslint, globals and eslint-config-prettier.
Frequently asked questions
Should I use flat config or .eslintrc?
Flat config (eslint.config.js) is the default from ESLint 9, so use it for new projects. Only fall back to .eslintrc.json on ESLint 8 or when a plugin you need has not shipped flat config support yet.
What does the Prettier compatibility option actually do?
It pulls in eslint-config-prettier (configPrettier in flat, "prettier" in the legacy extends list), which turns off formatting rules such as indent, quotes and semi that fight with Prettier. It does not run Prettier — formatting still happens through the prettier command.
Why can ignore entries not start with / or contain spaces?
Flat config matches ignores as relative paths or globs, so /dist is treated as an absolute path and silently never matches; paths with spaces are ambiguous in both JSON and globs. The tool rejects them and asks for dist or build/** instead.
Is the generated config ready to run?
The syntax is complete and runnable, but you still have to install the plugins: ticking TypeScript means installing eslint plus typescript-eslint (or @typescript-eslint/parser and @typescript-eslint/eslint-plugin for the legacy form). The tool does not pick a package manager or touch package.json.
Is anything uploaded?
No. Everything is assembled in the browser, the page makes no requests, and the text only lives in the current tab — copy it before you leave.
Keywords：eslinteslint configflat configeslintrctypescript-eslinteslint 配置代码检查lint 规则eslint 生成器前端工程化