☰

ESLint 解析エラー: 予期しないトークン 質問する

tag-icon • tag-icon javascript reactjs eslint
ESLint 解析エラー: 予期しないトークン 質問する

このコードでは:

import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';

import * as Pages from '../components';

const {  Home, ...Components } = Pages;

次の eslint エラーが発生します:

7:16  error  Parsing error: Unexpected token .. Why?

これが私の eslint 設定です:

{
  "extends": "airbnb",
  "rules": {
    /* JSX */
    "react/prop-types": [1, {
      "ignore": ["className", "children", "location", "params", "location*"]
    }],
    "no-param-reassign": [0, {
      "props": false
    }],
    "prefer-rest-params": 1,
    "arrow-body-style": 0,
    "prefer-template": 0,
    "react/prefer-stateless-function": 1,
    "react/jsx-no-bind": [0, {
      "ignoreRefs": false,
      "allowArrowFunctions": false,
      "allowBind": true
    }],
  }
}

.... .... どうしたの？

ベストアンサー1

ESLint 解析で予期しないトークン エラーが発生するのは、開発環境と、JavaScript ES6 ～ 7 の継続的な変更による ESLint の現在の解析機能との間に互換性がないためです。

.eslintrcに「parserOptions」プロパティを追加するだけでは、次のような特定の状況ではもはや十分ではありません。

static contextTypes = { ... } /* react */

ES6 クラスでは、ESLint は現在独自に解析できないため、この特定の状況では次のエラーが発生します。

error Parsing error: Unexpected token =

解決策は、互換性のあるパーサー、つまり @babel/eslint-parser または babel-eslint (babel バージョン v7 未満の場合) で ESLint を解析することです。

追加するだけ:

"parser": "@babel/eslint-parser"

をファイルに追加し.eslintrc、npm install @babel/eslint-parser --save-devまたは を実行しますyarn add -D @babel/eslint-parser。 を使用する場合はpnpm、代わりに を実行できますpnpm add -D @babel/eslint-parser。

から始まる新しいContext APIにはReact ^16.3いくつかの重要な変更点がありますので、公式ガイド。

おすすめ記事