web-dev-qa-db-ja.com

ファットアロークラスメソッドを許可するようにESLintを構成する方法

EsintクラスでEs6クラスをリントしようとすると、ESLintがParsing error: Unexpected token =エラーをスローします。 eslintで太い矢印クラスメソッドを有効にするために不足している構成パラメーターは何ですか？

サンプルクラス：

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}
javascriptreactjsecmascript-6eslint
60
CodeOcelot

実験的な機能（クラスメソッドとしての矢印など）を使用する場合は、 babel-eslint パーサーとして。デフォルトのパーサー（Espree）は実験的な機能をサポートしていません。

34
Ilya Volodin

最初のインストールbabel-eslint：

npm i -D babel-eslint

次に、以下を.eslintrc.jsonファイルに追加します。

"parser": "babel-eslint"
10
spencer.sm

エラーメッセージで読んだものからParsing error: Unexpected token =これは、リンターエラーよりもパーサーエラーのようです。

JavaScriptコンパイラ/トランスパイラーとして Babel および babel-eslint あなたのESLintパーサーとしては、ESLintではなくBabelが構文について文句を言っている可能性があります。

問題は矢印関数に関するものではなく、より実験的なもの（ES7 ??）と呼ばれるものです プロパティ初期化子 または クラスインスタンスフィールド （または両方:)）と呼ばれます。

この新しい構文/機能を使用する場合は、 preset-stage-1 バベル。このプリセットには、 syntax-class-properties その構文を許可するプラグイン。

要約：

  1. Babelプリセットをインストールします。

    npm install babel-preset-stage-1

  2. このプリセットをプリセットのリストに追加します（すでにes2015およびreactプリセット）、いずれかの.babelrcまたは babel-loader webpackを使用している場合はクエリフィールド。

    "presets": ["es2015", "stage-1", "react"]
8
dreyescat

今日も同じ問題に遭遇しました

と@dreyescatの答えは私のために動作します。

デフォルトでは、babelは3つのプリセットを使用します：es2015、react、stage-2

「解析エラー：予期しないトークン=」のスクリーンショット

stage-1presetも選択すると、エラーはなくなります

エラーのないスクリーンショット

Bebeljs.ioサイトで自分でテストできます

5
Alex Gu

最初にこれらのプラグインをインストールします。

npm i -D babel-eslint eslint-plugin-babel

次に、これらの設定をeslint構成ファイルに追加します。

。eslintrc.json

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

この方法で太い矢印クラスのメソッドを使用できますが、no-invalid-this eslintからのエラー。

ハッピーコーディン

3
Zsolt Gulyás