Eslint 解析錯誤

Question

我剛剛在我的演示項目中配置了 eslint，當我運行 eslint 時，出現以下錯誤：

我仍在學習，所以我不知道如何最好地解決這個問題。

C:\Users\G-L SYSTEMS\Desktop\js-dev-env-demo\buildScripts\srcServer.js
  6:20  error    Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/namespace
  6:20  error    Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/default
  6:20  warning  Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/no-named-as-default
  6:20  warning  Parse errors in imported module '../webpack.config.dev.js': Unexpected token import (7:41)  import/no-named-as-default-member

C:\Users\G-L SYSTEMS\Desktop\js-dev-env-demo\webpack.config.dev.js
  7:41  error  Parsing error: Unexpected token import

✖ 5 problems (3 errors, 2 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! javascript-development-environment@1.0.0 lint: `esw webpack.config.* src buildScripts --color`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the javascript-development-environment@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\G-L SYSTEMS\AppData\Roaming\npm-cache\_logs\2020-09-24T21_49_41_402Z-debug.log

下面是我的 .eslintrc.json 文件：

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "no-console": 1
  }
}

我的 webpack.config.dev.js 文件是：

import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { dirname } from "path";
import { config } from "process";
import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
  mode: "development",
  devtool: "inline-source-map",
  target: "web",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true },
          },
        ],
      },
    ],
  },
};

任何幫助解決錯誤消息？ 問題可能出在我的配置設置、eslint 版本上嗎？

Answer 1

我最終通過禁用一些規則解決了這些問題。 請參閱以下新規則：

"parser": "babel-eslint",
  "rules": {
    "no-console": 1,
    "import/no-unresolved": [0, { "commonjs": true, "amd": true }],
    "import/named": 0,
    "import/no-named-as-default": 0,
    "import/no-named-as-default-member": 0,
    "import/namespace": 0,
    "import/default": 0,
    "import/export": 0
  }

另外，我在 eslintrc.json 文件中添加了以下行：

"parser": "babel-eslint"

將“parserOptions”屬性添加到您的 .eslintrc 已不再適用於 ES6 類中的特定情況，因為 ESLint 目前無法自行解析它。 這種情況會拋出以下錯誤：

error Parsing error: Unexpected token = 

解決方案是讓 ESLint 由兼容的解析器解析。 只需添加：

"parser": "babel-eslint"

到您的 .eslintrc 文件並運行

npm install babel-eslint --save-dev或yarn add -D babel-eslint 。

這些解決了我的問題。