# ESLint — The Pluggable JavaScript and TypeScript Linter > ESLint is the most widely used linter for JavaScript and TypeScript. It statically analyzes your code to find problems, enforce coding standards, and automatically fix many issues. Its plugin system supports React, Vue, Node.js, and more. ## Install Save in your project root: # ESLint — The Pluggable JavaScript and TypeScript Linter ## Quick Use ```bash # Initialize ESLint in your project (flat config) npm init @eslint/config@latest # Run ESLint npx eslint src/ # Auto-fix fixable problems npx eslint src/ --fix ``` ## Introduction ESLint is the standard static analysis tool for JavaScript and TypeScript codebases. Created by Nicholas C. Zakas in 2013, it identifies problematic patterns, enforces coding conventions, and automatically fixes many issues. Unlike formatters that only handle style, ESLint catches actual bugs — unused variables, unreachable code, type coercion issues, and more. With 27,000+ GitHub stars and billions of npm downloads, ESLint is used by virtually every professional JavaScript project. Its pluggable architecture supports hundreds of rules for React, Vue, Angular, Node.js, TypeScript, accessibility, and security. ## What ESLint Does ESLint parses your JavaScript/TypeScript code into an AST and runs a set of rules against it. Each rule checks for a specific pattern — from stylistic preferences to potential runtime errors. Rules can report warnings or errors, and many can automatically fix the code. ## Architecture Overview ``` [Source Code] --> [Parser] espree (default) or @typescript-eslint/parser | [AST (ESTree format)] | +--------+--------+ | | | [Rule 1] [Rule 2] [Rule N] no-unused eqeqeq custom -vars rules | | | +--------+--------+ | [Report: errors, warnings] [Auto-fix: applied patches] ``` ## Self-Hosting & Configuration ```javascript // eslint.config.js — ESLint v9 flat config import js from "@eslint/js"; import tseslint from "typescript-eslint"; import react from "eslint-plugin-react"; export default [ js.configs.recommended, ...tseslint.configs.recommended, { files: ["**/*.{ts,tsx}"], plugins: { react }, rules: { "no-unused-vars": "warn", "no-console": ["error", { allow: ["warn", "error"] }], "react/prop-types": "off" } }, { ignores: ["dist/", "node_modules/"] } ]; ``` ## Key Features - **Pluggable Rules** — enable, disable, or configure any rule individually - **Auto-Fix** — many rules can automatically fix the code they flag - **TypeScript Support** — first-class TS linting via typescript-eslint - **Framework Plugins** — eslint-plugin-react, eslint-plugin-vue, and hundreds more - **Flat Config** — new simplified configuration system in ESLint v9 - **Custom Rules** — write your own rules for project-specific patterns - **Editor Integration** — real-time feedback in VS Code, IntelliJ, and others - **CI Ready** — exit codes and formatters for CI pipeline integration ## Comparison with Similar Tools | Feature | ESLint | Biome | deno lint | oxlint | StandardJS | |---|---|---|---|---|---| | Language | JavaScript | Rust | Rust | Rust | JavaScript | | Speed | Moderate | Very Fast | Fast | Very Fast | Moderate | | Plugin System | Very Rich | Growing | No | Partial | No | | Configurability | Very High | Moderate | Low | Moderate | Zero | | TypeScript | Via Plugin | Built-in | Built-in | Built-in | No | | Auto-fix | Yes | Yes | No | Yes | Yes | | Ecosystem | Dominant | Emerging | Deno only | Emerging | Niche | ## FAQ **Q: What is the difference between ESLint and Prettier?** A: ESLint finds code quality issues (bugs, anti-patterns). Prettier handles code formatting (indentation, line length). Use both together — Prettier for formatting, ESLint for logic. Use eslint-config-prettier to prevent rule conflicts. **Q: How do I migrate to flat config (eslint.config.js)?** A: ESLint v9 uses flat config by default. The @eslint/migrate-config tool can automatically convert your .eslintrc file. Flat config is simpler — it uses native JS imports instead of string-based extends. **Q: Should I switch to Biome or oxlint?** A: If you use mostly built-in and typescript-eslint rules, Biome is faster and simpler. If you rely on framework-specific plugins (React hooks, Vue, accessibility), ESLint remains essential for its plugin ecosystem. **Q: How do I lint TypeScript with ESLint?** A: Install typescript-eslint and configure it in your flat config. It provides type-aware linting rules that can catch issues like unsafe any usage and floating promises. ## Sources - GitHub: https://github.com/eslint/eslint - Documentation: https://eslint.org - Created by Nicholas C. Zakas - License: MIT --- Source: https://tokrepo.com/en/workflows/e969a624-366b-11f1-9bc6-00163e2b0d79 Author: AI Open Source