DX: Integrate @nuxt/eslint for strict logic checks

[TusharW4ni]

Context / Problem

Currently, the template uses Prettier for formatting, but lacks an aggressive linter like ESLint. For a team of students (like in EPICS) learning Vue 3 and Nuxt 4, a strict linter is essential to catch logic errors, reactivity pitfalls (like destructuring props incorrectly), and unused variables before they become bugs. Furthermore, ensuring standard format on save and running typechecks are needed for a strong developer guardrail.

Proposed Solution

Integrate @nuxt/eslint to provide Nuxt-specific linting rules. This will act as a strong developer guardrail. Since we already use Prettier (with a Tailwind plugin) for formatting, we will configure ESLint to handle logic checks only and avoid formatting conflicts. Additionally, we will add standard formatting scripts, ensure .vscode is configured properly, and define type-checking scripts.

Implementation Details

1. Install the necessary dependencies:

   pnpm add -D eslint @nuxt/eslint

2. Update nuxt.config.ts to include the ESLint module and disable stylistic formatting to prevent conflicts with Prettier:

   export default defineNuxtConfig({
     modules: [
       '@nuxt/eslint'
     ],
     eslint: {
       config: {
         stylistic: false // Prevents conflict with Prettier
       }
     }
   })

3. Create an eslint.config.mjs file in the root directory to enable IDEs and the CLI to pick up the Nuxt generated rules:

   import withNuxt from './.nuxt/eslint.config.mjs'
   export default withNuxt()

4. Add lint, format, and typecheck scripts to package.json:

   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
     "typecheck": "nuxi typecheck"
   }

5. Create .vscode/settings.json to enable ESLint "fix on save" and Prettier formatting on save for contributors:

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
   }

Acceptance Criteria

• @nuxt/eslint is installed and configured.
• eslint.config.mjs is created at the root level.
• Prettier formatting is kept intact and does not conflict with ESLint.
• pnpm run lint successfully lints the project.
• pnpm run format successfully formats the project.
• pnpm run typecheck successfully validates TypeScript types.
• Any existing linting errors in the starter template are fixed.