如何解决Vue SFC中ESLint需启用jsx/flow/typescript解析插件的报错

根本原因 #

该报错的核心是ESLint使用的解析器不匹配Vue单文件组件（SFC）的语法格式：
你当前在.eslintrc中全局配置的解析器是@babel/eslint-parser，该解析器仅支持识别标准JS语法，无法解析Vue SFC的<template>标签结构。ESLint直接把.vue文件的内容当成JS解析时，会将开头的<template>识别为非法的实验性语法，因此抛出需要启用JSX/Flow/TS插件的错误。
虽然你已经安装了eslint-plugin-vue，但该插件需要配合专属的vue-eslint-parser才能完成SFC结构的拆分解析（将template块、script块分别提取后交给对应解析器处理），你未指定该解析器的情况下，插件的解析逻辑不会生效。

解决步骤 #

仅需要修改.eslintrc中的解析器配置即可：

1. 将顶层的parser字段值替换为vue-eslint-parser
2. 在parserOptions中新增parser字段，值设置为原来的@babel/eslint-parser，保留原有的parserOptions其他配置

修改后的完整.eslintrc参考如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  // 替换为vue专属解析器
  parser: 'vue-eslint-parser',
  parserOptions: {
    // 新增该字段，指定script块的解析器
    parser: '@babel/eslint-parser',
    ecmaVersion: 12,
    requireConfigFile: false,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'vue/no-multiple-template-root': 'off',
  },
};

你安装的eslint-plugin-vue@7.17.0已经内置依赖了vue-eslint-parser，无需额外安装依赖，修改配置后重新执行npm run lint即可消除报错。

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