it-roy-ru.com

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

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

Наш экспорт по умолчанию содержит все наши правила ESLint, включая ECMAScript 6+ и React. Это требует eslint, eslint-plugin-import, eslint-plugin-реагирует и 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
  }
}

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

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

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

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

68
Mendes

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

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

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

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

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

  2. в webpack.config.js:

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

11
Willard Wong

Если вы не хотите изменять расширение вашего файла, вы можете экспортировать функцию, которая возвращает 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);
3
M Falanga

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

2
Adam burdette