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


102

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?

Jawaban:


224

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"] }],
}

1
Jika Anda tidak ingin mengubah ekstensi nama file Anda atau menonaktifkan aturan, lihat jawaban ini
M Falanga

Jawaban yang diterima ini tidak menonaktifkan aturan. Ini hanya memungkinkan file .js berisi JSX dan apa yang Anda tautkan tampaknya membuat terlalu banyak kekacauan dalam proyek skala yang sangat besar.
JanithaR

Elemen "jsx" kedua dalam array tidak diperlukan. Elemen "js" cukup karena aturan sudah mereferensikan cakupan "jsx".
Raymond Wachaga

17

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']},


2
memberi Anda suara untuk menambahkan webpack.config.jscontoh.
piksel 67

5

Panggil aku bodoh jika tidak berhasil untukmu

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

4

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);

Saya tidak mengerti suara negatifnya. Adakah yang bisa menjelaskan agar saya bisa menjadi kontributor yang lebih baik?
M Falanga

7
mungkin itu karena sementara perbaikan ini "berhasil", ini adalah solusi terbaik. Dan menyertakan solusi dalam beberapa file JS di seluruh proyek Anda tampaknya agak hack dan tidak profesional.
mkvlrn

Saya setuju bahwa teknik ini bukanlah React idiomatik. Namun saya hanya menemukan masalah ini dengan entrypoint saya. Saya tidak akan merekomendasikan melakukan ini di semua file, karena akan membuat kode canggung. Jika itu kasus penggunaan Anda, ubah aturan linter seperti yang disarankan dalam jawaban yang diterima.
M Falanga

2

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.


2

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'));
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.