प्रतिक्रिया जेएसएक्स को जावास्क्रिप्ट फ़ाइल प्रकार के रूप में जोड़ने के लिए कैसे करें और एस्लाइनिंग, ऑटो पूर्णता सक्षम करें?

Question

मैंने हाल ही में vim का उपयोग करना शुरू कर दिया है। मैं .jsx एक्सटेंशन वाली फ़ाइलों को .js जावा स्क्रिप्ट फ़ाइल के रूप में माना जाना चाहता हूं। इसके अलावा मैं अपने .jsx फ़ाइलों के साथ es-linting, snippets को सक्षम करना चाहता हूं। मुझे लगता है मैं भी स्थापित किया है Bundle 'mxw/vim-jsx' vim में jsx समर्थन करने के लिए अपने सिस्टम

npm install -g eslint 
npm install -g babel-eslint 
npm install -g eslint-plugin-react 

में निम्नलिखित संकुल स्थापित किया है। Vim-react-snippets

Answer 1

मैं के लिए सेटअप vim के लिए यह ट्यूटोरियल लिखने का फैसला किया गहराई में विकास प्रतिक्रिया ताकि शुरुआत करने वालों को यह उपयोगी लगता है जब वे विम से शुरू होते हैं और प्रतिक्रिया करते हैं।

वाक्य रचना हाइलाइटिंग

jsx वाक्य रचना, सही vim में देखने mxw's Vim JSX प्लगइन का उपयोग करने के लिए प्रकाश डाला पाने के लिए।

कदम अपने .vimrc में mxw/vim-jsx प्लगइन

आप Vundle उपयोग करते हैं,

---

ऐड निम्नलिखित लाइनों स्थापित करने के लिए:

Plugin 'mxw/vim-jsx' 
Plugin 'pangloss/vim-javascript' 

इस प्लग पर निर्भर करता है pangloss/vim-javascript तो आपको इंस्टाल करने की आवश्यकता है मैं भी साथ ही।

विम के भीतर से स्थापित करने के लिए, नीचे दिए गए आदेशों का उपयोग करें।

:so ~/.vimrc 

स्रोत के लिए .vimrc विन्यास फाइल और इसका इस्तेमाल करते हैं, अगले

:PluginInstall 

बदल आप जावास्क्रिप्ट फाइलों में रोगज़नक़

---

cd ~/.vim/bundle 
git clone https://github.com/mxw/vim-jsx.git 

सक्षम JSX सिंटेक्स Highlighing का उपयोग करते हैं

अपने निम्नलिखित लाइनों को जोड़ें। vimrc: vim

में

let g:jsx_ext_required = 0 

को सक्षम करने से eslint आप नवीनतम eslint (लेखन के समय 2.11.1 प्रयुक्त) के साथ-साथ निम्नलिखित सहायक NPM पैकेज इंस्टॉल करने की जरूरत है। यह भी सुनिश्चित करें कि आपके पास node.js संस्करण 4 या इससे ऊपर आपके सिस्टम में स्थापित है।

कोलाहल-eslint - ESLint के लिए विशिष्ट linting नियम प्रतिक्रिया जैसे componentDidMount

में setState के उपयोग को रोकने के

npm install --save-dev eslint 
npm install --save-dev babel-eslint 
npm install --save-dev eslint-plugin-react 

मैं करने का फैसला किया - ES6 linting

eslint-प्लगइन-प्रतिक्रिया समर्थन करने के लिए एयरबीएनबी द्वारा उपयोग की जाने वाली सामान्य प्रथाओं और सम्मेलनों का उपयोग करें, इसलिए मैंने निम्नलिखित संकुल भी स्थापित किए हैं। लेकिन आपको उनकी आवश्यकता नहीं है यदि आप एयरबीएनबी एस्लिंट प्रीसेट का उपयोग नहीं करना चाहते हैं।

npm install --save-dev eslint-config-airbnb 
npm install --save-dev eslint-plugin-import 
npm install --save-dev eslint-plugin-jsx-a11y 

---

एक कॉन्फ़िग फ़ाइल .eslintrc.json बनाएं अपनी परियोजना के रूट में: (आप eslint का उपयोग intreactive तरह से eslint विन्यास फाइल उत्पन्न करने के लिए कर सकते हैं)

eslint --init 

(आप तो किसी प्रीसेट को चुना है यह सुनिश्चित करें कि आप उस लिंट प्रीसेट के लिए आवश्यक पैकेज भी इंस्टॉल करें)

मैंने "airbnb" बढ़ाया लेकिन अतिरंजित मेरी परियोजना के लिए कुछ नियमों को संपादित करें। "फैली" आप उपयोग कर सकते हैं: "eslint: अनुशंसित" कुछ सामान्य फाहा नियम सक्षम करने के लिए eslint द्वारा सिफारिश की यहाँ मेरी .eslintrc.json फ़ाइल

{ 
    "extends"  : "airbnb", 
    "parser"  : "babel-eslint", 
    "parserOptions" : { 
     "ecmaVersion" : 6, 
     "sourceType" : "module", 
     "ecmaFeatures" : { 
      "jsx":true 
     } 
    }, 
    "env": { 
     "browser" : true, 
     "node" : true, 
     "jquery" : true 
    }, 
    "settings":{ 
     "react":{ 
      "pragma":"React", 
      "version":"15.1.0" 
     }, 
     "ecmascript":6, 
     "jsx":true 
    }, 
    "plugins": [ 
     "react" 
    ], 
    "rules": { 
     "strict": 0, 
     "quotes": 0, 
     "no-unused-vars": 1, 
     "camelcase": 1, 
     "no-underscore-dangle": 1, 
     "comma-dangle":[1,"never"], 
     "indent":["error",4], 
     "react/jsx-indent":0, 
     "react/jsx-equals-spacing": [2, "always"], 
     "no-console":0, 
     "max-len":1, 
     "no-param-reassign":1, 
     "key-spacing": [ 
       2, 
       { 
       "align": "colon", 
       "beforeColon": true, 
       "afterColon": true 
       } 
     ], 
     "no-multi-spaces": [ 
       2, 
       { 
       "exceptions":{ 
        "VariableDeclarator":true, 
        "ImportDeclaration":true, 
        "JSXAttribute":true, 
        "AssignmentExpression":true 
       } 
       } 
     ] 
    } 
} 

---

अब साथ ESLint एकीकृत है विम में सिंटेस्टिक प्लगइन मैंने सिंटैक्स त्रुटि जांच के लिए विम के साथ सिंटेस्टिक का उपयोग करने का निर्णय लिया।

let g:syntastic_javascript_checkers = ['eslint'] 

सभी सेट, लेकिन अभी भी वहाँ एक मुद्दा Syntastic साथ शेष है। सिंटेस्टिक स्थानीय परियोजना के बजाय वैश्विक node_modules खोज करता है।

एक समाधान वैश्विक स्तर पर सभी पैकेज एस्लिंट, बेबेल-एस्लिंट इत्यादि स्थापित करेगा जो निश्चित रूप से एक अच्छा अभ्यास नहीं होगा।

एक अन्य समाधान

अपने package.json में एक NPM स्क्रिप्ट परिभाषित है

"eslint": "eslint -c .eslintrc.json" 

यह वर्तमान पथ में सभी स्थानीय स्तर पर स्थापित NPM संकुल जोड़ना होगा, ताकि वे निष्पादन के लिए उपलब्ध होगा।

और अपने .vimrc फ़ाइल में vim से NPM स्क्रिप्ट के माध्यम से

let g:syntastic_javascript_eslint_exe = 'npm run eslint --' 

यहाँ हम लागू कर रहे हैं linting जोड़ें।

वैकल्पिक: उपयोग प्लग 'mtscout6/syntastic-स्थानीय eslint.vim' प्लगइन

vim में खोलें त्रुटि विंडो आपको अपनी फ़ाइल को खोलने के रूप में -

जोड़ें निम्नलिखित लाइनों अपने .vimrc वर्तमान फाहा त्रुटि (किसी भी मामले में) को दिखाने के लिए के रूप में आप संपादन के लिए अपने फ़ाइल को खोलने

let g:syntastic_always_populate_loc_list = 1 
let g:syntastic_auto_loc_list = 1 
let g:syntastic_check_on_open = 1 
let g:syntastic_check_on_wq = 0 

Snipptes और स्वत: पूर्ण करने

टुकड़ा इंजन जो उपयोगकर्ता एक टुकड़ा विस्तार मानचित्रण मार का नाम लिखकर के टुकड़े डालने की अनुमति के विभिन्न कांटे हैं।

• github.com/SirVer/ultisnips: अजगर, इस रेपो में सभी के टुकड़े का समर्थन करता है।
• github.com/garbas/vim-snipmate: विम, स्निपमेट-स्निपेट, इंजन कभी-कभी अजीब व्यवहार करता है। स्निपेट का समर्थन करता है * *
• github.com/Shougo/neosnippet: विमल, कुछ कॉन्फ़िगरेशन के साथ स्निपेट/* का समर्थन करता है।
• github.com/drmingdrmer/xptemplate: पूरी तरह से अलग वाक्यविन्यास, इस फ़ाइल में निहित स्निपेट नहीं पढ़ता है, लेकिन यह भी बहुत शक्तिशाली है।

मैं neosnippet पसंद करता हूं। स्वत: पूर्णता के लिए neocomplete के साथ स्निपेट सक्षम करने के लिए इसे अपने vim में इंस्टॉल करें।

नियोकम्प्लेट स्निपेट के लिए अतिरिक्त समर्थन के साथ एक अद्भुत स्वत: पूर्ण प्लगइन है।यह शब्दकोश, बफर, omnicomplete और snippets से simulatiously पूरा कर सकते हैं। यह एक सच्ची प्लगइन है जो सर्वश्रेष्ठ संपादकों के बराबर विम स्वत: पूर्ण लाती है।

देखें निर्देश here for neocomplete

स्थापित प्लगइन्स आप सक्षम करने के लिए एक और प्लगइन स्थापित करने की जरूरत है इसके बाद के संस्करण स्थापित करने के बाद विशिष्ट स्निपेट

Bundle 'justinj/vim-react-snippets' 

प्रतिक्रिया है कि प्लगइन के लिए निर्देश here स्थापित देखें।

यदि सभी सेटअप सही तरीके से किए गए हैं, तो आपने ईएस 6 सुविधाओं के साथ प्रतिक्रिया के लिए एस्लिनिंग, ऑटो पूर्णता, जेएसएक्स सिंटैक्स हाइटलाइटिंग के साथ विम सक्षम किया है!

मेरी blog पोस्ट से लिया गया।

Answer 2

प्लगइन है कि आप पहले से ही sets करने के लिए .jsx फ़ाइलों के फ़ाइल प्रकार स्थापित:

इसके अलावा मेरे .vimrc फ़ाइल की पंक्तियों को निम्नलिखित

let g:syntastic_javascript_checkers = ['eslint'] 
let g:jsx_ext_required = 0 

संपादित मिले प्रतिक्रिया के टुकड़े के लिए इस vim प्लगइन जोड़ा javascript.jsx इसलिए उन फ़ाइलों को माना जाना चाहिए जैसे उनकी फ़ाइल प्रकार javascriptप्लस किसी भी jsx-उस प्लगइन द्वारा प्रदान की गई संबंधित सुविधा।

मुझे नहीं पता कि जेएसएक्स के लिए सिंटेस्टिक कैसे सेट अप करें, लेकिन आप बिना के बिना ऐसी बड़ी प्लगइन स्थापित कर सकते हैं। उसके लिए आपको विम बताने के लिए एक लिखने के बाद स्वत: eslint चलाने के लिए after/ftplugin/jsx.vim के लिए नीचे लाइनों जोड़ने की आवश्यकता होगी:

" see :help 'errorformat' 
setlocal errorformat=%E%f:\ line\ %l\\,\ col\ %c\\,\ Error\ -\ %m,%-G%.%#,%W%f:\ line\ %l\\,\ col\ %c\\,\ Warning\ -\ %m,%-G%.%# 

" see :help 'makeprg' and $ eslint --help 
setlocal makeprg=eslint\ -f\ compact 

" run :make % on write 
autocmd! BufWritePost <buffer> silent make % | silent redraw!