Developer Tools
ESLint Config Generator
Generate eslint.config.js (flat config) or .eslintrc.json for ESLint 9, with TypeScript, React, Next.js, Vue, Svelte, and Prettier-compatible presets.
Project preset
Pick a starting point. You can fine-tune everything below.
Language and environment
ECMAScript syntax level the parser will accept.
Pick module for import / export, commonjs for require.
Plugins and integrations
Common rules
Override the recommended preset with explicit severities.
Output formatting
Live summary
Project: Vanilla JavaScript Language: ECMAScript latest, ESM Environments: browser Packages: eslint, @eslint/js
Generated files
// ESLint flat config. Requires ESLint 9 or later.
// Docs: https://eslint.org/docs/latest/use/configure/configuration-files
import js from "@eslint/js";
import globals from "globals";
// The exported array is the flat config. Each entry applies in order.
export default [
// ESLint recommended rules apply to every file.
js.configs.recommended,
{
files: ["**/*.{js,mjs,cjs}"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
globals: {
...globals.browser,
},
},
rules: {
// Flag stray console.log but allow console.warn and console.error.
"no-console": ["warn", {"allow":["warn","error"]}],
"no-debugger": "error",
"no-unused-vars": ["warn", {"argsIgnorePattern":"^_","varsIgnorePattern":"^_"}],
"prefer-const": "error",
// Require === and !==, except when comparing to null.
"eqeqeq": ["error", "always", {"null":"ignore"}],
"no-var": "error",
},
},
{
// Files and folders ESLint should not lint.
ignores: [
"node_modules/**",
"dist/**",
"build/**",
"out/**",
".next/**",
".nuxt/**",
".svelte-kit/**",
".astro/**",
"coverage/**",
"**/*.min.js",
],
},
];
Filename: eslint.config.js
About this generator
The flat config tab targets ESLint 9 and later, which made flat config the default. The legacy .eslintrc.json tab is included for projects still on ESLint 8. Only one config file should ship per project; pick the tab that matches your installed ESLint major. Every byte runs in your browser, so your choices, generated files, and install commands never leave your device.
How to use
- Pick a project preset that matches what you are building. The Vanilla, Node, TypeScript, React, Next.js, Vue, and Svelte presets each enable the right plugins and the recommended rule set for that stack.
- Fine-tune the Plugins panel. Toggle TypeScript, React Hooks, JSX accessibility, Import, Unused imports, and Prettier compatibility on or off; the generator updates every output tab and the install command list in real time.
- Adjust the Common rules panel to override no-console, no-debugger, no-unused-vars, prefer-const, eqeqeq, and no-var with off, warn, or error severities.
- Choose the output format that matches your ESLint major version. eslint.config.js, .mjs, and .cjs target ESLint 9 (flat config); .eslintrc.json targets ESLint 8.
- Copy or download the file you need. Use the Install commands tab to copy the matching npm, pnpm, yarn, or bun command and the .vscode/settings.json tab to wire up Format on save in VS Code.
About this tool
ESLint Config Generator builds a clean, ready-to-commit ESLint configuration from a short set of explicit toggles. Pick a project preset (Vanilla JavaScript, Node, TypeScript, React, Next.js, Vue, or Svelte) and the generator picks the right plugins, parsers, and recommended rule sets for you. The output panel exposes seven files at once: eslint.config.js, eslint.config.mjs, and eslint.config.cjs are the flat-config formats introduced as the default in ESLint 9, with imports for @eslint/js, globals, typescript-eslint, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-plugin-unused-imports, eslint-config-prettier, eslint-plugin-vue, eslint-plugin-svelte, and a FlatCompat shim for Next.js when you select that preset. The .eslintrc.json tab is the legacy format for projects still on ESLint 8, with the equivalent extends, parser, parserOptions, plugins, settings, and rules. .eslintignore gives you a sensible default ignore list for build output, dependencies, coverage, and generated assets. The package.json tab carries lint, lint:fix, and lint:ci scripts ready to drop into your project. The .vscode/settings.json tab wires up Format on save, source.fixAll.eslint, and the editor.validate languages so the VS Code extension picks up the config without extra steps. The Install commands tab gives you the matching npm, pnpm, yarn, and bun commands that install every package the config references, so you can paste a single line into your terminal. A live summary panel reports the chosen project, ECMAScript level, source type, environments, and the resolved package list, so you can verify your picks before copying. Common opinionated rules (no-console, no-debugger, no-unused-vars, prefer-const, eqeqeq, no-var) are exposed as off/warn/error toggles, and when both TypeScript and unused-imports are enabled the generator swaps to the plugin-aware variants automatically. Every option, file, and install command is generated locally, so your project setup never leaves your browser.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Prettier Config Generator
Pick Prettier 3 options with presets and plugins, then copy the file format you need.
Open tool
DeveloperTSConfig Generator
Preset-driven tsconfig.json builder with strictness, paths, and emit toggles.
Open tool
DeveloperEditorConfig Generator
Build a .editorconfig with stack presets, a universal section, and per-glob overrides.
Open tool
DeveloperGitignore Generator
Build a .gitignore from curated language, framework, editor, and OS templates.
Open tool
Developerpackage.json Validator
Lint a package.json against npm publish rules, SPDX licenses, and semver ranges.
Open tool
DeveloperGlob Pattern Tester
Test glob patterns and negations against file paths with live results.
Open tool