ESLint Skill

Overview

This skill provides guidance for configuring and using ESLint to enforce code quality, consistency, and best practices in JavaScript and TypeScript projects.

Objective

Enable developers to maintain code quality through automated linting with proper ESLint configuration, rules, and integration with development workflow.

When to Use

Use this skill when:

• Configuring ESLint for JavaScript/TypeScript projects
• Setting up linting rules and plugins
• Fixing linting errors in code
• Integrating ESLint with editors and CI/CD
• Enforcing code quality standards

Don't use this skill for:

• Code formatting only (use prettier skill)
• TypeScript type checking (use typescript skill)
• Build configuration (use vite or webpack skills)

Critical Patterns

✅ REQUIRED: Extend Recommended Configs

// ✅ CORRECT: Extend recommended configs
module.exports = {
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
};

// ❌ WRONG: Starting from scratch
module.exports = {
  rules: {
    /* manually defining everything */
  },
};

✅ REQUIRED: Use TypeScript Parser for TS Projects

// ✅ CORRECT: TypeScript parser
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
};

// ❌ WRONG: Default parser for TypeScript
module.exports = {
  // No parser specified for .ts files
};

✅ REQUIRED: Run in CI/CD

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
  }
}

Conventions

• Use ESLint with TypeScript parser for TypeScript projects
• Extend recommended configurations
• Customize rules to match project standards
• Integrate with editor for real-time feedback
• Run ESLint in CI/CD pipeline

Decision Tree

TypeScript project? → Use @typescript-eslint/parser and @typescript-eslint/recommended.

React project? → Add plugin:react/recommended and plugin:react-hooks/recommended.

Need auto-fix? → Run eslint --fix, configure editor to fix on save.

Custom rule needed? → Add to rules object with "error", "warn", or "off".

Disable rule for line? → Use // eslint-disable-next-line rule-name.

Monorepo? → Use multiple .eslintrc files or override patterns.

Conflicting with Prettier? → Use eslint-config-prettier to disable formatting rules.

Example

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "react", "react-hooks"],
  rules: {
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/explicit-function-return-type": "warn",
    "react/prop-types": "off",
  },
};

Edge Cases

• Handle monorepo configurations
• Configure for multiple environments (node, browser)
• Manage rule exceptions with inline comments
• Balance strictness with developer experience

References

• https://eslint.org/docs/latest/
• https://typescript-eslint.io/