AgentSkillsCN

eslint

通过 ESLint 强化代码质量。适用场景：在配置 ESLint 规则、修复 linting 错误，或落实代码质量标准时触发。

SKILL.md
--- frontmatter
name: eslint
description: "Code quality enforcement with ESLint. Trigger: When configuring ESLint rules, fixing linting errors, or enforcing quality standards."
compatibility: "javascript"
license: "Apache 2.0"
metadata:
  version: "1.0"
  skills:
    - conventions
    - typescript
    - javascript
  dependencies:
    eslint: ">=8.0.0 <9.0.0"
  allowed-tools:
    - documentation-reader
    - web-search
    - file-reader

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

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"
  }
}

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

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",
  },
};

Edge Cases

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

References