CODEWITHSUNDEEP
vue.jseslintvuejs3
AmauryLnd
AmauryLnd

Reputation: 318

Eslint Vue 3 Parsing error: '>' expected.eslint

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 !

Upvotes: 28

Views: 31677

Answers (3)

Muhammed Moussa
Muhammed Moussa

Reputation: 5205

parser solution is okay, but maybe for someone case like me. issue it was eslint cashing so I removed the file and added it again.

Upvotes: 0

Matthias Wiehl
Matthias Wiehl

Reputation: 1998

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"
}

As noted by @ipid and @jfbloom22 you may also need to set parserOptions.parser. This is documented here.

{
  "parser": "vue-eslint-parser",
  "parserOptions": { 
    "parser": "@typescript-eslint/parser" 
  }
}

Upvotes: 58

shaobeichen
shaobeichen

Reputation: 71

you can handle it like this

parser: 'vue-eslint-parser',

or

extends: [
    'plugin:vue/base',
],

Final result

parser: 'vue-eslint-parser',
extends: [
     'plugin:vue/base',
     'eslint:recommended',
     'plugin:vue/vue3-recommended',
     'plugin:vue/essential',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'eslint-config-prettier'
],

Upvotes: 3

Related Questions