Vue3为方法加类型时ESLint报Unexpected token:错误的解决办法

问题情况 #

在Vue3+TypeScript项目中使用ESLint时，给defineComponent的methods内方法参数添加类型标注（如allowedCharacterRegex: RegExp），ESLint会抛出错误：

42:41  error  Parsing error: Unexpected token :

相关组件代码片段：

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
    // ...其他配置
    methods: {
        validatePattern(allowedCharacterRegex: RegExp, unAllowedCharacterRegex: RegExp, event: { preventDefault: () => void; }, value: any) {
            if (allowedCharacterRegex && !allowedCharacterRegex.test(value)) {
                event.preventDefault();
            }

            if (unAllowedCharacterRegex && unAllowedCharacterRegex.test(value)) {
                event.preventDefault();
            }
        }
    }
})
</script>

当前ESLint配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {},
};

解决方案 #

问题出在ESLint解析配置上：vue-eslint-parser负责解析Vue单文件组件的结构，但它本身不处理TypeScript语法，需要明确指定将TypeScript代码委托给@typescript-eslint/parser解析。

修改ESLint配置的parserOptions，添加parser: "@typescript-eslint/parser"：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    // 指定TypeScript代码的解析器
    parser: "@typescript-eslint/parser"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {},
};

修改后重启ESLint服务，类型标注的语法错误即可消除。

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