2015-05-18 22 views
46

पर प्रतिक्रिया के लिए एटम संपादक में मैं निम्न प्लग-इनESLint विन्यास के लिए कैसे एटम संपादक

  1. लिंटर स्थापित
  2. लिंटर-eslint

ऐसा लगता है कि वे पहचान नहीं पा रहे JSX Syntaxis।

मैंने इसे कमांड लाइन पर काम किया है लेकिन esprima-fb और eslint-plugin-react जैसे अन्य प्लगइन का उपयोग करना पड़ा। ऐसा लगता है कि एटम संपादक के लिए ऐसे कोई प्लगइन्स नहीं हैं और आप जानना चाहते हैं कि आप में से कोई भी इस बारे में हैक करने का तरीका जानता है।

उत्तर

58

Eslint React.js के साथ अच्छी तरह इस्तेमाल करने के लिए:

  1. लिंटर स्थापित & लिंटर-eslint प्लगइन्स
  2. भागो npm install eslint-plugin-react
  3. अपने .eslintrc कॉन्फ़िग फ़ाइल को "plugins": ["react"] जोड़े
  4. को "ecmaFeatures": {"jsx": true} जोड़े अपने .eslintrc कॉन्फ़िग फ़ाइल

{ 
    "env": { 
     "browser": true, 
     "node": true 
    }, 

    "globals": { 
     "React": true 
    }, 

    "ecmaFeatures": { 
     "jsx": true 
    }, 

    "plugins": [ 
     "react" 
    ] 
} 

मैं इस समय Eslint v1.1.0 उपयोग कर रहा हूँ: यहाँ एक .eslintrc कॉन्फ़िग फ़ाइल का एक उदाहरण है।

साइड नोट: मैं दोनों eslint स्थापित करने और परियोजना निर्भरता के रूप में प्लगइन प्रतिक्रिया eslint-पड़ा है (जैसे, npm install eslint eslint-plugin-react --save-dev)। उम्मीद है कि यह मदद करता है।

+1

क्या आपने कभी "ESLint पार्सिंग त्रुटि: अप्रत्याशित टोकन" का सामना किया है? – efkan

+2

जॉन की सूची के अलावा मुझे [एटम रिएक्ट प्लगइन] स्थापित करना पड़ा था (http://orktes.github.io/atom-react/) – Dmitry

+1

मुझे 'प्रतिक्रिया' से आयात प्रतिक्रिया, {घटक} पर आयात त्रुटि मिल रही है। ; जैसा आपने कहा था कॉन्फ़िगर करने के बाद। –

0

मैं एटम का उपयोग करता हूं और यह ठीक काम करता है। आपको बस अपनी परियोजना रूट में .eslintrc की आवश्यकता है जो ईएसलिंट को बताती है कि आप eslint-plugin-react का उपयोग कर रहे हैं।

34

अपडेट किया गया 2016 के लिए इस सवाल का जवाब: सिर्फ एटम में react पैकेज स्थापित और अपनी परियोजना के जड़ में एक .eslintrc फ़ाइल जोड़ने (या अपने घर dir में) के बाद युक्त

{ 
    "parserOptions": { 
    "ecmaFeatures": { 
     "jsx": true 
    } 
    }, 
    "env": { 
    "es6": true 
    } 
} 

और फिर से खुल वाली किसी भी फ़ाइल जेएसएक्स और इसे काम करना चाहिए।

+1

धन्यवाद! यह पूरी तरह से काम करता है – brunetton

+0

क्या आप यहां अधिक जानकारी जोड़ सकते हैं? – SuperUberDuper

+1

पैकेज का नाम अभी 'प्रतिक्रिया' है https://orktes.github.io/atom-react/ – Krishnan

6

आप एक परियोजना स्थानीय .eslintrc फ़ाइल कि ESLint द्वारा उठाया जाएगा संपादित करने के लिए की जरूरत है। यदि आप एटम के साथ एकीकरण चाहते हैं, तो आप प्लगइन्स linter और linter-eslint इंस्टॉल कर सकते हैं।

जल्दी से सर्वोत्तम प्रथाओं प्रतिक्रिया के लिए, वर्तमान सबसे अच्छा विकल्प NPM पैकेज eslint-plugin-react स्थापित करने और उनके recommended विन्यास का विस्तार करने के बजाय मैन्युअल रूप से कई नियम टॉगल है सेटअप ESLint करने के लिए:

{ 
    "extends": [ "eslint:recommended", "plugin:react/recommended" ], 
    "plugins": [ "react" ] 
} 

यह eslint-plugin-react सक्षम हो जाएगा और ESLint से नियमों की सिफारिश की & प्रीसेट प्रीसेट। वहाँ नवीनतम ESLint user-guide अपने आप में और अधिक मूल्यवान जानकारी है।मैक उपयोगकर्ता के लिए

{ 
    "parserOptions": { 
    "sourceType": "module", 
    "ecmaVersion": 6, 
    "ecmaFeatures": { 
     "impliedStrict": true, 
     "experimentalObjectRestSpread": true, 
     "jsx": true 
    } 
    } 
} 
0
  1. :

    यहाँ पार्सर विकल्पों ES6 के लिए अनुकूलित और webpack का एक उदाहरण है -> वरीयताएँ - एटम पर जाएं> स्थापित -> खोज पैकेज लिंटर-eslint -> क्लिक उबंटू उपयोगकर्ता के लिए

  2. स्थापित: संपादित करें पर जाएं -> वरीयताएँ -> स्थापित -> खोज पैकेज लिंटर-eslint -> क्लिक

  3. जाने टी स्थापित ओ कमांड लाइन ---> NPM स्थापित --save-देव eslint-config-rallycoding

  4. परमाणु आओ नई फ़ाइल .eslintrc बनाने के लिए और rallycoding का विस्तार।

संबंधित मुद्दे