ESLint Config Generator Free Online Tool 2026

Last updated March 22, 2026

ESLint Config Generator Examples

The ESLint Config Generator creates customized ESLint configuration files for JavaScript and TypeScript projects. Below are examples of generated configs for common project setups.

Basic JavaScript Project (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "eqeqeq": ["error", "always"],
    "no-var": "error",
    "prefer-const": "error"
  }
}

TypeScript + React Project

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "plugins": ["@typescript-eslint", "react", "react-hooks", "jsx-a11y"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/explicit-function-return-type": "off",
    "no-console": "warn"
  },
  "settings": {
    "react": { "version": "detect" }
  }
}

Required packages:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y \
  eslint-config-prettier

Vue 3 + TypeScript Project

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "@vue/typescript/recommended",
    "prettier"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "vue/multi-word-component-names": "off",
    "vue/no-unused-vars": "error"
  }
}

Node.js Backend Project

{
  "env": {
    "node": true,
    "es2022": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:node/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "node/no-unsupported-features/es-syntax": "off",
    "no-process-exit": "error",
    "@typescript-eslint/no-floating-promises": "error"
  }
}

Flat Config Format (ESLint v9+)

// eslint.config.js
import js from "@eslint/js";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module"
      }
    },
    plugins: { "@typescript-eslint": tsPlugin },
    rules: {
      ...tsPlugin.configs.recommended.rules,
      "@typescript-eslint/no-explicit-any": "warn",
      "no-console": "warn"
    }
  },
  {
    files: ["**/*.test.ts"],
    rules: {
      "@typescript-eslint/no-explicit-any": "off"
    }
  }
];

Airbnb Style Guide Extension

{
  "extends": ["airbnb", "airbnb/hooks", "prettier"],
  "rules": {
    "import/prefer-default-export": "off",
    "react/prop-types": "off",
    "no-underscore-dangle": "off"
  }
}

npm install -D eslint-config-airbnb eslint-plugin-import \
  eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Ignore Patterns (.eslintignore)

node_modules/
dist/
build/
coverage/
*.min.js
*.d.ts
public/

Common Use Cases

• Setting up ESLint for a new React or Vue project
• Adding TypeScript-aware linting to an existing JavaScript project
• Integrating ESLint with Prettier to avoid rule conflicts
• Adopting the Airbnb or Google style guide for a team
• Configuring accessibility linting for JSX components
• Migrating from legacy .eslintrc to the new flat config format

Select your framework, language, style guide preferences, and Prettier integration to get a complete, ready-to-use ESLint configuration with the npm install command for all required packages.