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

c2e8gylq 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(202)

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

谢谢你，谢谢

vue.js

来源：https://stackoverflow.com/questions/66597732/eslint-vue-3-parsing-error-expected-eslint

2条答案

按热度按时间

h6my8fg21#

您尚未在eslint配置中设置parser选项。来自文档：
默认情况下，ESLint使用Espree作为其解析器。[...]要指定要用作解析器的npm模块，请在.eslintrc文件中使用parser选项指定它。
使用vue-eslint-parser对.vue文件的<template>进行lint：

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

正如@ipid和@jfbloom22所指出的，您可能还需要设置parserOptions.parser。这是记录在这里。

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

赞(0）回复(0）举报 2023-10-23

23c0lvtd2#

你可以这样处理

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

赞(0）回复(0）举报 2023-10-23

我来回答

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

2条答案

相关问题

热门标签

最新问答