Eslint Vue 3 解析错误：'>' expected.eslint

Question

将 Eslint 添加到我的项目后，我在模板部分的 .vue 文件中收到此错误

Parsing error: '>' expected.eslint

在此代码块内

<template>
  <div class="flex justify-center h-40">
    <div class="bg-blue-500 w-40 h-full"></div>
  </div>
</template>

基本上，向任何 HTML 标记添加属性都会引发此错误

我正在使用带有“vue-ts”Vite 模板的 Vue 3。
VSCode 是我的编辑器，我显然是 ESlint 插件 :)
这是我的 .eslintrc 配置

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'
    ]
  }
}

谢谢！

Answer 1

您尚未在 eslint 配置中设置 parser 选项。来自documentation：

默认情况下，ESLint 使用Espree 作为其解析器。 [...] 要指定 npm 模块用作解析器，请使用 .eslintrc 文件中的 parser 选项指定它。

使用vue-eslint-parser 对<template> 的.vue 文件进行lint：

{
  "parser": "vue-eslint-parser"
}