.eslintrc Builder

Generate an ESLint config for your exact stack

ESLint catches bugs and enforces consistency, but configuring its parser, plugins, and rule presets by hand is fiddly — the right combination depends on whether you write plain JavaScript, TypeScript, React, or Vue. This builder assembles a correct .eslintrc.json with the matching parser, plugin list, extends presets, and a baseline of best-practice rule overrides.

How it works

An ESLint config is a JSON object with a few key sections. env declares the global variables available (browser, node, es2022). parser and parserOptions tell ESLint how to read your source — TypeScript projects swap in @typescript-eslint/parser. plugins loads extra rule sets, and extends turns on presets in order, with later entries overriding earlier ones:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

The rules block then fine-tunes individual rules using the values "off", "warn", or "error". The builder adds a curated set of best-practice rules — flagging unused variables, requiring ===, disallowing var, and warning on stray console.log — and, when you enable Prettier compatibility, appends eslint-config-prettier last so formatting conflicts are disabled.

Tips and notes

• Order matters in extends: put framework recommended sets after eslint:recommended, and prettier dead last so it can disable conflicting stylistic rules.
• Use warn for rules you want visible but non-blocking and error for rules that should fail CI.
• For TypeScript, enabling type-aware rules requires pointing parserOptions.project at your tsconfig.json; this builder sets that up when you choose TypeScript.
• Keep ESLint focused on code quality and delegate whitespace, quotes, and line width to Prettier.