Vue3 Quasar项目中eslint-plugin-vue报Unexpected token错误的解决问询

问题背景 #

在Vue 3 Quasar项目里，有个组件会在值变化时触发一个接收数字参数的函数。一开始遇到TypeScript类型错误：

Parameter 'n' implicitly has an 'any' type.

对应组件代码：

<MyComponent
  v-model:current="currentValue"
  :max="someValue"
  @in="myFunction(someNumber)"
  @out="myFunction(someValue)"
  @change="(e) => myFunction(e)"
/>

给参数加TypeScript类型注解后，又出现ESLint解析错误：

[vue/no-parsing-error]
Parsing error: Unexpected token :.eslint-plugin-vue

修改后的代码：

<MyComponent
  v-model:current="currentValue"
  :max="someValue"
  @in="myFunction(someNumber)"
  @out="myFunction(someValue)"
  @change="(e: number) => myFunction(e)"
/>

推测是ESLint配置问题，希望找到根源并合理修复，而非简单忽略。当前.eslintrc.cjs配置如下：

module.exports = {
  root: true,
  parserOptions: {
    parser: require.resolve("@typescript-eslint/parser"),
    extraFileExtensions: [".vue"],
  },
  env: {
    browser: true,
    es2021: true,
    node: true,
    "vue/setup-compiler-macros": true,
  },

  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "prettier",
  ],

  plugins: ["@typescript-eslint", "vue"],

  globals: {
    ga: "readonly",
    cordova: "readonly",
    __statics: "readonly",
    __QUASAR_SSR__: "readonly",
    __QUASAR_SSR_SERVER__: "readonly",
    __QUASAR_SSR_CLIENT__: "readonly",
    __QUASAR_SSR_PWA__: "readonly",
    process: "readonly",
    Capacitor: "readonly",
    chrome: "readonly",
  },

  rules: {
    "prefer-promise-reject-errors": "off",
    quotes: ["warn", "single", { avoidEscape: true }],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-var-requires": "off",
    "no-unused-vars": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
};

问题根源 #

1. Vue模板内的表达式默认由eslint-plugin-vue的解析器处理，它仅支持标准JavaScript语法，不识别TypeScript的类型注解（比如e: number这种写法）。
2. 虽然配置了@typescript-eslint/parser，但该解析器只处理Vue文件中的<script>部分，模板部分依然由Vue的解析器处理，导致类型注解被视为语法错误。

修复方案 #

方案1：将回调逻辑移至script部分（推荐） #

这是Vue官方推荐的最佳实践，既避免模板里的语法解析问题，也让类型检查更清晰：

<!-- 模板部分 -->
<MyComponent
  v-model:current="currentValue"
  :max="someValue"
  @in="myFunction(someNumber)"
  @out="myFunction(someValue)"
  @change="handleChange"
/>

// <script setup lang="ts">
const handleChange = (e: number) => {
  myFunction(e);
};

方案2：配置ESLint让模板支持TypeScript表达式 #

如果一定要在模板里写带类型注解的箭头函数，可以修改ESLint配置，让Vue模板的表达式由@typescript-eslint/parser解析：

修改.eslintrc.cjs：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
    "vue/setup-compiler-macros": true,
  },

  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "prettier",
  ],

  plugins: ["@typescript-eslint", "vue"],

  globals: {
    ga: "readonly",
    cordova: "readonly",
    __statics: "readonly",
    __QUASAR_SSR__: "readonly",
    __QUASAR_SSR_SERVER__: "readonly",
    __QUASAR_SSR_CLIENT__: "readonly",
    __QUASAR_SSR_PWA__: "readonly",
    process: "readonly",
    Capacitor: "readonly",
    chrome: "readonly",
  },

  overrides: [
    {
      files: ["*.vue"],
      parser: "vue-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
  ],

  rules: {
    "prefer-promise-reject-errors": "off",
    quotes: ["warn", "single", { avoidEscape: true }],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-var-requires": "off",
    "no-unused-vars": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 若仍报错，关闭针对意外token的检查
    "vue/no-parsing-error": ["error", { "unexpected-token": false }],
  },
};

注意：这种方式仅让ESLint能解析模板里的TS语法，但Vue模板表达式在运行时依然是JavaScript环境，类型注解不会生效。而且模板里写复杂TS语法会降低代码可读性，因此优先推荐方案1。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista-man