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


103

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?

Odpowiedzi:


224

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

1
Jeśli nie chcesz zmieniać rozszerzenia nazwy pliku lub wyłączać reguły, zapoznaj się z tą odpowiedzią
M Falanga

Ta zaakceptowana odpowiedź nie wyłącza reguły. Po prostu pozwala plikom .js zawierać JSX, a to, co podłączyłeś, wydaje się powodować zbyt duży chaos w projektach na bardzo dużą skalę.
JanithaR

Drugi element „jsx” w tablicy jest niepotrzebny. Element „js” jest wystarczający, ponieważ reguła odwołuje się już do zakresu „jsx”.
Raymond Wachaga

17

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


2
oddała Ci głos za dodaniem webpack.config.jsprzykładu.
piksel 67

5

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

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

4

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

Nie rozumiem głosów przeciw. Czy ktoś może wyjaśnić, abym mógł być lepszym współpracownikiem?
M Falanga

7
może dlatego, że chociaż ta poprawka „działa”, jest to w najlepszym przypadku obejście. A uwzględnienie obejścia w wielu plikach JS w całym projekcie wydaje się trochę hakerskie i nieprofesjonalne.
mkvlrn

Zgadzam się, że ta technika nie jest idiomatyczną reakcją. Jednak napotkałem ten problem tylko z moim punktem wejścia. Nie polecałbym tego robić we wszystkich plikach, ponieważ stworzyłoby to niezręczny kod. Jeśli to twój przypadek użycia, po prostu zmodyfikuj reguły linter zgodnie z sugestią w zaakceptowanej odpowiedzi.
M Falanga

2

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.


2

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'));
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.