ESLint & Prettier Development

When to Apply

Activate this skill when:

• Fixing ESLint errors or warnings
• Formatting JavaScript/TypeScript code
• Configuring ESLint or Prettier rules
• Resolving conflicts between ESLint and Prettier
• Setting up linting for new file types

Running Formatters

Check for Issues

# Run ESLint
npx eslint .

# Check specific files
npx eslint "src/**/*.{js,ts,vue}"

# Check Prettier formatting
npx prettier --check .

Fix Issues

# Auto-fix ESLint issues
npx eslint . --fix

# Format with Prettier
npx prettier --write .

# Format specific files
npx prettier --write "src/**/*.{js,ts,vue}"

ESLint 9 Flat Config

ESLint 9 uses flat config format (eslint.config.js):

export default [ js.configs.recommended, ...vue.configs['flat/recommended'], prettier, { files: ['**/*.{ts,tsx,vue}'], languageOptions: { parser: tsParser, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, }, plugins: { '@typescript-eslint': typescript, }, rules: { '@typescript-eslint/no-unused-vars': 'error', }, }, { ignores: ['node_modules/', 'dist/', 'vendor/'], }, ];

Prettier Configuration

Common ESLint Rules

// Vue
'vue/multi-word-component-names': 'off',
'vue/require-default-prop': 'off',

// General
'no-console': ['warn', { allow: ['warn', 'error'] }],
'prefer-const': 'error',

}

VS Code Integration

Package.json Scripts

Ignoring Files

Common Issues and Fixes

ESLint/Prettier Conflicts

Use eslint-config-prettier to disable conflicting ESLint rules:

npm install -D eslint-config-prettier

Add as last item in ESLint config to override conflicting rules.

Vue Single File Components

Ensure Vue plugin is configured for .vue files:

npm install -D eslint-plugin-vue

TypeScript Support

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Common Pitfalls

• Not running formatters before committing
• ESLint and Prettier conflicting on formatting rules
• Missing parser configuration for TypeScript/Vue files
• Using legacy .eslintrc format with ESLint 9
• Not ignoring build output directories
• Forgetting to install required ESLint plugins