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

Posted 2023-02-22

【中文标题】Eslint Vue 3 解析错误：\'>\' expected.eslint

【英文标题】：Eslint Vue 3 Parsing error: '>' expected.eslintEslint Vue 3 解析错误：'>' expected.eslint

【发布时间】：2021-06-10 08:14:01

【问题描述】：

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

谢谢！

【参考方案1】：

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

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

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

  "parser": "vue-eslint-parser"

【讨论】：

就是这样！非常感谢:)

谢谢！请注意，可能需要在"parser" 设置之后设置"parserOptions": "parser": "@typescript-eslint/parser" 。