@babel/eslint-parser 在 vue 文件上抛出错误

Posted 2023-03-23

【中文标题】@babel/eslint-parser 在 vue 文件上抛出错误

【英文标题】：@babel/eslint-parser throwing error on vue files

【发布时间】：2021-12-22 03:29:55

【问题描述】：

我已经在我的 webpack 和 vue 项目中使用 @babel/eslint-parser 和 eslint-plugin-vue 设置了 eslint-webpack-plugin，但是当我尝试检查 vue 文件时，它会抛出以下错误：

phone-link.vue 中的错误 1:0 错误解析错误：此实验性语法需要启用以下解析器插件之一：'jsx, flow, typescript' (1:0)

我的设置中是否缺少某些内容，因为它适用于非 vue 文件？

包：

"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.16.0",
"eslint": "^8.2.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-vue": "^8.0.3",
"eslint-webpack-plugin": "^3.1.0",

Webpack 配置

const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
  new ESLintPlugin(
    extensions: ['vue', 'js'],
  )
],

eslintrc

"extends": [
  "eslint:recommended",
  "airbnb-base",
  "plugin:vue/recommended"
],
"parser": "@babel/eslint-parser",
"parserOptions": 
  "ecmaVersion": 6,
  "ecmaFeatures": 
    "experimentalObjectRestSpread": true
  
,

示例 vue 文件

<template>
  <a :href="phoneLinkNumber" class=""> phoneLinkText </a>
</template>

<script>
  import SiteConstants from '../Constants/site-constants.js';

  export default 
    name: 'phone-link',
    props: 
        phoneLinkText: 
            default: SiteConstants.PhoneNumber,
        ,
    ,
    data() 
        return 
            phoneLinkNumber: `tel:$SiteConstants.PhoneNumber.replace(/\s/g, "")`,
        
    ,
  
</script>

【参考方案1】：

最后我把 babel 解析器改成了vue-eslint-parser:

"parser": "vue-eslint-parser",