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