JSX nie jest dozwolone w plikach z rozszerzeniem „.js” z eslint-config-airbnb

Zainstalowałem eslint-config-airbnb, który ma wstępnie skonfigurować ESLINT dla React:

Nasz domyślny eksport zawiera wszystkie nasze reguły ESLint, w tym ECMAScript 6+ i React. Wymaga eslint, eslint-plugin-import, eslint-plugin-act i eslint-plugin-jsx-a11y.

Moje .eslintrcrozszerzenie jego konfiguracji:

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

Niestety, podczas lintowania pliku .js z kodem React JSX otrzymuję następujący błąd:

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

Czy konfiguracja eslint-config-airbnb nie reaguje już na obsługę JSX, jak wspomniano?

Co należy zrobić, aby usunąć ten błąd?

Zmień rozszerzenia plików na .jsxwspomniane lub wyłącz regułę jsx-filename-extension . Możesz dodać następujące elementy do swojej konfiguracji, aby zezwolić na .jsrozszerzenia dla JSX.

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

To dla mnie praca. mam nadzieję, że ci pomogę.

1. wyłącz rozszerzenie jsx-filename-extension w .eslintrc:

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

2. w webpack.config.js:

   rozwiązać: {rozszerzenia: ['.js', '.jsx']},

Nazwij mnie manekinem, jeśli to nie działa

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

Jeśli nie chcesz zmieniać rozszerzenia pliku, możesz wyeksportować funkcję, która zwraca jsx, a następnie zaimportować i wywołać tę funkcję w pliku js.

// greeter.jsx

import React from 'react';

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

i wtedy

// index.js

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

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

ReactDOM.render(greeter('World'), main);

Aby wyjaśnić odpowiedź Martina , wydaje się, że obecnie nie jest możliwe użycie JSXw React Native. Utworzono PR, ale cofnięto go z powodu obaw o fragmentację i nieznane konsekwencje posiadania takich rzeczy index.ios.jsx. Nie jestem pewien, jak działa AirBnb w tym zakresie, ani czy tak jest, ale użyłem w zasadzie tego samego rulesbloku co Martin.

Poniższa dokumentacja Reacta :

Każdy element JSX jest po prostu cukrem syntaktycznym do wywoływania React.createElement (komponent, props, ... child).

Zgodnie z przewodnikiem stylistycznym Airbnb :

Nie używaj React.createElement, chyba że inicjujesz aplikację z pliku, który nie jest JSX .

Możesz to zrobić:

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