JSX niet toegestaan ​​in bestanden met extensie ‘ .js’ met eslint-config-airbnb

Ik heb eslint-config-airbnbdie verondersteld wordt ESLINT vooraf te configureren voor React:

Onze standaard export bevat al onze ESLint-regels, inclusief:
ECMAScript 6+ en React. Het vereist eslint, eslint-plugin-import,
eslint-plugin-react en eslint-plugin-jsx-a11y.

Mijn .eslintrcbreidt de configuratie uit:

{ "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
  }
}

Helaas krijg ik de volgende foutmelding bij het pluizen van een .js-bestand met React JSX-code erin:

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

Was eslint-config-airbnb niet al geconfigureerd om JSX te ondersteunen, zoals vermeld?

Wat moet er worden gedaan om die fout te verwijderen?

Antwoord 1, autoriteit 100%

Verander uw bestandsextensies in .jsxzoals vermeld of schakel de jsx-filename-extensionregel. U kunt het volgende aan uw configuratie toevoegen om .js-extensies voor JSX toe te staan.

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

Antwoord 2, autoriteit 10%

Het is werk voor mij. hoop je te helpen.

1. jsx-bestandsnaam-extensie uitschakelen in .eslintrc:

   “regels”: {
   “react/jsx-bestandsnaam-extensie”: [0]
   }

2. in webpack.config.js:

   oplossen: {
   extensies: [‘.js’, ‘.jsx’]
   },

Antwoord 3, autoriteit 4%

Noem me een dummy als het niet voor je werkt

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

Antwoord 4, autoriteit 2%

Als u uw bestandsextensie niet wilt wijzigen, kunt u een functie exporteren die jsx retourneert, en vervolgens die functie importeren en aanroepen in uw js-bestand.

// greeter.jsx
import React from 'react';
export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

en dan

// index.js
import ReactDOM from 'react-dom';
import greeter from './components/greeter';
const main = document.getElementsByTagName('main')[0];
ReactDOM.render(greeter('World'), main);

Antwoord 5

Volgende Reageer documentatie:

Elk JSX-element is gewoon syntactische suiker voor het aanroepen van React.createElement(component, props, …children).

Volgende Airbnb’s stijlgids:

Gebruik React.createElement niet tenzij je de app initialiseert vanuit een bestand dat geen JSX is.

Je zou dit kunnen doen:

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

Antwoord 6

Om het antwoord van Martin’suit te leggen, lijkt het erop dat het momenteel niet mogelijk is om JSXin React Native. Een PRis gemaakt maar teruggedraaid vanwege zorgen over fragmentatie en onbekende gevolgen van dingen als index.ios.jsx. Ik weet niet zeker hoe AirBnb hier omheen werkt of dat ze dat doen, maar ik heb in principe hetzelfde rules-blok gebruikt als Martin.