vue.js - 代码拆分的动态导入导致 : ESLint Parsing Error 'import'

Question

我正在使用此处的 VueJS Webpack 模板:https://github.com/vuejs-templates/webpack

示例路线:

const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue')

示例错误:

[eslint] Parsing error: Unexpected token import

我遵循了 Webpack 的动态导入部分中提供的步骤，以及 Anthony Gore 关于如何在路由器级别使用 VueJS 完成代码拆分的博客文章。更具体地说，这是我的设置:

Package.json

...
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.13.1"
...

.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": [
    "dynamic-import-webpack",
    "syntax-dynamic-import",
    "transform-runtime"
  ],
  "env": {
    "test": {
      "presets": ["env", "stage-2"]    }
  }
}

.eslintrc.js

parserOptions: {
  parser: 'babel-eslint',
  sourceType: 'module',
  allowImportExportEverywhere: true
}

我有点不知所措，为什么我仍然看到这个错误。当使用 npm run dev 和 npm run build 时，我的代码按预期运行和工作，但是这个解析错误阻止了文件的其余部分被检查，我无法压制它。

感谢任何/所有帮助!

Answer 1

.eslintrc.js

parserOptions: {
  parser: 'babel-eslint',
  sourceType: 'module',
  allowImportExportEverywhere: true
}

应该是:

parser: 'babel-eslint',
parserOptions: {
  sourceType: 'module',
  allowImportExportEverywhere: true
}

来源:https://eslint.org/docs/user-guide/configuring#specifying-parser

与 (@vue/cli).eslintrc.json

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 8,
    "sourceType": "module"
  }
}