0

I keep on getting strange linting errors when trying to lint a .vue file. In the following file I get this error. I am using the antfu default linter as it was recommended by a lot of people online as a good default set of rules. I am not sure if this has anything to do with it. In a nutshell, ESLint is simply not set up to parse <script setup lang="ts"> blocks as TypeScript code.

Parsing error: Unexpected token ]eslint

This is my index.vue file inside my /pages folder:

<script setup lang="ts">
import Quiz from '~/components/quiz/Quiz.vue'

const answers = ref<string[]>([
  'Vincent van Gogh',
  'Pablo Picasso',
  'Leonardo da Vinci',
  'Michelangelo',
])

const selectedAnswer = ref<string | null>(null)
function setSelectedAnswer(answer: string) {
  selectedAnswer.value = answer
}
</script>

<template>
  <Quiz />
</template>

This is my eslint.config.mjs:

import antfu from '@antfu/eslint-config'

export default antfu()

This is my package.json:

{
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "seed:nuxt": "nuxi seed"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.775.0",
    "@aws-sdk/s3-request-presigner": "^3.777.0",
    "@nuxt/devtools": "^2.3.2",
    "@nuxt/eslint": "^1.2.0",
    "csv-parser": "^3.2.0",
    "drizzle-orm": "^0.41.0",
    "nuxt": "^3.16.1",
    "pg": "^8.14.1",
    "vite": "^6.2.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
    "vuetify-nuxt-module": "^0.18.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^4.11.0",
    "@types/pg": "^8.11.11",
    "drizzle-kit": "^0.30.5",
    "eslint": "^9.23.0"
  }
}

I have tried to refresh my lint setup by removing the packages and reinstalling it npx nuxi module add eslint. But then still I keep on getting this error. My eslint config then looks as follow:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt()

Even then I get the following error for a simple example:

Parsing error: Unexpected token :eslint
<script setup lang="ts">
const test: string = 'test'
</script>

<template>
  <div />
</template>
3
  • Can you try to update your eslint.config.mjs file using import withNuxt from './.nuxt/eslint.config.mjs' export default withNuxt()? You don't seem to use the nuxt/eslint module correctly. Commented Mar 28 at 8:47
  • I have done that. But the error still persists. : // @ts-check import withNuxt from './.nuxt/eslint.config.mjs' export default withNuxt( // Your custom configs here ) Commented Mar 28 at 8:53
  • I have currently solved the problem: I started a new project, installed eslint and copied over my files. The main thing I did different this time is that I installed eslint on project creation, the Nuxt create command has a prompt that asks a user if they want to install additional extensions. Commented Mar 29 at 7:15

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.