Comment configurer ESLint pour permettre des méthodes de classe de flèche en gras

ESLint lance une Parsing error: Unexpected token = erreur lorsque j'essaie de limiter mes classes Es6. Quel paramètre de configuration est-ce que je manque pour activer les méthodes de classe de flèche en gras dans Eslint?

Classe d'échantillon:

 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" ], } }

Si vous souhaitez utiliser des fonctionnalités expérimentales (comme les flèches en tant que méthodes de classe), vous devez utiliser babel-eslint comme analyseur. L'analyseur par défaut (Espree) ne prend pas en charge les fonctionnalités expérimentales.

Par ce que j'ai lu dans le message d'erreur Erreur d' Parsing error: Unexpected token = il ressemble plus à une erreur d'analyse que Linter.

En supposant que vous utilisez Babel en tant que compilateur JavaScript / transpiler et babel-eslint comme analyseur ESLint, il est probable que Babel se plaint de la syntaxe, et non de ESLint.

Le problème ne concerne pas les fonctions de la flèche mais quelque chose de plus expérimental (ES7 ??) que je pense qu'il s'appelle le démarrage de la propriété ou le champ de l'instance de classe (ou les deux :)).

Si vous souhaitez utiliser cette nouvelle syntaxe / fonctionnalité, vous devez activer le preset-stage-1 dans Babel. Ce préréglage comprend le plugin de syntax-class-properties qui permet cette syntaxe.

Résumant:

Installez le preset babel:
```
 npm install babel-preset-stage-1 
```
Ajoutez ce préréglage à la liste de vos préréglages (je suppose que vous utilisez déjà es2015 et react préréglages), soit dans votre .babelrc , soit dans votre .babelrc requête babel-loader si vous utilisez le webpack.
```
 "presets": ["es2015", "stage-1", "react"] 
```

J'ai rencontré le même problème aujourd'hui

Et la réponse de @dreyescat fonctionne pour moi.

Par défaut, babel utilise 3 presets: es2015 , react , stage-2

Capture d'écran avec "Erreur d'analyse: jeton inattendu ="

Ensuite, si vous sélectionnez également le préréglage de l' stage-1 , l'erreur est terminée

Capture d'écran sans erreur

Vous pouvez le tester sur le site bebeljs.io vous-même

Votre échantillon n'est pas valide ES6, donc il n'y a aucun moyen de configurer eslint pour l'autoriser

HandleClick est une méthode de la classe, donc non = nécessaire:

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

Si c'est statique, vous pouvez le faire:

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

Et pour lier ceci ou utiliser un décorateur automatique