Webpack+Vue项目中@babel/eslint-parser检查Vue文件时抛出解析错误的问题求助

我之前也碰到过一模一样的问题，本质是你的ESLint配置没有正确处理Vue单文件组件的解析逻辑。咱们先理清楚问题出在哪：

你当前的ESLint配置把@babel/eslint-parser设为主解析器，但它只能处理纯JS/JSX文件，没法识别Vue文件里的<template>、<script>这类Vue特有的语法结构，所以才会抛出解析错误。而eslint-plugin-vue需要搭配专门的Vue解析器vue-eslint-parser才能正常工作。

先看一下你的环境依赖：

{
  "@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配置其实没问题，已经指定了要检查.vue和.js后缀的文件：

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

问题出在.eslintrc的解析器配置上，按照下面的步骤修改就能解决：

步骤1：安装vue-eslint-parser #

虽然eslint-plugin-vue可能已经间接依赖了这个包，但为了避免版本兼容问题，建议手动安装：

npm install vue-eslint-parser --save-dev

步骤2：修改.eslintrc配置 #

把主解析器换成vue-eslint-parser，然后在parserOptions里指定脚本部分的解析器为@babel/eslint-parser，同时调整ECMAScript版本到更合适的范围（你的代码用到了模板字符串、对象展开等特性，ecmaVersion设为2020更合适，而且高版本里experimentalObjectRestSpread已经是标准特性，不需要单独开启了）：

{
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:vue/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "ecmaVersion": 2020,
    "sourceType": "module"
  }
}

为什么这样修改？ #

• vue-eslint-parser专门负责解析Vue单文件组件，它会把.vue文件拆分成模板、脚本、样式等部分，模板部分交给eslint-plugin-vue做规则检查，脚本部分则交给你指定的@babel/eslint-parser来处理JS语法。
• 把ecmaVersion设为2020可以覆盖你用到的所有现代JS特性，不需要再单独开启experimentalObjectRestSpread这类已经标准化的选项。

修改完之后再运行ESLint检查，你的phone-link.vue文件应该就能正常通过检查了。

内容的提问来源于stack exchange，提问作者Pete