ESLint Config Skill

ESLint Config Skill

Purpose

Generate ESLint configuration file for code linting with Vue and TypeScript support using ESLint 9+ flat config format.

🚨 MANDATORY FILE COUNT

This skill MUST create exactly 1 file:

• eslint.config.cjs (preferred format)

🔍 BEFORE GENERATING - CRITICAL RESEARCH REQUIRED

⚠️ HIGH PRIORITY: Verify current ESLint standards to prevent outdated code generation

Required Research Steps:

1. ESLint Version: Verify current ESLint version supports flat config (9.0+)
2. Plugin Compatibility: Check all plugins are compatible with current ESLint version:
   • eslint-plugin-vue - Verify latest version and Vue 3 support
   • @typescript-eslint/​eslint-plugin - Verify compatibility with TypeScript version
   • eslint-plugin-prettier - Check if still recommended or if Prettier should run separately
3. Flat Config Format: Verify flat config is still the recommended format (not legacy .eslintrc.*)
4. Parser Configuration: Verify vue-eslint-parser and @typescript-eslint/​parser configuration syntax
5. Test Framework Detection:
   • Check package.json for test framework dependencies
   • If vitest found: Use globals.vitest or globals.node
   • If jest found: Use globals.jest
   • If both or neither: Prompt user which test framework to use
6. Deprecated Rules: Check if any rules have been deprecated or renamed
7. Module Format: Verify project's module system from package.json "type" field for file format selection

Output

Create the file: eslint.config.cjs

Supported Formats (in order of preference):

1. eslint.config.cjs (preferred - CommonJS format, works with any package.json type)
2. eslint.config.mjs (ES Module format, explicit ESM)
3. eslint.config.js (follows package.json "type" field)

Format Selection Logic:

• Default: Use eslint.config.cjs (most compatible)
• If package.json has "type": "module" and user prefers ESM: Consider .mjs
• .js format requires package.json type to match module system

Example File

See: examples.md in this directory for complete examples and detailed explanations.

⚠️ IMPORTANT: The examples.md file contains December 2025 configurations. Always verify current standards before using.

Execution Checklist

• Research current ESLint version and flat config status (ESLint 9+)
• Verify all plugin versions and compatibility
• Check for deprecated rules or configuration options
• Detect test framework from package.json dependencies
• If test framework unclear, prompt user
• Verify parser configuration syntax for Vue and TypeScript
• Check if legacy .eslintrc.* migration notes needed
• Create eslint.config.cjs with current standards
• Verify file format matches project module system

🛑 BLOCKING VALIDATION CHECKPOINT

STOP! Before proceeding to the next skill, verify:

Automated Verification

Run this command to verify the file exists:

if [ -f "eslint.config.cjs" ] || [ -f "eslint.config.mjs" ] || [ -f "eslint.config.js" ]; then
  echo "✓ ESLint configuration found"
  if [ -f "eslint.config.cjs" ]; then
    echo "✓ Using eslint.config.cjs (preferred format)"
  elif [ -f "eslint.config.mjs" ]; then
    echo "⚠ Using eslint.config.mjs (ESM format)"
  else
    echo "⚠ Using eslint.config.js (verify package.json type field)"
  fi
  
  # Check for legacy format (should not exist)
  if [ -f ".eslintrc.js" ] || [ -f ".eslintrc.json" ] || [ -f ".eslintrc.yml" ]; then
    echo "✗ Legacy .eslintrc.* file found - remove and use flat config only"
    exit 1
  fi
else
  echo "✗ ESLint configuration missing"
  exit 1
fi

Manual Verification

1. ✓ eslint.config.cjs (or .mjs/.js) exists at project root
2. ✓ File uses ESLint 9+ flat config format (array export, not legacy object)
3. ✓ File includes Vue, TypeScript, and Prettier plugins
4. ✓ Test file configuration uses correct globals for detected test framework
5. ✓ No legacy .eslintrc.* files exist in project
6. ✓ All plugin versions are compatible with ESLint version
7. ✓ Configuration follows current ESLint best practices

If Validation Fails

DO NOT PROCEED to the next skill. Create or fix the missing/​incorrect file immediately.

Notes

• ESLint 9+ Flat Config: Uses modern flat config format (not legacy .eslintrc.*)
• Migration from Legacy: If upgrading, remove .eslintrc.* files and use flat config only
• Plugin Compatibility: Always verify plugin versions match ESLint version
• Test Framework Globals: Auto-detected from package.json (Vitest or Jest)
• Console/​Debugger: Allowed in development, warnings in production
• Special Rules: Separate configurations for test files and TypeScript declaration files
• Prettier Integration: ESLint runs Prettier as a rule (verify this is current best practice)
• Module Format: .cjs preferred for maximum compatibility across all project types
• Parser Chain: Vue files use vue-eslint-parser → @typescript-eslint/​parser for TypeScript
• Always verify current standards - ESLint ecosystem evolves rapidly
• Breaking Changes: ESLint major versions may change config format or rule behavior