ESLint Configuration

CPR uses ESLint 9.x with the flat config format, integrated with Nuxt via @nuxt/eslint and with Prettier via eslint-plugin-prettier.

Configuration File

The ESLint configuration is in eslint.config.mjs at the project root:

// eslint.config.mjs
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default withNuxt([eslintPluginPrettierRecommended]);

How This Works

1. withNuxt() -- Generated by the @nuxt/eslint module during nuxt prepare. It provides Vue, TypeScript, and Nuxt-specific rules preconfigured. The generated config lives at .nuxt/eslint.config.mjs.

2. eslintPluginPrettierRecommended -- Adds Prettier as an ESLint rule. This does two things:

   • Extends eslint-config-prettier to disable ESLint rules that conflict with Prettier.
   • Enables the prettier/prettier rule that reports formatting differences as ESLint errors.

3. Flat config format -- ESLint 9 uses the flat config array format instead of the legacy .eslintrc.* format. Each array element is a config object applied in order.

Running ESLint

# Check for lint errors
npm run lint

# Fix auto-fixable issues (including Prettier formatting)
npm run lint:fix

These scripts are defined in package.json:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

What the Config Provides

From @nuxt/eslint

The Nuxt ESLint integration provides rules for:

• Vue single-file components -- Template syntax, component naming, prop definitions, emit declarations.
• TypeScript -- Type-aware linting via @typescript-eslint.
• Nuxt conventions -- Auto-import awareness (no "unused import" false positives for auto-imported composables like ref, computed, useRoute).
• Import resolution -- Understands ~/ and #imports aliases.

From eslint-plugin-prettier

• Formatting as lint rules -- Any code that does not match Prettier's output is reported as an ESLint error.
• Auto-fix -- Running eslint --fix applies Prettier formatting.
• Conflict resolution -- eslint-config-prettier disables ESLint rules that would conflict with Prettier (e.g., indent, quotes, semi).

Common Rules

Since CPR uses the Nuxt and Prettier presets, most rules are preconfigured. Here are the most relevant ones:

Vue Rules (from @nuxt/eslint)

Rule	Behavior
vue/multi-word-component-names	Components should have multi-word names (e.g., UiButton, not Button)
vue/no-v-html	Warns against v-html usage (XSS risk)
vue/require-default-prop	Props with optional types should have defaults
vue/no-unused-vars	Detects unused variables in templates

TypeScript Rules

Rule	Behavior
@typescript-eslint/no-explicit-any	Discourages any type
@typescript-eslint/no-unused-vars	Detects unused variables and imports

Prettier Rules

Rule	Behavior
prettier/prettier	Reports any formatting difference as an error

Adding Custom Rules

To add project-specific rules, extend the flat config array:

// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default withNuxt([
  eslintPluginPrettierRecommended,
  {
    rules: {
      // Require explicit return types on exported functions
      '@typescript-eslint/explicit-function-return-type': 'warn',

      // Disallow console.log (redundant with esbuild.drop in prod,
      // but catches them during development)
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },
]);

Ignoring Files

To exclude files or directories from linting, add an ignore pattern to the config:

export default withNuxt([
  eslintPluginPrettierRecommended,
  {
    ignores: ['dist/', '.output/', 'coverage/'],
  },
]);

Editor Integration

VS Code

Install the ESLint extension (dbaeumer.vscode-eslint). The flat config format is supported out of the box in recent versions.

Add to .vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "vue"]
}

This auto-fixes lint and formatting issues on save.

Troubleshooting

"Cannot find module './.nuxt/eslint.config.mjs'"

Run npx nuxt prepare to generate the Nuxt ESLint config. This file is generated during the build process and is not committed to version control.

Prettier and ESLint Conflicts

If you see conflicting rules (e.g., ESLint wants semicolons but Prettier removes them), ensure eslintPluginPrettierRecommended is the last config in the array. It needs to override conflicting rules from earlier configs.

Auto-imports Flagged as Unused

If ESLint flags Nuxt auto-imports (like ref, computed, useRoute) as unused, ensure nuxt prepare has run. The generated ESLint config includes the auto-import definitions.