Comprehensive ESLint agent for JavaScript/TypeScript code quality. Use when setting up ESLint, configuring linting rules, analyzing code for issues, fixing violations, or integrating ESLint into development workflows. Triggers on requests involving code quality, linting, static analysis, or ESLint configuration for JavaScript, TypeScript, React, or Node.js projects.
Sets up and configures ESLint for JavaScript/TypeScript projects, analyzes code for issues, and auto-fixes violations. Triggers on requests about code quality, linting configuration, or static analysis for JS/TS/React/Node.js projects.
/plugin marketplace add el-feo/ai-context/plugin install js-ts@jebs-dev-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/eslint.config.examples.jsreferences/custom_rules.mdreferences/migration_guide.mdreferences/rule_reference.mdreferences/type_aware_linting.mdESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript and TypeScript code. This skill enables Claude to help you set up, configure, and effectively use ESLint to maintain code quality across your projects.
package.json file (run npm init if needed)Automated Setup (Recommended):
npm init @eslint/config@latest
This interactive setup will ask about your project and create an eslint.config.js file.
Manual Setup:
# Install ESLint packages
npm install --save-dev eslint@latest @eslint/js@latest
# Create configuration file
touch eslint.config.js
The new flat config format (ESLint 9.0+) uses eslint.config.js:
import { defineConfig } from "eslint/config";
import js from "@eslint/js";
export default defineConfig([
{
files: ["**/*.js"],
plugins: { js },
extends: ["js/recommended"],
rules: {
"no-unused-vars": "warn",
"no-undef": "warn"
}
}
]);
# Lint a single file
npx eslint yourfile.js
# Lint a directory
npx eslint src/
# Lint with auto-fix
npx eslint src/ --fix
npm init @eslint/config@latest
Select options:
npm install --save-dev eslint@latest @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript-eslint
Configuration for TypeScript:
import { defineConfig } from 'eslint/config';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
export default defineConfig(
eslint.configs.recommended,
...tseslint.configs.recommended
);
npm install --save-dev \
eslint \
@typescript-eslint/parser \
@typescript-eslint/eslint-plugin \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-jsx-a11y \
typescript-eslint
"off" or 0 - Disable the rule"warn" or 1 - Warning (doesn't affect exit code)"error" or 2 - Error (exit code will be 1)Basic Rules:
export default defineConfig([
{
rules: {
// Enforce semicolons
"semi": ["error", "always"],
// Enforce const where possible
"prefer-const": "error",
// Warn on unused variables
"no-unused-vars": "warn",
// No console.log in production
"no-console": ["error", { allow: ["warn", "error"] }],
// Enforce consistent quotes
"quotes": ["error", "single"],
// Require === instead of ==
"eqeqeq": ["error", "always"]
}
}
]);
TypeScript-Specific Rules:
export default defineConfig([
{
files: ["**/*.ts", "**/*.tsx"],
rules: {
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/explicit-function-return-type": ["error", {
allowExpressions: true
}],
"@typescript-eslint/naming-convention": ["error", {
selector: "interface",
format: ["PascalCase"],
custom: {
regex: "^I[A-Z]",
match: false
}
}]
}
}
]);
Disable rules inline:
/* eslint-disable no-console */
console.log('This is allowed');
/* eslint-enable no-console */
// Disable for single line
console.log('Debug'); // eslint-disable-line no-console
// Disable next line
// eslint-disable-next-line no-console
console.log('Debug');
// Disable specific rules
alert('foo'); // eslint-disable-line no-alert, no-undef
Best Practices for Inline Disables:
Use sparingly with clear justification
Document the reason:
// eslint-disable-next-line no-console -- Debugging production issue #1234
console.log('User data:', userData);
Prefer configuration file changes over inline disables
Create follow-up tasks for temporary disables
export default defineConfig([
{
// Only lint TypeScript files in src/
files: ["src/**/*.ts", "src/**/*.tsx"],
// Ignore test files for certain rules
ignores: ["**/*.test.ts", "**/*.spec.ts"]
}
]);
export default defineConfig([
{
ignores: [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/.next/**",
"**/coverage/**"
]
},
// ... rest of config
]);
ESLint supports extending from popular configurations:
import { defineConfig } from "eslint/config";
import js from "@eslint/js";
import globals from "globals";
export default defineConfig([
js.configs.recommended, // ESLint recommended rules
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
}
]);
Popular Shared Configs:
eslint:recommended - ESLint's recommended rules@typescript-eslint/recommended - TypeScript recommended@typescript-eslint/strict - Stricter TypeScript rulesplugin:react/recommended - React best practicesplugin:react-hooks/recommended - React Hooks rulesESLint can automatically fix many issues:
# Fix all auto-fixable issues
npx eslint src/ --fix
# Show what would be fixed (dry run)
npx eslint src/ --fix-dry-run
Auto-fixable rules include:
Non-fixable issues require manual intervention:
Complete Configuration:
import { defineConfig } from 'eslint/config';
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
export default defineConfig([
{ ignores: ['dist'] },
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
project: './tsconfig.json'
}
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true }
],
'@typescript-eslint/no-unused-vars': ['error', {
argsIgnorePattern: '^_',
varsIgnorePattern: '^_'
}]
}
}
]);
import { defineConfig } from 'eslint/config';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import globals from 'globals';
export default defineConfig([
eslint.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.ts'],
languageOptions: {
globals: globals.node
},
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
'no-console': 'off' // Console is fine in Node.js
}
}
]);
export default defineConfig([
// Global ignores
{ ignores: ['**/dist/**', '**/build/**'] },
// Frontend package
{
files: ['packages/frontend/**/*.{ts,tsx}'],
languageOptions: {
globals: globals.browser
},
// Frontend-specific rules
},
// Backend package
{
files: ['packages/backend/**/*.ts'],
languageOptions: {
globals: globals.node
},
// Backend-specific rules
}
]);
Install Extension:
Workspace Settings (.vscode/settings.json):
{
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
GitHub Actions:
name: ESLint
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm ci
- run: npx eslint .
Pre-commit Hook (with Husky):
npm install --save-dev husky lint-staged
# Add to package.json
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"]
}
}
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"lint:staged": "lint-staged"
}
}
"Cannot find module 'eslint/config'"
npm install eslint@latest"Parsing error: Cannot find module '@typescript-eslint/parser'"
npm install --save-dev @typescript-eslint/parserRules not being applied
eslint.config.js)Slow linting in large projects
--cache flag: npx eslint --cache .--max-warnings 0 to fail on warnings in CIFor project-specific patterns, see references/custom_rules.md.
For advanced TypeScript checks requiring type information, see references/type_aware_linting.md.
For projects using the legacy .eslintrc.* format, see references/migration_guide.md.
custom_rules.md - Guide to creating custom ESLint rulestype_aware_linting.md - TypeScript type-aware linting configurationmigration_guide.md - Migrating from ESLint 8.x to 9.x flat configrule_reference.md - Comprehensive rule reference with exampleseslint.config.js - Complete example configuration for various project types.eslintignore - Example ignore file patternsThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.