Writing Great Code Doesn’t Happen by Accident: A Practical Guide to ESLint in React Projects

1. Software Development Is Not Just “Code That Works”

If you’ve ever heard this in your team:

“It runs, just merge it.”

Then you probably know why many codebases become:

• Hard to maintain
• Full of small, annoying bugs
• Inconsistent in style, making developers reluctant to touch each other’s code

In professional software development, code must be consistent, readable, and maintainable—not just “working.” That’s where ESLint becomes a powerful ally.

2. What Is ESLint and Why Should You Use It?

ESLint is a static code analysis tool for JavaScript and TypeScript. Created by Nicholas C. Zakas in 2013, it offers a highly customizable alternative to earlier tools like JSLint and JSHint.

Why ESLint Became the Standard?

• Highly configurable: Enable, disable, or create rules tailored to your needs

// .eslintrc.js
module.exports = {
  rules: {
    // ✅ Enable a rule
    "no-console": "warn",

    // ❌ Disable a rule
    "no-alert": "off",

    // 🎯 Customize a rule with specific options
    "max-len": ["error", { code: 100, tabWidth: 2, ignoreUrls: true }],
  },
};

• Plugin ecosystem: Supports React, Vue, TypeScript, and more.
• Autofix capability: ESLint can automatically fix many issues.

yarn eslint src --ext .ts,.tsx --fix

• IDE integration: Works seamlessly with editors like VSCode.

Install the ESLint extension in VSCode:

1. Open Extensions (Ctrl+Shift+X or Cmd+Shift+X)
2. Search for “ESLint” by Microsoft
3. Click Install

• Community and adoption:

ESLint is the #1 JavaScript linter with over 58M downloads/week. Used by Microsoft, Airbnb, Netflix, and Facebook.

What Does ESLint Help With?

Issue	Example	Explanation
Unused variables	const temp = 123;	Wastes memory and adds clutter
Loose equality	if (a == b)	Can lead to bugs due to type coercion
Missing semicolons	const x = 1	Can break JS in non-strict mode
Inconsistent style	function greet() {}	Breaks codebase consistency
Redundant logic	if (x === true) return true;	Can be simplified to return x;

Is ESLint Only for Senior Developers?

Absolutely not. Junior developers benefit the most:

• Learn good coding habits early
• Avoid common mistakes before committing
• Write code that’s consistent with the team

Are There Alternatives?

Yes. While ESLint dominates, here are others:

• JSLint / JSHint: ESLint’s predecessors, now outdated
• Prettier: Handles formatting only. Use with ESLint
• Rome: All-in-one tool, still maturing
• StandardJS: Zero-config ESLint setup

3. How to Set Up ESLint for a React (TypeScript) Project

Create a React + TypeScript Project

npx create-react-app my-app --template typescript
cd my-app

Install ESLint and Prettier

yarn add -D eslint prettier

# Integrate ESLint and Prettier
yarn add -D eslint-config-prettier eslint-plugin-prettier

# TypeScript support
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

# React support
yarn add -D eslint-plugin-react eslint-plugin-react-hooks

Create .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'google',
    'prettier',
  ],
  plugins: ['react', '@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: { jsx: true },
  },
  settings: {
    react: { version: 'detect' },
  },
  rules: {
    'prettier/prettier': 'error',
    'no-console': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn',
  },
};

Create .prettierrc

{
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"tabWidth": 2
}

Run Linting

yarn eslint src --ext .ts,.tsx --fix

4. Standardize Your Style: Google, Airbnb, or Custom?

• Google Style: Simple, beginner-friendly
• Airbnb Style: Strict, detailed
• Custom Style: Tailored to your team

Ex: Config eslint with Google Style:

yarn add -D eslint-config-google

5. VSCode & Git Hook: Lint Anytime, Anywhere

VSCode Settings .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Git Hooks Integration

yarn add -D husky lint-staged
npx husky install
npx husky add .husky/pre-commit "yarn lint-staged"

Add to package.json:

"lint-staged": {
  "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
}

6. Common ESLint Warnings and How to Fix Them

1. Unused Variables

// ❌
const temp = 123;

// ✅
const temp = 123;
console.log(temp);

2. Loose Equality

Rule: eqeqeq

// ❌
if (value == 1) {}

// ✅
if (value === 1) {}

3. Missing Function Return Type

Rule: @typescript-eslint/explicit-function-return-type

// ❌
const double = (x) => x * 2;

// ✅
const double = (x: number): number => x * 2;

4. Console Logs in Code

Rule: no-console

// ❌
console.log('debugging');

// ✅
useLogger('debugging'); // or remove it

5. Incorrect useEffect Dependencies

Rule: react-hooks/exhaustive-deps

// ❌
useEffect(() => {
  doSomething();
}, []);

// ✅
useEffect(() => {
  doSomething();
}, [doSomething]);

6. Missing key Prop in List Rendering

Rule: react/jsx-key

// ❌
{items.map(item => <div>{item.name}</div>)}

// ✅
{items.map(item => <div key={item.id}>{item.name}</div>)}

7. Overuse of any Type

Rule: @typescript-eslint/no-explicit-any

// ❌
const user: any = getUser();

// ✅
interface User { id: number; name: string }
const user: User = getUser();

8. Empty Functions

Rule: @typescript-eslint/no-empty-function

// ❌
function noop() {}

// ✅
function noop(): void {
  // intentionally empty
}

9. Inconsistent Quotes

Rule: quotes

// ❌
const name = "Alex";

// ✅
const name = 'Alex';

10. Too Many Nested Blocks

Rule: max-depth

// ❌
if (a) {
  if (b) {
    if (c) {
      // deep
    }
  }
}

// ✅
if (!a || !b || !c) return;
// do something

Visit here for more rules: https://eslint.org/docs/latest/rules

7. Conclusion: Writing Clean Code Is Part of the Process

Clean, readable code → easier maintenance → fewer bugs → more trust from your users.

ESLint is more than just a tool — it’s a mindset:

• Don’t write sloppy code
• Respect your teammates
• Build software like a true engineer

✅ Tip: Set up ESLint before writing any code. It saves time, prevents mistakes early, and keeps your team aligned from day one.