web-dev-qa-db-fra.com

Comment configurer ESLint pour autoriser les méthodes de classe fat arrow

ESLint lance un Parsing error: Unexpected token = _ erreur lorsque j'essaie de lier mes classes Es6. Quel paramètre de configuration me manque pour activer les méthodes de classe de flèche lourde 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"
    ],
  }
}
javascriptreactjsecmascript-6eslint
60
CodeOcelot

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

34
Ilya Volodin

Première installation babel-eslint:

npm i -D babel-eslint

Ajoutez ensuite ce qui suit à votre .eslintrc.json fichier:

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

D'après ce que j'ai lu dans le message d'erreur Parsing error: Unexpected token = _ cela ressemble plus à une erreur d’analyse que à une erreur.

En supposant que vous utilisez Babel comme compilateur/transpiler JavaScript et babel-eslint En tant qu’analyseur ESLint, il y a de fortes chances que ce soit Babel qui se plaint de la syntaxe, et non ESLint.

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

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

En résumé:

  1. Installez le préréglage babel:

    npm install babel-preset-stage-1

  2. Ajoutez ce préréglage à la liste de vos préréglages (je suppose que vous utilisez déjà es2015 et react presets), soit dans votre .babelrc ou dans votre babel-loader champ de requête si vous utilisez Webpack.

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

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 préréglages: es2015, react, stage-2

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

Ensuite, si vous sélectionnez également le stage-1preset, l'erreur est partie

Capture d'écran sans erreur

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

5
Alex Gu

Commencez par installer ces plugins:

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

Ajoutez ensuite ces paramètres à votre fichier de configuration eslint:

. eslintrc.json

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

De cette façon, vous pouvez utiliser des méthodes de classe de flèche grasses et vous ne recevrez pas de no-invalid-this erreurs de eslint.

Bonne codin '

3
Zsolt Gulyás