JSX không được phép trong các tệp có phần mở rộng '.js' với eslint-config-airbnb

Tôi đã cài đặt eslint-config-airbnb được cho là cấu hình trước ESLINT cho React:

Bản xuất mặc định của chúng tôi chứa tất cả các quy tắc ESLint của chúng tôi, bao gồm cả ECMAScript 6+ và React. Nó yêu cầu eslint, eslint-plugin-import, eslint-plugin-react và eslint-plugin-jsx-a11y.

.eslintrcMở rộng cấu hình của tôi :

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

Rất tiếc, tôi gặp lỗi sau khi in tệp .js với mã React JSX bên trong nó:

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

Như đã nêu, eslint-config-airbnb không được định cấu hình đã phản ứng để hỗ trợ JSX chưa?

Cần phải làm gì để loại bỏ lỗi đó?

Thay đổi phần mở rộng tệp của bạn thành .jsxnhư đã đề cập hoặc tắt quy tắc jsx-filename-extension . Bạn có thể thêm phần sau vào cấu hình của mình để cho phép các .jsphần mở rộng cho JSX.

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

Nó làm việc cho tôi. hy vọng sẽ giúp được bạn.

1. vô hiệu hóa jsx-filename-extension trong .eslintrc:

   "quy tắc": {"react / jsx-filename-extension": [0]}

2. trong webpack.config.js:

   giải quyết: {extension: ['.js', '.jsx']},

Hãy gọi cho tôi một tên giả nếu nó không phù hợp với bạn

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

Nếu bạn không muốn thay đổi phần mở rộng tệp của mình, bạn có thể xuất một hàm trả về jsx, sau đó nhập và gọi hàm đó trong tệp js của bạn.

// greeter.jsx

import React from 'react';

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

và sau đó

// index.js

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

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

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

Để giải thích cho câu trả lời của Martin , có vẻ như hiện tại, không thể sử dụng JSXtrong React Native. Một chương trình PR đã được tạo ra nhưng bị hủy bỏ do lo ngại về sự phân mảnh và hậu quả chưa biết của việc có những thứ như thế nào index.ios.jsx. Tôi không chắc AirBnb hoạt động như thế nào xung quanh vấn đề này hoặc nếu họ làm như vậy, nhưng về cơ bản tôi đã sử dụng cùng một ruleskhối với Martin.

Sau tài liệu React :

Mỗi phần tử JSX chỉ là một đường cú pháp để gọi React.createElement (thành phần, đạo cụ, ... con).

Làm theo hướng dẫn phong cách của Airbnb :

Không sử dụng React.createElement trừ khi bạn đang khởi tạo ứng dụng từ một tệp không phải là JSX .

Bạn có thể làm điều này:

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