ESLint + Prettier Config Builder
An ESLint and Prettier config builder produces the starting configuration for a project: the flat eslint.config.js that ESLint 9 expects, wired so Prettier owns formatting and ESLint owns correctness, plus a .prettierrc and, for older toolchains, the equivalent legacy .eslintrc.json.
Last reviewed by the Radiatus Cloud team
Output
Need this built for your product?
We design, build & host secure software & APIs.
Why two tools and why this split
ESLint finds bugs: unused variables, unreachable code, unsafe comparisons. Prettier reformats code to one style and has no opinions about correctness. Running both without coordination produces conflicts where ESLint's stylistic rules disagree with Prettier's output. The generated config includes eslint-config-prettier last in the chain, which switches off every ESLint rule that Prettier would fight with, so each tool does only its job.
Flat config versus eslintrc
ESLint 9, released in April 2024, made the flat config file eslint.config.js the default and deprecated the .eslintrc.* family. Flat config is a JavaScript array of config objects, imports plugins as modules instead of naming them as strings, and uses files globs instead of overrides. The builder outputs the flat config first and the legacy JSON below it for projects still on ESLint 8. Do not ship both; ESLint 9 ignores eslintrc when a flat config exists.
What the TypeScript variant adds
It uses the typescript-eslint package, which replaced the separate parser and plugin installs, and spreads its recommended config into the array. Type-aware rules that need a tsconfig are not enabled; they are slower and worth adding deliberately once the basics pass.
The Prettier defaults chosen
| Option | Value | Reason |
|---|---|---|
| semi | true | Avoids ASI edge cases with lines starting in ( or [ |
| singleQuote | true | Fewer escapes in HTML-heavy strings |
| trailingComma | all | Cleaner diffs when adding items |
| printWidth | 100 | Fits modern displays without wrapping every call |
Installing
The install line at the bottom of the output lists the exact packages: eslint, @eslint/js, eslint-config-prettier, prettier, globals, and typescript-eslint for TypeScript. Add lint and format scripts to package.json and run both in CI; the point of the split is that neither tool needs a human to decide what it should have done.
Related tools
- Tailwind Config Generator — Generate a basic tailwind.config.js with content globs and dark mode setting.
- Gitignore Generator — Generate a .gitignore file for common stacks (Node, Python, PHP, Java, .NET) and OS files.
- GitHub Actions Workflow Generator — Generate GitHub Actions CI workflows for Node.js, PHP, and Python projects. Copy YAML and save to .github/workflows/ci.yml.
- .env File Generator — Generate a .env template from a list of keys. Useful for projects and deployment checklists.
Frequently Asked Questions
Which ESLint version does the output target?
The flat config targets ESLint 9 and later. The legacy .eslintrc.json block at the end is for ESLint 8. Use one or the other, not both.
Why is the Prettier config placed last?
Later entries override earlier ones in ESLint. eslint-config-prettier works by turning rules off, so it has to come after every config that turns them on.
Should I also run eslint-plugin-prettier?
Usually not. It reports formatting differences as lint errors, which is slower and noisier than running Prettier directly. The generated setup runs Prettier as a separate command.
Does the TypeScript config enable type-checked rules?
No. It uses the recommended set that works without type information. Add recommendedTypeChecked and a parserOptions.project entry once the project compiles cleanly.
What does the globals package do?
It supplies the list of built-in identifiers for an environment, so that document or process are not reported as undefined. The builder picks browser or node globals from your runtime choice.
Privacy & Security
Generated locally in your browser. No data is sent to any server.
How to Use
Choose language/runtime to generate configs.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Tailwind Config Generator
DeveloperGenerate a basic tailwind.config.js with content globs and dark mode setting.
Gitignore Generator
DeveloperGenerate a .gitignore file for common stacks (Node, Python, PHP, Java, .NET) and OS files.
GitHub Actions Workflow Generator
DeveloperGenerate GitHub Actions CI workflows for Node.js, PHP, and Python projects. Copy YAML and save to .github/workflows/ci.yml.