web-dev-qa-db-fra.com

JSX non autorisé dans les fichiers avec l'extension '.js' avec eslint-config-airbnb

J'ai installé eslint-config-airbnb qui est censé pré-configurer ESLINT pour React:

Notre exportation par défaut contient toutes nos règles ESLint, y compris ECMAScript 6+ et React. Il nécessite eslint, eslint-plugin-import, eslint-plugin-react et eslint-plugin-jsx-a11y.

Mon .eslintrc étendant sa configuration:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

Malheureusement, je reçois le message d'erreur suivant lors de l'insertion d'un fichier .js contenant React code JSX:

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

Eslint-config-airbnb configuré n'a-t-il pas déjà réagi pour prendre en charge JSX, comme indiqué?

Que devrait-on faire pour supprimer cette erreur?

javascriptreactjseslinteslint-config-airbnb
71
Mendes

Modifiez vos extensions de fichier en .jsx comme indiqué ou désactivez la règle extension de jsx . Vous pouvez ajouter ce qui suit à votre configuration pour autoriser les extensions .js pour JSX.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
154
Martin Mihaylov

C'est un travail pour moi. J'espère vous aider.

  1. désactiver jsx-filename-extension dans .eslintrc:

    "rules": {"react/jsx-filename-extension": [0]}

  2. dans webpack.config.js:

    résoudre: {extensions: ['.js', '.jsx']},

12
Willard Wong

Si vous ne souhaitez pas modifier votre extension de fichier, vous pouvez exporter une fonction qui retourne jsx, puis importer et appeler cette fonction dans votre fichier js.

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

puis

// index.js

import ReactDOM from 'react-dom';
import greeter from './components/greeter';

const main = document.getElementsByTagName('main')[0];

ReactDOM.render(greeter('World'), main);
3
M Falanga

Pour expliquer la réponse de Martin's , il semble qu'il ne soit pas possible actuellement d'utiliser JSX dans React Native. A PR a été créé mais a été annulé en raison d'inquiétudes quant à la fragmentation et aux conséquences inconnues de l'existence de choses comme index.ios.jsx. Je ne suis pas sûr de savoir comment AirBnb fonctionne autour de cela ou s'ils le font, mais j'ai utilisé fondamentalement le même bloc rules que Martin.

2
Adam burdette

Appelez-moi un mannequin si cela ne fonctionne pas pour vous

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }
0
droid