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>
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
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.
make sure you have the required ESLint and TypeScript packages installed: npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
in your ESLint configuration (.eslintrc), add the parser and plugin configurations for TypeScript:
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".vue"],
"ecmaVersion": 2021
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
// Your other ESLint rules
}
configure Vue files to be recognized as TypeScript files. In your tsconfig.json
file:
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "preserve",
"strict": true,
"esModuleInterop": true
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue" // Include .vue files
]
after making these changes, restart your development server to ensure that ESLint recognizes TypeScript syntax within Vue files. Good luck!