web-dev-qa-db-ja.com

コード分​​割の動的インポートが原因：ESLint解析エラー 'import'

私はここにあるVueJS Webpackテンプレートを使用しています： https://github.com/vuejs-templates/webpack

ルートの例：

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

エラー例：

[eslint]解析エラー：予期しないトークンのインポート

私は、Webpackの動的インポートのセクションで提供されている手順と、ルーターレベルでVueJSを使用してコード分割を実行する方法についてのAnthony Goreのブログ投稿に従いました。より具体的には、これが私のセットアップです：

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を使用すると、コードが実行されて期待どおりに機能しますが、この解析エラーにより、ファイルの残りの部分がリントされず、抑制できません。

どんな/すべての助けにも感謝します！

vue.jsvuejs2babeleslintvue-router
12
Daniel Brown

。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

With（@ vue/cli）。eslintrc.json

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

この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

Laravel Mixなしで "通常"にWebpackを使用している場合、構文は少し異なりますが、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 configの使用を常にお勧めし、lintルールの基礎を形成するためにそれに依存することをお勧めします。したがって、JavaScriptの落とし穴を回避しながら、関数型リアクティブプログラミングを行い、合理的に悪い種類の命令型コードを回避しながら、宣言型コードに焦点を当てます。

ES Lintのセットアップに関する記事で、Vue for Airbnb： https://medium.com/@agm1984/how-to-set -up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

1
agm1984