JavaScript Tooling

ESLint

Find and fix problems in your JavaScript code

Find videos you like?

Save to resource drawer for future reference!

What is ESLint?

ESLint is a static code analysis tool that finds and fixes problems in your JavaScript code. It catches bugs, enforces code style, and helps teams maintain consistent code quality across projects.

Find Errors

Detect bugs before runtime

Enforce Style

Consistent code formatting

Auto Fix

Fix issues automatically

Example 1: Installing ESLint

Quick setup guide

# Install ESLint
npm install --save-dev eslint

# Initialize configuration
npx eslint --init

# You'll be asked:
# 1. How would you like to use ESLint?
#    → To check syntax and find problems
# 2. What type of modules?
#    → JavaScript modules (import/export)
# 3. Which framework?
#    → React / Vue / None
# 4. Does your project use TypeScript?
#    → No / Yes
# 5. Where does your code run?
#    → Browser / Node
# 6. What format for config file?
#    → JavaScript / JSON / YAML

# Run ESLint
npx eslint yourfile.js

# Fix automatically
npx eslint yourfile.js --fix

Example 2: ESLint Configuration

.eslintrc.js or .eslintrc.json

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  
  extends: [
    'eslint:recommended',        // ESLint's recommended rules
    'plugin:react/recommended',  // React rules
    'plugin:@typescript-eslint/recommended'  // TypeScript
  ],
  
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  
  rules: {
    // Customize rules
    'no-console': 'warn',           // Warn on console.log
    'no-unused-vars': 'error',      // Error on unused variables
    'semi': ['error', 'always'],    // Require semicolons
    'quotes': ['error', 'single'],  // Single quotes only
    'indent': ['error', 2],         // 2 spaces indentation
    'max-len': ['warn', { code: 80 }],  // Line length warning
    'no-var': 'error',              // No var, use let/const
    'prefer-const': 'error',        // Use const when possible
    'eqeqeq': 'error',              // Require === instead of ==
    'curly': 'error',               // Require curly braces
    'arrow-body-style': ['error', 'as-needed']
  },
  
  settings: {
    react: {
      version: 'detect'  // Auto-detect React version
    }
  }
};

ESLint Rule Levels

Error, warning, or off

"error"or2

Triggers an error. Exits with error code. Blocks CI/CD pipeline.

"warn"or1

Shows a warning. Doesn't fail build. Good for style issues.

"off"or0

Disables the rule completely. Rule won't run.

Common ESLint Rules

Popular rules to enable

no-unused-vars

Disallow unused variables

"no-unused-vars": "error"

no-undef

Disallow undefined variables

"no-undef": "error"

eqeqeq

Require === and !== instead of == and !=

"eqeqeq": "error"

no-console

Warn about console.log statements

"no-console": "warn"

no-var

Require let or const instead of var

"no-var": "error"

prefer-const

Suggest const for variables never reassigned

"prefer-const": "error"

Example 3: Ignoring Files

.eslintignore file

# .eslintignore
# Similar to .gitignore

# Dependencies
node_modules/
bower_components/

# Build output
dist/
build/
*.min.js

# Config files
*.config.js
webpack.config.js

# Test coverage
coverage/

# Specific files
public/vendor/

# Inline ignore (in code)
// eslint-disable-next-line no-console
console.log('Debug info');

/* eslint-disable no-console */
console.log('Line 1');
console.log('Line 2');
/* eslint-enable no-console */

Integration with Tools

Use ESLint everywhere

📝 VS Code Extension

Install "ESLint" extension - shows errors while you type

Settings: "editor.codeActionsOnSave": {'source.fixAll.eslint': true}

📦 package.json Scripts

Add lint scripts to your project

"lint": "eslint src/", "lint:fix": "eslint src/ --fix"

🔄 Git Hooks (Husky)

Run ESLint before commits

npx husky add .husky/pre-commit "npm run lint"

🚀 CI/CD Pipeline

Run in GitHub Actions, GitLab CI

- run: npm run lint

ESLint Best Practices

Use ESLint effectively

✅ Do

• Use eslint:recommended as base
• Run ESLint in CI/CD pipeline
• Enable auto-fix in editor
• Share config across team
• Fix errors, not just warnings
• Use popular configs (Airbnb, Standard)
• Document rule changes
• Review ESLint output regularly

❌ Don't

• Disable rules without good reason
• Use eslint-disable everywhere
• Ignore warnings completely
• Skip ESLint in CI
• Make config too strict
• Mix incompatible configs
• Forget to update ESLint
• Have different configs per developer

Key Takeaways

🔍

Find Issues Early

Catch bugs before runtime
Static code analysis

✨

Enforce Style

Consistent code across team
Configurable rules

🔧

Auto-Fix

--fix flag repairs issues
Save time fixing manually

🚀

Integrations

Editor, Git hooks, CI/CD
Catch issues everywhere

Code Quality Essential

ESLint is essential for professional JavaScript development. It prevents bugs, enforces best practices, and keeps code consistent across teams!

Previous Topic

Babel

Transpiling modern JavaScript for browser compatibility.

Next Topic

Prettier

Automatic code formatting.

Ask a Question

Have a question about ESLint? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Tooling

ESLint

Find and fix problems in your JavaScript code

Find videos you like?

Save to resource drawer for future reference!

What is ESLint?

Find Errors

Detect bugs before runtime

Enforce Style

Consistent code formatting

Auto Fix

Fix issues automatically

Example 1: Installing ESLint

Quick setup guide

# Install ESLint
npm install --save-dev eslint

# Initialize configuration
npx eslint --init

# You'll be asked:
# 1. How would you like to use ESLint?
#    → To check syntax and find problems
# 2. What type of modules?
#    → JavaScript modules (import/export)
# 3. Which framework?
#    → React / Vue / None
# 4. Does your project use TypeScript?
#    → No / Yes
# 5. Where does your code run?
#    → Browser / Node
# 6. What format for config file?
#    → JavaScript / JSON / YAML

# Run ESLint
npx eslint yourfile.js

# Fix automatically
npx eslint yourfile.js --fix

Example 2: ESLint Configuration

.eslintrc.js or .eslintrc.json

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  
  extends: [
    'eslint:recommended',        // ESLint's recommended rules
    'plugin:react/recommended',  // React rules
    'plugin:@typescript-eslint/recommended'  // TypeScript
  ],
  
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  
  rules: {
    // Customize rules
    'no-console': 'warn',           // Warn on console.log
    'no-unused-vars': 'error',      // Error on unused variables
    'semi': ['error', 'always'],    // Require semicolons
    'quotes': ['error', 'single'],  // Single quotes only
    'indent': ['error', 2],         // 2 spaces indentation
    'max-len': ['warn', { code: 80 }],  // Line length warning
    'no-var': 'error',              // No var, use let/const
    'prefer-const': 'error',        // Use const when possible
    'eqeqeq': 'error',              // Require === instead of ==
    'curly': 'error',               // Require curly braces
    'arrow-body-style': ['error', 'as-needed']
  },
  
  settings: {
    react: {
      version: 'detect'  // Auto-detect React version
    }
  }
};

ESLint Rule Levels

Error, warning, or off

"error"or2

Triggers an error. Exits with error code. Blocks CI/CD pipeline.

"warn"or1

Shows a warning. Doesn't fail build. Good for style issues.

"off"or0

Disables the rule completely. Rule won't run.

Common ESLint Rules

Popular rules to enable

no-unused-vars

Disallow unused variables

"no-unused-vars": "error"

no-undef

Disallow undefined variables

"no-undef": "error"

eqeqeq

Require === and !== instead of == and !=

"eqeqeq": "error"

no-console

Warn about console.log statements

"no-console": "warn"

no-var

Require let or const instead of var

"no-var": "error"

prefer-const

Suggest const for variables never reassigned

"prefer-const": "error"

Example 3: Ignoring Files

.eslintignore file

# .eslintignore
# Similar to .gitignore

# Dependencies
node_modules/
bower_components/

# Build output
dist/
build/
*.min.js

# Config files
*.config.js
webpack.config.js

# Test coverage
coverage/

# Specific files
public/vendor/

# Inline ignore (in code)
// eslint-disable-next-line no-console
console.log('Debug info');

/* eslint-disable no-console */
console.log('Line 1');
console.log('Line 2');
/* eslint-enable no-console */

Integration with Tools

Use ESLint everywhere

📝 VS Code Extension

Install "ESLint" extension - shows errors while you type

Settings: "editor.codeActionsOnSave": {'source.fixAll.eslint': true}

📦 package.json Scripts

Add lint scripts to your project

"lint": "eslint src/", "lint:fix": "eslint src/ --fix"

🔄 Git Hooks (Husky)

Run ESLint before commits

npx husky add .husky/pre-commit "npm run lint"

🚀 CI/CD Pipeline

Run in GitHub Actions, GitLab CI

- run: npm run lint

ESLint Best Practices

Use ESLint effectively

✅ Do

• Use eslint:recommended as base
• Run ESLint in CI/CD pipeline
• Enable auto-fix in editor
• Share config across team
• Fix errors, not just warnings
• Use popular configs (Airbnb, Standard)
• Document rule changes
• Review ESLint output regularly

❌ Don't

• Disable rules without good reason
• Use eslint-disable everywhere
• Ignore warnings completely
• Skip ESLint in CI
• Make config too strict
• Mix incompatible configs
• Forget to update ESLint
• Have different configs per developer

Key Takeaways

🔍

Find Issues Early

Catch bugs before runtime
Static code analysis

✨

Enforce Style

Consistent code across team
Configurable rules

🔧

Auto-Fix

--fix flag repairs issues
Save time fixing manually

🚀

Integrations

Editor, Git hooks, CI/CD
Catch issues everywhere

Code Quality Essential

ESLint is essential for professional JavaScript development. It prevents bugs, enforces best practices, and keeps code consistent across teams!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Babel

Prettier

JavaScript Code Editor

Building Your Learning Module...

ESLint

What is ESLint?

Find Errors

Enforce Style

Auto Fix

no-unused-vars

no-undef

eqeqeq

no-console

no-var

prefer-const

📝 VS Code Extension

📦 package.json Scripts

🔄 Git Hooks (Husky)

🚀 CI/CD Pipeline

✅ Do

❌ Don't

Key Takeaways

Find Issues Early

Enforce Style

Auto-Fix

Integrations

Code Quality Essential

Babel

Prettier

JavaScript Code Editor

ESLint

What is ESLint?

Find Errors

Enforce Style

Auto Fix

no-unused-vars

no-undef

eqeqeq

no-console

no-var

prefer-const

📝 VS Code Extension

📦 package.json Scripts

🔄 Git Hooks (Husky)

🚀 CI/CD Pipeline

✅ Do

❌ Don't

Key Takeaways

Find Issues Early

Enforce Style

Auto-Fix

Integrations

Code Quality Essential