ESLint Config Generator

Generate ESLint configuration files visually.

Configuration

Environments

Frameworks

Rules

Quotes: 

                            
Copy the config to eslint.config.js (flat) or .eslintrc.json (legacy).

                        

                    

                


                
                

                    

                         What is ESLint?
                    

                    

                        
ESLint is a static code analysis tool for JavaScript and TypeScript. It scans your source files, identifies problematic patterns, enforces style consistency, and catches many bugs before they reach production. Because it is configurable, teams can tailor the exact set of rules that fits their codebase and workflow.

                        
The generator supports two configuration formats. Flat config is the modern ESLint 9 format written in JavaScript and exported with export default; it groups options under languageOptions, plugins, and rules. Legacy config is the traditional .eslintrc structure that uses env, extends, and parserOptions.

                        
You can start from one of five presets: airbnb, standard, prettier, google, or custom (minimal). Whatever preset you pick, the generated config also extends eslint:recommended, the curated set of core rules that catch common mistakes.

                        
The page also exposes environment and framework toggles. Node, Browser, and ES2021 control globals and the ECMAScript version, while TypeScript, React, and Vue add the relevant parser, plugins, and extends entries. Rule checkboxes and inputs control semicolons, quote style, trailing commas, indentation, and maximum line length. Everything is generated in your browser and copied to your clipboard.

                        
Key Concepts

                        
    
                            
  • Flat config — the ESLint 9 eslint.config.js format.
    • 
                            
  • Legacy config — the traditional .eslintrc structure with env and extends.
    • 
                            
  • Preset — airbnb, standard, prettier, google, or custom (minimal).
    • 
                            
  • Environments and globals — Node, Browser, and ES2021 toggles.
    • 
                            
  • Framework plugins — TypeScript, React, and Vue support.
    • 
                            
  • Rules — the style and correctness rules written into the output.
    • 
                        

                    

                


                
                

                                        


                         How to Use
                    

                    

                        
    
                            
  1. Choose a preset — Select airbnb, standard, prettier, google, or custom (minimal).
    2. 
                            
  2. Choose a format — Pick Flat (eslint.config.js) or Legacy (.eslintrc).
    3. 
                            
  3. Toggle environments and frameworks — Enable Node, Browser, ES2021, TypeScript, React, and/or Vue.
    4. 
                            
  4. Adjust rules — Set semicolons, quote style, trailing commas, indent width, and maximum line length.
    5. 
                            
  5. Copy the config — Copy the generated output into eslint.config.js or .eslintrc.json.
    6. 
                        

                    

                


                
                

                    

                         Generated Rules Reference
                    

                    

                        

                            
                                

                                    Rule
                                    Generated value
                                    When
                                

                            
                            
                                
semialways / never“Require semicolons” checked (never for standard).

                                
quotessingle / doubleQuotes checked.

                                
comma-danglealways-multilineTrailing commas checked.

                                
indent2 or 4Always.

                                
no-trailing-spaceserrorAlways.

                                
eol-lastalwaysAlways.

                                
max-len120 (default)Omitted entirely when the value is 0.

                                
no-consolewarn / offwarn for airbnb, off for all others.

                                
no-debuggerwarnAlways.

                                
no-varerrorAlways.

                                
prefer-consterrorAlways.

                            
                        

                    

                


                
                

                    

                         Preset Reference
                    

                    

                        

                            
                                

                                    Preset
                                    Extends (legacy)
                                    Notes
                                

                            
                            
                                
Airbnbairbnb-base, eslint:recommendedSets no-console to warn.

                                
Standardstandard, eslint:recommendedSets semi to never.

                                
Prettierprettier, eslint:recommendedPairs with Prettier formatting.

                                
Googlegoogle, eslint:recommendedFollows the Google style guide.

                                
Custom (minimal)eslint:recommendedNo additional style preset.

                            
                        

                    

                


                
                

                    

                         Worked Examples
                    

                    
    
                        
  • TypeScript enabled — adds the @typescript-eslint plugin, turns off the base no-unused-vars, sets @typescript-eslint/no-unused-vars to error, and appends TypeScript file globs.
    • 
                        
  • React enabled — adds the react plugin and sets settings.react.version to detect.
    • 
                        
  • Vue enabled (legacy) — extends plugin:vue/vue3-recommended and adds the vue plugin.
    • 
                        
  • Standard preset — writes semi: ["never"] instead of always.
    • 
                        
  • Maximum line length set to 0 — the max-len rule is omitted from the output entirely.
    • 
                        
  • Node and Browser enabled — declares read-only window, document, and console globals plus process, __dirname, module, and require.
    • 
                        
  • ES2021 disabled — ecmaVersion becomes 2020 instead of 2021.
    • 
                    

                


                
                

                    

                         Tips and Common Mistakes
                    

                    
    
                        
  • Match the version — flat config requires ESLint 9 or later; use legacy config for ESLint 8 and below.
    • 
                        
  • Line up with your formatter — choose the Prettier preset if you format with Prettier to avoid rule conflicts.
    • 
                        
  • eslint:recommended is always included — it is added alongside whichever preset you select.
    • 
                        
  • Zero disables the line-length rule — setting max line length to 0 omits max-len entirely.
    • 
                        
  • TypeScript replaces no-unused-vars — enabling TypeScript disables the base rule in favor of the TypeScript-aware version.
    • 
                        
  • Install the plugins yourself — the generator writes configuration only and does not add packages to your project.
    • 
                    

                


                
                

                    

                         Common Use Cases
                    

                    

                        
An ESLint config generator removes the guesswork from setting up linting. Here are the situations where it saves the most time.

                        
    
                            
  1. New project setup — create a working configuration in seconds.
    2. 
                            
  2. v8 to v9 migration — translate a legacy config into the flat format.
    3. 
                            
  3. Team style enforcement — standardize rules across a codebase.
    4. 
                            
  4. Framework enablement — add TypeScript, React, or Vue linting.
    5. 
                            
  5. CI consistency — commit a known-good config used by every contributor.
    6. 
                            
  6. Baseline experimentation — preview how presets change the rules.
    7. 
                        

                    

                


                
                

                                        


                         Frequently Asked Questions
                    

                    

                        

                            
Which preset should I choose?

                            
Choose Prettier if you format with Prettier, Airbnb for large teams, Standard for a minimal opinionated set, or Google to follow the Google style guide. Custom (minimal) adds no style preset.

                        

                        

                            
What is the difference between flat and legacy config?

                            
Flat config is the ESLint 9 JavaScript format using export default, while legacy config uses env and extends in a .eslintrc file for ESLint 8 and below.

                        

                        

                            
Is my configuration stored on a server?

                            
No. All generation happens in your browser, so nothing is transmitted, stored, or logged.

                        

                        

                            
Does the generator install plugins?

                            
No. It writes configuration only; install @typescript-eslint, eslint-plugin-react, or eslint-plugin-vue yourself before linting.

                        

                        

                            
What does eslint:recommended do?

                            
It enables a curated set of core rules that catch common errors, and it is added to every preset in the generated output.

                        

                        

                            
How is no-console configured?

                            
It is set to warn for the airbnb preset and off for all other presets.

                        

                        

                            
Can I remove the max-line-length rule?

                            
Yes. Set the max line length to 0 and the max-len rule is omitted from the generated config entirely.

                        

                        

                            
Why does enabling TypeScript change no-unused-vars?

                            
The base rule is turned off and replaced with @typescript-eslint/no-unused-vars, which understands TypeScript syntax such as type-only imports.

                        

                    

                


                

                    

                         Related Tools
                    

                    

                                                    
    

        

            
        

        

            
JS Beautifier

                        
Format and beautify JavaScript

                    

    

    

        
            Try it 
        
    


                                                    
    

        

            
        

        

            
JSON Formatter

                        
Format and validate JSON

                    

    

    

        
            Try it 
        
    


                                                    
    

        

            
        

        

            
Regex Tester

                        
Test regular expressions live

                    

    

    

        
            Try it 
        
    


                                                    
    

        

            
        

        

            
Commit Generator

                        
Generate conventional commits

                    

    

    

        
            Try it 
        
    


                                                    
    

        

            
        

        

            
.gitignore Generator

                        
Generate .gitignore files

                    

    

    

        
            Try it 
        
    


                                                    
    

        

            
        

        

            
License Generator

                        
Generate open source licenses

                    

    

    

        
            Try it