After adding Eslint to my project I get this error in my .vue file in the template part
Parsing error: '>' expected.eslint
within this code block
<template>
<div class="flex justify-center h-40">
<div class="bg-blue-500 w-40 h-full"></div>
</div>
</template>
Basically, adding an attribute to any HTML tag throws this error
I'm using a Vue 3 with the "vue-ts" Vite template.
VSCode is my editor and i'm obviously the ESlint plugin :)
Here is my .eslintrc configuration
module.exports = {
'env': {
'node': true,
},
'extends': [
'eslint:recommended',
'plugin:vue/base',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended'
],
'parserOptions': {
'ecmaVersion': 12,
'parser': '@typescript-eslint/parser',
'sourceType': 'module'
},
'plugins': [
'vue',
'@typescript-eslint'
],
'rules': {
'indent': [
'error',
'tab'
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'never'
]
}
}
Thanks !
You have not set the parser
option in your eslint configuration. From the documentation:
By default, ESLint uses Espree as its parser. […] To indicate the npm module to use as your parser, specify it using the
parser
option in your.eslintrc
file.
Use vue-eslint-parser to lint the <template>
of .vue
files:
{
"parser": "vue-eslint-parser"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With