Med denne koden:
import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';
import * as Pages from '../components';
const { Home, ...Components } = Pages;
får jeg denne eslint-feilen:
7:16 error Parsing error: Unexpected token .. Why?
Her er eslint-konfigurasjonen min:
{
"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
}],
}
}
.... .... Hva er problemet?
Uventede token-feil i ESLint-parsing oppstår på grunn av inkompatibilitet mellom utviklingsmiljøet ditt og ESLint's nåværende parsing-funksjoner med de pågående endringene med JavaScripts ES6~7.
Det er ikke lenger nok å legge til egenskapen "parserOptions" i .eslintrc-filen for bestemte situasjoner, for eksempel ved bruk av
static contextTypes = { ... } /* react */
i ES6-klasser, ettersom ESLint for øyeblikket ikke klarer å analysere det på egen hånd. I denne spesielle situasjonen får du en feilmelding av typen:
error Parsing error: Unexpected token =
Løsningen er å få ESLint parset av en kompatibel parser. babel-eslint er en pakke som reddet meg nylig etter å ha lest denne siden, og jeg bestemte meg for å legge til dette som en alternativ løsning for alle som kommer senere.
bare legg til:
"parser": "babel-eslint"
til filen .eslintrc
og kjør npm install babel-eslint --save-dev
eller yarn add -D babel-eslint
.
Vær oppmerksom på at det nye Context API fra og med React ^16.3
har noen viktige endringer, se den offisielle veiledningen.
ESLint 2.x støtter eksperimentelt ObjectRestSpread-syntaksen, og du kan aktivere den ved å legge til følgende i .eslintrc
: docs
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
ESLint 1.x støtter ikke spread-operatoren, en måte å omgå dette på er å bruke babel-eslint parser. Du finner de nyeste installasjons- og bruksinstruksjonene i prosjektets readme.
"parser": "babel-eslint"
hjalp meg å løse problemet
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"comma-dangle": 0,
"react/jsx-uses-vars": 1,
"react/display-name": 1,
"no-unused-vars": "warn",
"no-console": 1,
"no-unexpected-multiline": "warn"
},
"settings": {
"react": {
"pragma": "React",
"version": "15.6.1"
}
}
}