JSX tidak diperbolehkan dalam file dengan ekstensi '.js' dengan eslint-config-airbnb

Saya telah menginstal eslint-config-airbnb yang seharusnya mengonfigurasi ESLINT untuk React:

Ekspor default kami berisi semua aturan ESLint kami, termasuk ECMAScript 6+ dan React. Ini membutuhkan eslint, eslint-plugin-import, eslint-plugin-react, dan eslint-plugin-jsx-a11y.

Saya .eslintrcmemperluas konfigurasinya:

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

Sayangnya, saya mendapatkan error berikut saat melakukan linting pada file .js dengan kode React JSX di dalamnya:

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

Bukankah eslint-config-airbnb yang dikonfigurasi sudah bereaksi untuk mendukung BEJ, seperti yang dinyatakan?

Apa yang harus dilakukan untuk menghilangkan kesalahan itu?

Ubah ekstensi file Anda .jsxseperti yang disebutkan atau nonaktifkan aturan ekstensi nama file jsx . Anda dapat menambahkan berikut ini ke konfigurasi Anda untuk mengizinkan .jsekstensi untuk JSX.

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

Ini bekerja untuk saya. berharap dapat membantu Anda.

1. nonaktifkan jsx-filename-extension di .eslintrc:

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

2. di webpack.config.js:

   menyelesaikan: {ekstensi: ['.js', '.jsx']},

Panggil aku bodoh jika tidak berhasil untukmu

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

Jika Anda tidak ingin mengubah ekstensi file, Anda dapat mengekspor fungsi yang mengembalikan jsx, lalu mengimpor dan memanggil fungsi tersebut di file js Anda.

// greeter.jsx

import React from 'react';

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

lalu

// index.js

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

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

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

Untuk menjelaskan jawaban Martin , sepertinya saat ini tidak mungkin untuk digunakan JSXdi React Native. Sebuah PR dibuat tetapi dikembalikan karena kekhawatiran tentang fragmentasi dan konsekuensi yang tidak diketahui dari hal-hal seperti itu index.ios.jsx. Saya tidak yakin bagaimana AirBnb bekerja di sekitar ini atau apakah mereka melakukannya, tetapi pada dasarnya saya telah menggunakan rulesblok yang sama dengan Martin.

Mengikuti dokumentasi React :

Setiap elemen JSX hanyalah gula sintaksis untuk memanggil React.createElement (component, props, ... children).

Mengikuti panduan gaya Airbnb :

Jangan gunakan React.createElement kecuali Anda menginisialisasi aplikasi dari file yang bukan JSX .

Anda bisa melakukan ini:

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