web-dev-qa-db-fra.com

Comment configurer ESLint pour React on Atom Editor

Dans Atom Editor, j'ai installé les plugins suivants

  1. linter 
  2. linter-eslint

Il semble qu'ils ne reconnaissent pas la syntaxe JSX. 

Je l'ai sur la ligne de commande, mais j'ai dû utiliser d'autres plugins comme esprima-fb et eslint-plugin-react. On dirait qu’il n’existe pas de tels plugins pour Atom Editor et aimerait savoir si l’un d’entre vous sait comment pirater cela.

reactjsatom-editorreact-jsxeslint
50
cuadraman

Pour que Eslint fonctionne bien avec React.js:

  1. Installer les plugins linter & linter-eslint
  2. Exécuter npm install eslint-plugin-react
  3. Ajoutez "plugins": ["react"] à votre fichier de configuration .eslintrc
  4. Ajoutez "ecmaFeatures": {"jsx": true} à votre fichier de configuration .eslintrc

Voici un exemple de fichier de configuration .eslintrc:

{
    "env": {
        "browser": true,
        "node": true
    },

    "globals": {
        "React": true
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [
        "react"
    ]
}

J'utilise Eslint v1.1.0 pour le moment.

Note latérale : Je devais installer eslint et eslint-plugin-react en tant que dépendances du projet (par exemple, npm install eslint eslint-plugin-react --save-dev). Espérons que cela aide.

65
Jon Saw

Réponse mise à jour pour 2016: installez simplement le paquet react package dans Atom et ajoutez un fichier .eslintrc à la racine du projet (ou dans votre répertoire personnel) contenant les éléments suivants:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true
  }
}

Et ré-ouvrez tous les fichiers contenant JSX et cela devrait fonctionner.

36
jackocnr

Vous devez éditer un projet local .eslintrc qui sera récupéré par ESLint. Si vous souhaitez une intégration avec Atom, vous pouvez installer les plugins linter et linter-eslint .

Pour configurer rapidement les meilleures pratiques ESLint for React, la meilleure option actuelle consiste à installer le package npm eslint-plugin-react et à étendre leur configuration recommended au lieu de basculer manuellement de nombreuses règles:

{
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [ "react" ]
}

Cela activera eslint-plugin-react et les règles recommandées à partir des préréglages ESLint & React. La dernière version d'ESLint user-guide lui-même contient des informations plus utiles.

Voici un exemple d'options d'analyse optimisées pour ES6 et webpack:

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}
7
Rafi B.

J'utilise Atom et cela fonctionne très bien. Vous avez simplement besoin d'un .eslintrc dans la racine de votre projet, qui indique à ESLint que vous utilisez eslint-plugin-react.

0
Anders Ekdahl

  1. Pour les utilisateurs Mac: Allez dans Atom -> Préférences -> Installer -> Rechercher le package linter-eslint -> cliquez sur Installer.

  2. Pour les utilisateurs Ubuntu: Allez dans Edition -> Préférences -> Installer -> Rechercher le paquet linter-eslint -> cliquez sur Installer

  3. allez à la ligne de commande ---> npm install --save-dev eslint-config-rallycoding

  4. Venez créer un nouveau fichier .eslintrc et étendre le codage de rallye.

0
iPragmatech