How to set up ESLint with React?

Install ESLint and eslint-plugin-react, then configure it in your eslint.config.js to enable React-specific rules. The README notes that while ESLint natively parses JSX, React semantics require the plugin for full functionality.

ESLint vs Prettier: what's the difference?

ESLint is a linter that finds problematic patterns, while Prettier is a code formatter. They complement each other; use eslint-config-prettier to disable conflicting rules and run both tools for comprehensive code quality.

Why does ESLint break my build after an update?

ESLint's semantic versioning policy allows minor releases to fix bugs that report more errors, which can break lint builds. To avoid this, pin versions with tilde (~) in package.json and test updates carefully.

How to disable a specific rule in ESLint?

In your eslint.config.js, set the rule to 'off' or 0 in the rules object. For example, add 'no-console': 'off' to turn off console logging warnings, as shown in the configuration example.

Does ESLint work with Vue.js?

Yes, but not natively; you need plugins like eslint-plugin-vue. ESLint's pluggable architecture allows integration, but setup involves additional configuration and dependency on community-maintained plugins.

How to ignore files in ESLint?

Use an .eslintignore file or configure file patterns in eslint.config.js with the 'files' key. This allows excluding directories like node_modules or specific files from linting.

Open-Awesome

ESLint

MITJavaScriptv10.7.0

A pluggable linting utility for identifying and reporting patterns in JavaScript and ECMAScript code.

Visit Website GitHub

27.4k stars5.1k forks0 contributors

What is ESLint?

ESLint is a static code analysis tool that identifies and reports problematic patterns in JavaScript and ECMAScript code. It helps developers enforce coding standards, catch errors early, and maintain consistent code quality across projects. Unlike formatters, it focuses on logical and stylistic issues rather than code formatting.

Target Audience

JavaScript and ECMAScript developers, teams enforcing coding standards, and projects integrating linting into CI/CD pipelines. It's essential for anyone writing modern JavaScript who wants to improve code reliability and maintainability.

Value Proposition

Developers choose ESLint for its pluggable architecture, extensive rule set, and precise AST-based analysis. It offers greater flexibility and configurability compared to alternatives like JSLint and JSHint, with strong community support and integration with modern tools.

Overview

Find and fix problems in your JavaScript code.

Use Cases

Best For

Enforcing consistent coding standards across JavaScript projects
Catching common errors and anti-patterns early in development
Integrating linting into CI/CD pipelines for automated code reviews
Customizing lint rules for specific team or project requirements
Analyzing JSX syntax in React applications with complementary plugins
Supporting modern ECMAScript features and experimental syntax via parsers

Not Ideal For

Projects that only need automatic code formatting without logical error analysis
Teams preferring zero-configuration, opinionated tools over customizable linting setups
Environments where build time must be minimized and static analysis adds unacceptable overhead
Projects using cutting-edge JavaScript features not yet stage 4, without willingness to integrate Babel or other parsers

Pros & Cons

Pros

Pluggable Architecture

Every rule is a plugin, allowing developers to extend functionality and add custom rules at runtime, as emphasized in the project's philosophy.

AST-Based Precision

Uses the Espree parser to create an Abstract Syntax Tree for accurate detection of code patterns, ensuring reliable analysis.

Comprehensive Rule Set

Offers a wide array of built-in rules with configurable error levels (off, warn, error), providing fine-grained control over code quality.

Modern ECMAScript Support

Fully supports ECMAScript standards from ES3 to the latest stage 4 specifications, with configurable syntax settings for flexibility.

JSX and Framework Integration

Natively parses JSX syntax and integrates with plugins for React, TypeScript, and Babel, though full semantics require additional plugins.

Cons

Complex Configuration

Requires setting up and maintaining `eslint.config.js` files, which can be daunting for new users and adds overhead for simple projects.

Limited Experimental Support

Core rules only support finalized ECMAScript standards; for experimental features, users must rely on third-party parsers like Babel, increasing setup complexity.

Breaking Changes in Releases

Minor releases may report more linting errors due to bug fixes, as per the semantic versioning policy, potentially breaking builds and requiring careful version management.

Ecosystem Fragmentation

Advanced functionality for frameworks and tools depends on community plugins, which can vary in quality, maintenance, and compatibility, adding risk.

Open Source Alternative To

ESLint is an open-source alternative to the following products:

JSLint

JSLint is a code quality tool for JavaScript that analyzes source code to identify problematic patterns and enforce strict coding conventions.

JSHint

JSHint is a static code analysis tool for JavaScript that helps detect errors and potential problems in JavaScript code by enforcing coding standards.

Frequently Asked Questions

Related Projects

freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.

Stars452,589

Forks45,645

Last commit18 hours ago

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars210,113

Forks33,695

Last commit1 year ago

Next.js

The React Framework

Stars141,095

Forks31,499

Last commit5 hours ago

electron

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars122,151

Forks17,331

Last commit8 hours ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub