JSX не разрешен в файлах с расширением .js с eslint-config-airbnb

Я установил eslint-config-airbnb, который должен предварительно настроить ESLINT для React:

Наш экспорт по умолчанию содержит все наши правила ESLint, включая ECMAScript 6+ и React. Он требует использования eslint, eslint-plugin-import, eslint-plugin-react и eslint-plugin-jsx-a11y.

Мой .eslintrc расширяющий свою конфигурацию:

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

К сожалению, я получаю следующую ошибку, когда linting.js файл с React JSX-кодом внутри него:

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

Не настроено ли eslint-config-airbnb реагировать на поддержку JSX уже, как указано?

Что нужно сделать, чтобы удалить эту ошибку?

Ответ 1

Либо измените расширения файлов на .jsx, как указано, либо отключите правило jsx-filename-extension. Вы можете добавить в свою конфигурацию следующее, чтобы разрешить расширения .js для JSX.

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

Ответ 2

Это работает для меня. надеюсь помочь вам.

отключить jsx-filename-extension в .eslintrc:

"rules": {"response/jsx-filename-extension": [0]}
в webpack.config.js:

разрешение: {extensions: ['.js', '.jsx']},

Ответ 3

Если вы не хотите изменять расширение вашего файла, вы можете экспортировать функцию, которая возвращает jsx, а затем импортировать и вызвать эту функцию в вашем js файле.

// greeter.jsx

import React from 'react';

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

а потом

// index.js

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

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

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

Ответ 4

Чтобы изложить в ответе Мартина, кажется, что в настоящее время невозможно использовать JSX в React Native. PR был создан, но вернулся из-за опасений по поводу фрагментации и неизвестных последствий наличия таких вещей, как index.ios.jsx. Я не уверен, как AirBnb работает вокруг этого или если они это делают, но я использовал в основном тот же блок rules, что и Мартин.

Ответ 5

Назови меня пустышкой, если у тебя не получится

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

Ответ 6

Следуйте Реакции документации:

Каждый элемент JSX является просто синтаксическим сахаром для вызова React.createElement(component, props,... children).

Следуя Руководству по стилю Airbnb:

Не используйте React.createElement , если только вы не инициализируете приложение из файла, который не является JSX.

Вы можете сделать это:

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