ESLint: Clean code starts here

ESLint is your project's first line of defense against bugs, code smells, and stylistic chaos.

It's a pluggable linting tool for JavaScript and TypeScript that analyzes your code to catch problems before runtime.

Think of it as "spellcheck + grammar + writing style" for your codebase.

🧪 What does ESLint catch?

• Missing variables
• Unused imports
• Dangerous patterns (e.g. == vs ===)
• Code style violations
• Inconsistent naming
• Bugs like shadowed variables, or unreachable code

⚙️ Getting started

Install ESLint:

npm install --save-dev eslint
npx eslint --init

You'll be asked:

• Framework (React, Vue, etc.)
• Language (JS or TS)
• Style guide (Airbnb, Standard, etc.)

Then ESLint generates a config file:

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  plugins: ['react'],
  rules: {
    'no-unused-vars': 'warn',
    'eqeqeq': 'error',
  },
};

You can lint your project with:

npx eslint src --fix

🧩 Common configs & plugins

• Airbnb: Opinionated, strict, widely used.
• Prettier: For formatting (used _with_ ESLint, not instead).
• TypeScript: @typescript-eslint plugin.
• React: eslint-plugin-react, eslint-plugin-react-hooks
• Import rules: eslint-plugin-import for detecting bad imports.
• Tailwind: eslint-plugin-tailwindcss

Example config with Prettier:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

extends: [
  'plugin:prettier/recommended',
],

🛠️ Running lint automatically

Add a script:

"scripts": {
  "lint": "eslint . --ext .js,.ts,.tsx",
  "lint:fix": "eslint . --fix"
}

Or use Husky + lint-staged to lint on commit:

npm install --save-dev husky lint-staged

"lint-staged": {
  "*.{js,ts,tsx}": "eslint --fix"
}

📋 Common rules you should enable

rules: {
  'no-console': 'warn',
  'prefer-const': 'error',
  'no-var': 'error',
  'no-unused-vars': 'warn',
  'eqeqeq': 'error',
  'curly': 'error',
}

📏 ESLint Vs prettier

Use them together: Prettier formats, ESLint validates.

✅ Conclusions

ESLint is essential for any serious JavaScript/TypeScript project. It:

• Improves consistency
• Prevents bugs
• Enforces your team's standards
• Saves time in code reviews

Start with eslint:recommended, add plugins as needed, and always run it in CI/CD.

Your future self (and teammates) will thank you.