ESLint Config Generator
Build an ESLint config without memorizing plugin names. Choose flat config or legacy .eslintrc, pick your language, framework and style, tweak the semi, quotes and indent rules, then copy the file straight into your project.
How to generate an ESLint config
- Choose the output format: modern flat config (eslint.config.js) or legacy .eslintrc.json.
- Set your language, framework, style preset and the semi, quotes and indent rules.
- Copy the generated config or download it into the root of your project.
Examples
TypeScript + React, eslintrc
{ "format": "eslintrc", "language": "typescript", "framework": "react" }{
"root": true,
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": { ... }
}JavaScript, flat config
{ "format": "flat", "language": "javascript" }import js from "@eslint/js";
export default [
js.configs.recommended,
{ rules: { ... } },
];Frequently asked questions
What is the difference between flat config and .eslintrc?
Flat config is the eslint.config.js format that is the default from ESLint 9 onward. It uses plain JavaScript imports instead of plugin name strings. The .eslintrc.json format is the older style still supported by many projects, so the generator emits whichever one you pick.
Which plugins and parsers does it add?
Selecting TypeScript adds typescript-eslint (the parser plus the recommended config). React adds eslint-plugin-react and react-hooks, and Vue adds eslint-plugin-vue. You still install those packages yourself; the config just wires them up.
What do the style presets change?
Each preset seeds the semi, quotes and indent rules and a couple of extras. Airbnb-like uses single quotes with semicolons, standard-like drops semicolons and bans trailing commas, and recommended is a lighter baseline. Any rule you set by hand overrides the preset.
What does the Prettier option do?
It adds eslint-config-prettier last in the chain, which turns off the formatting rules that would otherwise fight Prettier. Use it when Prettier owns your formatting and ESLint should only catch code-quality issues.
Is my configuration sent to a server?
No. The whole config is generated in your browser from the options you pick. Nothing is uploaded, logged or stored.
Where do I save the generated file?
Put eslint.config.js or .eslintrc.json in the root of your project next to package.json. Then install ESLint and the listed plugins and run eslint over your source.
Related tools
tsconfig.json Generator
Generate a tsconfig.json for Node, Browser, React, Next.js or a library. Pick a preset, toggle strict, paths and source maps, then copy or download.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
Gitignore Generator
Build a .gitignore from Node, Python, Java, Go, Rust, macOS, Windows and more. Pick your stacks, copy or download the file. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.