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

Question

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 !

Answer 1

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