eslint

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

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

---

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)

---

✅ REQUIRED: Extend Recommended Configs

```javascript

// ✅ 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

```javascript

// ✅ 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

```json

// package.json

{

"scripts": {

"lint": "eslint . --ext .js,.jsx,.ts,.tsx",

"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"

}

}

```

---

• 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

---

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.

---

```javascript

// .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",

},

};

```

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

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