vue eslint报错Unexpected token import解决

起因

用 lint 命令校验代码的时候 报了这个错误

原因是eslint校验代码时babel还未处理代码

解决

1.首先需要安装babel-eslint

npm install babel-eslint -D

我是用vue-cli 搭建的 vue3 项目，初始化的时候就已经安装了babel-eslint。可以在 node-modules里面确认下是否安装了babel-eslint

2.修改 eslint 的配置文件.eslintrc.js

文件在根目录下，没有就新建一个。遇到这个问题的时候，我对 eslint 还没有进行详细了解，这里就先不分析解决思路了，就先把我的配置代码放到这里，先记录一下。我这个配置是结合了 vue-cli 自动生成eslint 配置文件的基础上进行修改的。

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: "plugin:vue/vue3-essential",
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 2018,
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/no-multiple-template-root": "off",
  },
};

---

记录自己的成长，也希望能帮助到大家少走弯路，期待你的点赞支持💫！