Softonic

ESLintrc Generator

Step 1 / 2
Next

This generator builds a ready-to-use .eslintrc.json config from four choices: browser or Node environment, TypeScript support and React support. It wires eslint:recommended, the matching TypeScript or React plugins and a couple of sensible rule overrides, so you can paste the result into your project.

How to generate an ESLint config

  1. 1

    Pick the environment

    Choose whether the code runs in the browser, in Node.js, or both. The generator sets the matching `env` entries, plus `es2022`.

  2. 2

    Enable TypeScript

    Tick TypeScript and the generator adds the `@typescript-eslint/parser` and the recommended TypeScript plugin.

  3. 3

    Enable React

    Tick React and the generator adds `eslint-plugin-react` with its recommended preset.

  4. 4

    Generate

    Click the button and the config is built as pretty-printed JSON.

  5. 5

    Copy into your project

    Paste the output into `.eslintrc.json` and install the plugins it references.

What the generated config contains

The generator always starts from eslint:recommended and adds exactly what your selections imply:

  • env with browser and/or node, plus es2022
  • @typescript-eslint/parser and plugin:@typescript-eslint/recommended when TypeScript is on
  • plugin:react/recommended when React is on
  • no-console and no-unused-vars set to warn

The output is a plain JSON object in the classic .eslintrc.json shape, ready to paste and extend with your own rules.

Flat config vs legacy

ESLint 9 deprecated the .eslintrc.* format in favor of flat config (eslint.config.js). Key differences:

Aspect Legacy (.eslintrc) Flat (eslint.config.js)
Format JSON, YAML or CommonJS ESM or CommonJS JavaScript module
Extends extends: ["plugin:react/recommended"] Spread into array: ...reactPlugin.configs.recommended
Overrides overrides array with glob patterns Multiple objects in the exported array
Globals env: { browser: true } languageOptions.globals with explicit imports
Ignores .eslintignore file ignores field in config array

New projects should use flat config. Existing projects may stay on legacy through the 10.x line, but migration is recommended.

Plugin ecosystem

Typical React/TS project plugins:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

That is six packages for one moderately opinionated setup. The generator adds the ones you select, so you install only what the config references.

Prettier coexistence

Prettier handles formatting; ESLint handles correctness and style beyond formatting. To avoid conflicts:

  1. Install eslint-config-prettier and add it as the LAST item in your extends/config.
  2. It turns off every ESLint rule that conflicts with Prettier’s output.
  3. Run Prettier separately (on save in editor, in pre-commit hook, in CI).

Do not use eslint-plugin-prettier in new projects; it slows ESLint down by running Prettier inside ESLint. Separate the two tools.

Rule-tuning tips

  • Start loose, ratchet tighter. Enable warnings before errors.
  • Override for tests. Test files often need no-unused-expressions relaxed and Jest globals available.
  • Override for scripts. Build scripts may need Node globals without adding env: node globally.
  • Document overrides. Every rule override deserves a comment explaining why.

Config that matches your editor

VS Code needs the ESLint extension installed and configured. Add these to your workspace settings for auto-fix on save:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Frequently Asked Questions

For new projects, flat config (eslint.config.js). This generator emits the classic .eslintrc.json format, which ESLint reads natively in legacy mode; the comparison table above shows what changes if you migrate later.

Yes, if you are using TypeScript. The @typescript-eslint/parser and @typescript-eslint/eslint-plugin enable TypeScript-aware linting. For type-aware rules (not just syntax), also configure the parser with project: './tsconfig.json'.

Usually missing dev dependencies in CI. Make sure @typescript-eslint/*, plugins and the ESLint version match between local and CI. Use npm ci (not npm install) in CI to respect the lockfile.

No. Your selections are only used to generate the config; they are not stored and are not shared with third parties.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Random Color Palette Generator

Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.

Tool available in other languages