JSX n'est pas 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 .eslintrcextension de 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, j'obtiens l'erreur suivante lors de la peluchage d'un fichier .js avec le code React JSX à l'intérieur:

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

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

Que faut-il faire pour supprimer cette erreur?

Changez vos extensions de fichier .jsxcomme mentionné ou désactivez la règle d' extension de nom de fichier jsx . Vous pouvez ajouter ce qui suit à votre configuration pour autoriser les .jsextensions pour JSX.

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

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

1. désactiver l'extension de nom de fichier jsx dans .eslintrc:

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

2. dans webpack.config.js:

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

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

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

Si vous ne souhaitez pas modifier votre extension de fichier, vous pouvez exporter une fonction qui renvoie 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);

Pour expliquer la réponse de Martin , il semble qu'il n'est pas possible, actuellement, de l'utiliser JSXdans React Native. Un PR a été créé mais annulé en raison de préoccupations concernant la fragmentation et les conséquences inconnues d'avoir des choses comme index.ios.jsx. Je ne sais pas comment AirBnb fonctionne autour de cela ou s'ils le font, mais j'ai essentiellement utilisé le même rulesbloc que Martin.

Suite à la documentation React :

Chaque élément JSX est juste du sucre syntaxique pour appeler React.createElement (component, props, ... children).

En suivant le guide de style d'Airbnb :

N'utilisez pas React.createElement sauf si vous initialisez l'application à partir d'un fichier qui n'est pas JSX .

Vous pouvez faire ceci:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));