typescriptvue.jsvuejs3eslintvue-typescript

eslint. Parsing error: The keyword 'interface' is reserved


well im using vue 3 + ts (composiiton api), and the issue is that is my eslint giving an error when i define interface

<script setup lang="ts">
import { ref } from 'vue'
import HeaderButton from './HeaderButton.vue'

interface Btns {
  iconName: string
  action: string
}

const btns = ref<Btns[]>([
  {
    iconName: 'asfasf',
    action: ''
  }
])
</script>

enter image description here

setting.json

{
  "workbench.colorTheme": "Default Dark+",
  "window.zoomLevel": 1,
  "explorer.confirmDelete": false,
  "editor.unicodeHighlight.allowedLocales": {
    "ru": true
  },
  "security.workspace.trust.untrustedFiles": "open",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "editor.codeActionsOnSave": {},
  "[vue]": {
    "editor.codeActionsOnSave": ["source.fixAll.eslint"],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  }
}

.eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-prettier'],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

.package.json

    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.17.17",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.0.6",
    "prettier": "^3.0.3",
    "sass": "^1.68.0",
    "typescript": "~5.2.0",
    "vite": "^4.4.9",
    "vue-tsc": "^1.8.11"

vsCode ext:

P.S. disabled @builtin typescript (TypeScript and JavaScript Language Features) as recommended

tried to search over internet but nothing helped


Solution

  • I guess the issue you're facing with ESLint reporting a parsing error for the keyword "interface" is likely because ESLint doesn't recognize TypeScript syntax when used in the Vue 3 block. To fix this, you can configure ESLint to understand TypeScript syntax within Vue files.