What is ESLint?

What is ESLint?

ESLint is a static code analysis tool for JavaScript and TypeScript. It examines your code without running the application and identifies potential problems, bad practices, and coding-style issues.

In simple terms:

ESLint checks your code and warns you about problems before they become runtime problems.

Example

Suppose you write:

function App() {
    const name = "Syed";

    return <h1>Hello React</h1>;
}

name is declared but never used.

ESLint can report:

'name' is assigned a value but never used.

This helps keep your code clean.

ESLint in Your React Project

You have:

eslint.config.js

This file contains your ESLint configuration.

And your package.json contains a script similar to:

"scripts": {
    "lint": "eslint ."
}

When you run:

npm run lint

ESLint scans your project files and reports problems.

What Can ESLint Detect?

For example:

1. Unused variables

const username = "Syed";

If username isn't used, ESLint can warn you.

2. Incorrect code

const user = {
    name: "Syed"
};

console.log(user.email);

Depending on the configured rules/plugins, ESLint can identify problematic patterns.

3. React-specific issues

With React ESLint plugins, it can check React-related rules and patterns.

4. Coding standards

A team can configure rules such as:

Use semicolons
No unused variables
Consistent code style
Correct React Hooks usage
Avoid certain problematic patterns

ESLint vs TypeScript

These are different tools:

For example:

let age: number = "25";

TypeScript reports the problem because "25" is a string, not a number.

ESLint handles a different category of problems, such as:

const name = "Syed";

when name is never used.

Simple Architecture

Your React Code
      │
      ├──────────────┐
      ▼              ▼
 TypeScript        ESLint
      │              │
      ▼              ▼
 Type Errors      Code Quality
      │              │
      └───────┬──────┘
              ▼
        Fix Problems

So in your React + TypeScript + Vite project:

Vite       → Runs and builds your application
React      → Builds the UI
TypeScript → Provides type safety
ESLint     → Checks code quality