vue3.0 编译报错“Parsing error: Unexpected token”解决办法

事情是这样的，最近在写vue3的项目，快乐的用起了Element Plus

用到tag组件的时候，就下面这个👇 

源代码一贴，ESLint报错就来了👇 就是声明ref的这句代码

菜鸡如我第一时间百度打法，浏览各种报错指路的帖子，给.eslintrc.js / package.json花式改配置——

这样：

或者这样：

等等等，然后！

报错就变成了这样——

文件第一行报错

或者这样——

export报错

 

简而言之！在经历一个上午无数次重启vscode之后，终于摸出了可行的写法

 

1、检查eslint的安装，下面都跑一下

npm  i  eslint-plugin-vue  -S

npm install babel-eslint --save

 

2、打开.eslintrc.js，添加或修改如下代码

 

3、重启Vscode，齐活儿！

现在就突出一整个欣喜若狂了属于，特此记录。

 

【附上code 👉 .eslintrc.js】

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  overrides: [
        {
          // 匹配views和二级目录中的index.vue
          files: ['src/views/index.vue','src/views/**/index.vue'],
          //给上述匹配的文件指定规则
          rules: {
          'vue/multi-word-component-names':"off",
          }
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}