JSX non consentito nei file con estensione ".js" con eslint-config-airbnb


103

Ho installato eslint-config-airbnb che dovrebbe preconfigurare ESLINT per React:

La nostra esportazione predefinita contiene tutte le nostre regole ESLint, inclusi ECMAScript 6+ e React. Richiede eslint, eslint-plugin-import, eslint-plugin-react e eslint-plugin-jsx-a11y.

La mia .eslintrcestensione della sua configurazione:

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

Sfortunatamente ricevo il seguente errore quando inserisco un file .js con codice React JSX al suo interno:

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

Eslint-config-airbnb non era già configurato per reagire per supportare JSX, come affermato?

Cosa si dovrebbe fare per rimuovere quell'errore?

Risposte:


224

Modifica le estensioni dei file .jsxcome indicato o disabilita la regola jsx-filename-extension . Puoi aggiungere quanto segue alla tua configurazione per consentire le .jsestensioni per JSX.

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

1
Se non si desidera modificare l'estensione del nome file o disabilitare la regola, vedere questa risposta
M Falanga

Questa risposta accettata non disabilita la regola. Permette semplicemente ai file .js di contenere JSX e ciò che hai collegato sembra creare troppo caos in progetti su larga scala.
JanithaR

Il secondo elemento "jsx" nell'array non è necessario. L'elemento "js" è sufficiente poiché la regola fa già riferimento all'ambito "jsx".
Raymond Wachaga

17

È lavoro per me. spero di aiutarti.

  1. disabilita l'estensione jsx-filename in .eslintrc:

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

  2. in webpack.config.js:

    risolvere: {extensions: ['.js', '.jsx']},


2
ti ha dato il voto per aggiungere l' webpack.config.jsesempio.
pixel 67

5

Chiamami manichino se non funziona per te

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

4

Se non si desidera modificare l'estensione del file, è possibile esportare una funzione che restituisce jsx, quindi importare e chiamare quella funzione nel file js.

// greeter.jsx

import React from 'react';

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

e poi

// index.js

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

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

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

Non capisco il voto negativo. Qualcuno può spiegare in modo che io possa essere un collaboratore migliore?
M Falanga

7
forse è perché mentre questa correzione "funziona", è, nella migliore delle ipotesi, una soluzione alternativa. E includere una soluzione alternativa in più file JS in tutto il progetto sembra un po 'complicato e poco professionale.
mkvlrn

Sono d'accordo che questa tecnica non è idiomatica React. Tuttavia, ho riscontrato questo problema solo con il mio punto di ingresso. Non consiglierei di farlo su tutti i file, poiché creerebbe codice scomodo. Se questo è il tuo caso d'uso, modifica le regole di linter come suggerito nella risposta accettata.
M Falanga

2

Per esporre la risposta di Martin , sembra che non sia possibile, attualmente, utilizzarlo JSXin React Native. È stato creato un PR ma è stato ripristinato a causa di preoccupazioni sulla frammentazione e conseguenze sconosciute di cose come index.ios.jsx. Non sono sicuro di come AirBnb funzioni o se lo facciano, ma ho usato fondamentalmente lo stesso rulesblocco di Martin.


2

Di seguito la documentazione di React :

Ogni elemento JSX è solo zucchero sintattico per chiamare React.createElement (component, props, ... children).

Seguendo la guida di stile di Airbnb :

Non utilizzare React.createElement a meno che non stai inizializzando l'app da un file che non è JSX .

Potresti farlo:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.