What is the difference between .eslintrc.json and eslint.config.js?

.eslintrc.json is the legacy config format supported through ESLint v8. eslint.config.js (flat config) is the new default from ESLint v9 onward, using explicit imports instead of string-based plugin names.

Which ESLint version should I use?

ESLint v9+ uses the flat config format by default. If you are on v8 or need broad ecosystem compatibility, use the classic .eslintrc.json format.

Do I still need to run the install command?

Yes. The generated config references plugins and parsers that must be installed as devDependencies. Copy and run the provided npm install command in your project root.

Can I use both React and Vue toggles at once?

Technically yes, but it is unusual. Most projects use one framework. The generator supports the combination and will include both sets of plugins.

Does the generator handle monorepos?

The output is a single-package config. For monorepos, drop the generated file into each package directory, or place it at the root and use the flat config's "files" array to scope rules.

ESLint Config Generator

Name: ESLint Config Generator
Availability: InStock
Author: Nham Vu

Generate an .eslintrc.json or flat eslint.config.js for Airbnb, Standard, Google, or custom style guides with TypeScript, React, and Vue plugin toggles.

Configuration Options

Base Style Guide

Config Format

Plugins

TypeScript (@typescript-eslint)

React (eslint-plugin-react)

Vue 3 (eslint-plugin-vue)

Select options and click Generate Config

Copied!

Summary

Generate an .eslintrc.json or flat eslint.config.js for Airbnb, Standard, Google, or custom style guides with TypeScript, React, and Vue plugin toggles.

How it works

Select a base style guide: Airbnb, Standard, Google, or plain recommended.
Toggle TypeScript, React, and Vue plugin support as needed.
Choose the output format: classic .eslintrc.json or the modern flat eslint.config.js.
Click "Generate Config" to produce the config and its install command.
Copy the config and the install snippet, then drop them into your project.

Use cases

Bootstrap ESLint in a new JavaScript or TypeScript project.
Migrate a project from the legacy .eslintrc format to flat config.
Add React or Vue linting rules to an existing setup.
Share a consistent code-style baseline across a team.
Quickly compare what packages each style guide requires.
Generate a config to paste into a monorepo package.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu