动态导入用于代码拆分引发ESLint解析错误'import'。

Question

我正在使用VueJS Webpack模板，该模板可以在此处找到：https://github.com/vuejs-templates/webpack

示例路由：

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

示例错误：

[eslint] 解析错误：意外的令牌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时，我的代码可以正常运行并按预期工作，但是这个解析错误会阻止对文件的其余部分进行语法检查，我无法消除它。

非常感谢任何帮助！

- Daniel Brown

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"
  }
}

- Daniel Brown

---

在 VS Code 中安装了 ESlint 扩展，因此它是全局安装的。因此，需要全局安装 babel-eslint 包 npm install babel-eslint -g。在我的情况下，行 "parser": "vue-eslint-parser" 不是必需的。 - Barabas

添加 parser: 'babel-eslint' 解决了我的问题。 - Clifford Fajardo

Answer 2

这篇StackOverflow的问题与答案确实帮助我解决了这个问题。但截至2020年4月，对于我的设置组合，parser键似乎需要放在parserOptions内。

我将展示我当前使用的Laravel 7/Laravel Mix和Vue 2.6~的配置：

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "airbnb-base",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2019,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        // dat ruleset
    },
    "settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["@", "./resources"]
                ],
                "extensions": [".vue"]
            }
        }
    }
}

只有在使用Webpack别名时，您才需要那个settings键。

package.json

   "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-vue": "^6.2.2",
        "laravel-mix": "^5.0.1",
    }

.babelrc

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

webpack.config.js

如果你正常使用Webpack而没有使用Laravel Mix，你会发现这里的语法有一点不同，但如果你使用了Webpack别名，你会发现这个很有用：

// use named JS bundles
mix.config.webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
};

// alias the ~/resources folder
mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': `${__dirname}/resources`,
        },
    },
});

最后说明：我始终推荐使用 airbnb-base 配置，并以此为基础形成您的lint规则，因为它是为运行不可变、单向数据流的多开发者环境而创建的，从而避免了JavaScript的缺陷...并专注于声明式代码，同时避免合理糟糕的命令式代码。

关于在Vue中为Airbnb设置ES Lint，我在我的文章中多写了几个字：https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

- agm1984

---

不知道你为什么说“parser”在“parserOptions”里面...它总是作为“parserOptions”的同级属性存在。 - Wayne Mao

Answer 3

将以下代码放入.eslintrc文件中。它期望解析器选项；默认情况下为2013：

"parserOptions": {
    "ecmaVersion":"latest"
  },

- Sachinkumar Pujar