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

Question

I have set up eslint-webpack-plugin with @babel/eslint-parser and eslint-plugin-vue on my webpack and vue project, but when I try to check the vue files it throws the following error:

Error in phone-link.vue
1:0 error Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0)

Am I missing something in my setup as it works on none vue files?

Packages:

"@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 config

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
  }
},

Example vue file

<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>

Answer 1

最后我为vue-eslint-parser更改了 babel vue-eslint-parser ：

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