elefcode

ESLint, Prettier & EditorConfig Generator

One set of choices — indent, quotes, semicolons, framework — becomes a matching .editorconfig, .prettierrc and ESLint flat config.

Start from:
Whitespace (EditorConfig)
Indent with
Indent size
Line endings
Prettier
Quotes
Semicolons
Trailing commas
Arrow parens
ESLint
Framework
Runs in
# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 100

# Two trailing spaces are a line break in Markdown
[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Most editors read it natively; VS Code needs the EditorConfig extension.

  • Install: npm install -D eslint @eslint/js globals typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier prettier

Advertisement

Guide

About the ESLint, Prettier & EditorConfig Generator

Three small files keep a codebase consistent. .editorconfig sets indentation and line endings in every editor, Prettier reformats code to one style automatically, and ESLint catches bugs and risky patterns that formatting cannot.

Make your choices once here and the three configs agree with each other: Prettier uses the same indent and width as EditorConfig, and ESLint turns off any rule that would clash with Prettier.

Flat config

ESLint 9 replaced .eslintrc with eslint.config.js, a plain JavaScript array of config objects. Plugins are imported like any module, later entries override earlier ones, and globalIgnores replaces .eslintignore.

Formatting versus linting

Let Prettier own formatting — spacing, quotes, wrapping — and ESLint own correctness. ESLint’s own formatting rules are deprecated, and running both on style leads to endless fix-then-revert loops. eslint-config-prettier goes last in the config to switch off any overlapping rules.

How to use it

  1. 1Pick a preset or set indentation and line endings.
  2. 2Choose your Prettier style.
  3. 3Pick your framework and whether to use TypeScript.
  4. 4Download the files, merge the scripts and run the install command.

Frequently asked questions

Do I need .editorconfig if I use Prettier?

It still helps: it applies while you type, before Prettier runs, and covers files Prettier does not format. Prettier also reads it for indentation and line width.

How do I migrate from .eslintrc to flat config?

Generate a new eslint.config.js here for your stack, or run npx @eslint/migrate-config .eslintrc.json for a direct translation, then delete the old file and .eslintignore.

Why is eslint-config-prettier last?

Flat config applies entries in order, so later ones win. Putting it last guarantees it turns off every stylistic rule that earlier configs switched on.

What are type-aware lint rules?

Rules that use the TypeScript type checker, such as no-floating-promises and no-unsafe-assignment. They catch real bugs but need your tsconfig and make linting slower.

Single or double quotes?

It does not matter as long as the whole codebase agrees, which is exactly what Prettier enforces. Single quotes are more common in JavaScript; JSON always uses double.

Should I use tabs or spaces?

Spaces are the convention in most JavaScript projects. Tabs let each developer choose a display width, which some find more accessible. Pick one and let the tools enforce it.

Related tools

tsconfig & package.json GeneratorCode Beautifier.gitignore GeneratorGitHub Actions Generator