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

105

Я установил 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
  }
}

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

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

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

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

Мендес
источник

Ответы:

229

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

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
Мартин Михайлов
источник
1
Если вы не хотите изменять расширение имени файла или отключать правило, см. Этот ответ
М. Фаланга,
Этот принятый ответ не отменяет правило. Он просто позволяет файлам .js содержать JSX, и то, что вы связали, кажется, создает слишком много хаоса в очень крупномасштабных проектах.
JanithaR
Второй элемент «jsx» в массиве не нужен. Элемента «js» достаточно, поскольку правило уже ссылается на область видимости «jsx».
Raymond Wachaga,
Где находится конфигурационный файл?
Иман Мараши
17

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

  1. отключить расширение jsx-filename в .eslintrc:

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

  2. в webpack.config.js:

    разрешить: {расширения: ['.js', '.jsx']},

Уиллард Вонг
источник
2
дал вам голос за добавление webpack.config.jsпримера.
пиксель 67
5

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

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }
дроид
источник
4

Если вы не хотите изменять расширение файла, вы можете экспортировать функцию, которая возвращает 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);
М. Фаланга
источник
Я не понимаю голоса против. Может ли кто-нибудь объяснить, чтобы я мог внести больший вклад?
М. Фаланга
7
может быть, это потому, что, хотя это исправление «работает», в лучшем случае это обходной путь. И включение обходного пути в несколько файлов JS в вашем проекте кажется отчасти хакерским и непрофессиональным.
mkvlrn
Я согласен, что это не идиоматический React. Однако я столкнулся с этой проблемой только с моей точкой входа. Я бы не рекомендовал делать это для всех файлов, так как это создаст неудобный код. Если это ваш вариант использования, просто измените правила линтера, как это предлагается в принятом ответе.
M Falanga
2

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

Адам Бёрдетт
источник
2

Следующая документация React :

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

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

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

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

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));
Fjplaurr
источник