Eslint 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 3和"vue-ts“Vite模板。

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选项。来自文档

默认情况下，ESLint使用埃斯普里作为其解析器。…若要指示要用作解析器的npm模块，请在parser文件中使用.eslintrc选项指定它。

使用vue-eslint解析器链接.vue文件的<template>：

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

Answer 2

你可以这样处理

parser: 'vue-eslint-parser',

或

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

最终结果

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