Vue文件使用TypeScript as操作符触发ESLint解析错误求助

问题原因 #

你遇到的Parsing error: Unexpected token as错误，本质是ESLint处理.vue文件时，没有用TypeScript解析器处理其中的TS代码。vue-eslint-parser仅负责解析Vue单文件组件的结构，无法识别TypeScript语法，需要配置它将脚本部分转交给@typescript-eslint/parser处理。

解决方案 #

修改你的.eslintrc.js配置，针对.vue文件的规则块补充parserOptions，指定TS解析器：

// eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended'
  ],
  overrides: [
    {
      files: ['./src/**/*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint']
    },
    {
      files: ['./src/**/*.vue'],
      parser: 'vue-eslint-parser',
      // 新增以下配置
      parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest'
      },
      plugins: ['@typescript-eslint']
    }
  ],
  rules: {
    'no-multiple-empty-lines': ['error', { max: 1 }],
    'vue/no-unused-vars': 'error',
    'vue/multi-word-component-names': 'off'
  }
}

额外检查 #

1. 确保你的.vue文件中，脚本标签声明了lang="ts"，比如：

<script setup lang="ts">
const collapse = inject('collapse') as Ref<boolean>
</script>

如果未声明lang="ts"，ESLint会将脚本当作JavaScript处理，自然无法识别TypeScript语法。

2. 无需使用babel-eslint，@typescript-eslint/parser是TypeScript项目的官方推荐解析器，兼容性更好。

修改完成后，重新运行lint-staged即可正常通过检查。

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