Vue3项目从JS迁移至TS时ESLint报Unexpected token :错误如何解决？

ESLint 默认解析器仅支持识别普通 JavaScript 语法，无法解析 TypeScript 特有的类型注解语法，你代码中msg: string里的:属于TS独有语法，因此会抛出Parsing error: Unexpected token :的解析错误。当前的ESLint配置未适配TypeScript和Vue单文件组件中的TS代码，是报错的核心原因。

• 第一步：安装TS相关的ESLint依赖
  执行以下命令安装所需开发依赖：

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

• 第二步：修改.eslintrc.js配置
  调整后的完整配置如下：

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'ecmaVersion': 'latest',
    'sourceType': 'module',
    'parser': '@typescript-eslint/parser',
    'extraFileExtensions': ['.vue']
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    'vue/multi-word-component-names': 'off',
    'vue/object-curly-spacing': [2, 'always'],
    'vue/html-closing-bracket-spacing': [2, {
      'selfClosingTag': 'always'
    }],
    'vue/max-attributes-per-line': [2, {
      'singleline': {
        'max': 1
      },
      'multiline': {
        'max': 1
      }
    }],
    'semi': [2, 'never']
  }
}

• 第三步：验证生效
  如果项目根目录还没有tsconfig.json配置文件，需要先新增该文件完成TS基础配置，全部修改完成后重启IDE或ESLint服务即可解决报错。

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