जेएसएक्स को एस्लिंट-कॉन्फिग-एयरबीएनबी के साथ '.js' एक्सटेंशन वाली फाइलों में अनुमति नहीं है

Question

मैंने eslint-config-airbnb स्थापित किया है, जो प्रतिक्रिया के लिए ESLINT को पूर्व कॉन्फ़िगर करने वाला है:

हमारे डिफ़ॉल्ट निर्यात में हमारे सभी ESLint नियम शामिल हैं, जिनमें ECMAScript 6+ और प्रतिक्रिया शामिल है। इसके लिए eslint, eslint-plugin-import, eslint-plugin-reaction और 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
  }
}

Unfortunatelly मैं निम्नलिखित त्रुटि प्राप्त कर रहा हूँ जब एक .js फ़ाइल को इसके अंदर प्रतिक्रिया JSX कोड के साथ दिया जाता है:

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

जैसा कि पहले ही कहा गया था कि जेएसएक्स को समर्थन देने के लिए एसिाल्ट-कॉन्फिग-एयरबीएनबी कॉन्फ़िगर प्रतिक्रिया नहीं थी?

उस त्रुटि को दूर करने के लिए क्या किया जाना चाहिए?

Answer 1

या तो अपने फ़ाइल एक्सटेंशनों को परिवर्तित करें .jsxजैसा कि उल्लेख किया गया है या jsx-filename-extension नियम को अक्षम करें । .jsJSX के एक्सटेंशन की अनुमति देने के लिए आप अपने कॉन्फिगर को निम्नलिखित में जोड़ सकते हैं ।

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

Comments

यदि आप अपना फ़ाइल नाम एक्सटेंशन बदलना या नियम को अक्षम नहीं करना चाहते हैं, तो इस उत्तर को

— M Falanga

यह स्वीकृत उत्तर नियम को अक्षम नहीं करता है। यह बस .js फ़ाइलों को JSX सम्‍मिलित करने की अनुमति देता है और जो आपने लिंक किया है वह बहुत बड़े पैमाने पर परियोजनाओं में बहुत अधिक अराजकता पैदा करता है।

— JanithaR

सरणी में दूसरा "jsx" तत्व अनावश्यक है। "Js" तत्व पर्याप्त है क्योंकि नियम पहले से ही "jsx" दायरे को संदर्भित करता है।

— रेमंड वचागा

Answer 2

यह मेरे लिए काम है। आपकी मदद करने की उम्मीद है।

1. निष्क्रिय करें jsx-filename-extension .eslintrc:

   "नियम": {"प्रतिक्रिया / jsx-filename-extension": [0]}

2. में webpack.config.js:

   समाधान: {एक्सटेंशन: ['.js', '.jsx']},

Comments

आपको webpack.config.jsउदाहरण जोड़ने के लिए वोट दिया ।

— पिक्सेल 67

Answer 3

अगर यह आपके लिए काम नहीं करता है तो मुझे एक डमी कहें

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

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

Comments

मुझे समझ में नहीं आ रहा है। क्या कोई समझा सकता है इसलिए मैं बेहतर योगदानकर्ता हो सकता हूं?

— एम फालंगा

शायद यह इसलिए है क्योंकि यह फिक्स "काम करता है", यह सबसे अच्छा है, एक वर्कअराउंड है। और आपके प्रोजेक्ट के दौरान कई जेएस फाइलों में एक वर्कअराउंड शामिल है, थोड़े हैसी और अनप्रोफेशनल हैं।

— mkvlrn

मैं मानता हूं कि यह तकनीक मुहावरेदार प्रतिक्रिया नहीं है। हालाँकि मैं केवल इस समस्या को लेकर अपनी प्रविष्टि के साथ आया हूं। मैं इसे सभी फाइलों में करने की सिफारिश नहीं करूंगा, क्योंकि यह अजीब कोड बनाएगा। यदि यह आपके उपयोग का मामला है, तो स्वीकृत उत्तर में सुझाए गए लिंटर नियमों को संशोधित करें।

— एम फालंगा

Answer 5

मार्टिन के जवाब पर खुलासा करने के लिए , ऐसा लगता है कि यह संभव नहीं है, वर्तमान में, JSXरिएक्ट नेटिव में उपयोग करना । एक पीआर बनाया गया था, लेकिन विखंडन और चीजों के अज्ञात परिणामों के बारे में चिंताओं के कारण वापस आ गया था index.ios.jsx। मुझे यकीन नहीं है कि AirBnb इस के आसपास काम करता है या यदि वे करते हैं, लेकिन मैंने मूल rulesरूप से मार्टिन के समान ब्लॉक का उपयोग किया है ।

Answer 6

निम्नलिखित प्रतिक्रिया प्रलेखन :

प्रत्येक JSX तत्व केवल React.createElement (घटक, सहारा, ... बच्चे) को कॉल करने के लिए सिंटैक्टिक चीनी है।

निम्नलिखित Airbnb की स्टाइल गाइड :

जब तक आप JSX नहीं है एक फ़ाइल से ऐप को प्रारंभ कर रहे हैं, तब तक React.createElement का उपयोग न करें ।

आप ऐसा कर सकते हैं:

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