Emacs में jsx (प्रतिक्रिया) फ़ाइलों को कैसे संपादित करें?

19

मैंने js2- मोड का उपयोग किया है, लेकिन यह html को जावास्क्रिप्ट में ठीक से इंडेंट नहीं करता है। मैंने यह रेपो https://github.com/jsx/jsx-mode.el पाया है, लेकिन यह प्रतिक्रिया के लिए नहीं है, यह कुछ अन्य jsx के लिए है।

आप jsx फ़ाइलों के साथ प्रतिक्रिया अनुप्रयोग के संपादन के लिए क्या उपयोग करते हैं?

major-mode javascript

— jcubic
स्रोत

17

समाधान 1:

चरण 1, https://github.com/felipeochoa/rjsx-mode का उपयोग करें

चरण 2, Emacs 25+ स्थापित करें, https://github.com/mooz/js2-mode/issues/291 देखें

चरण 3, नीचे कोड के साथ पैच rjsx- मोड

(defadvice js-jsx-indent-line (after js-jsx-indent-line-after-hack activate)
  "Workaround sgml-mode and follow airbnb component style."
  (save-excursion
    (beginning-of-line)
    (if (looking-at-p "^ +\/?> *$")
        (delete-char sgml-basic-offset))))

कृपया ध्यान दें कि घटक विशेषता में तीर फ़ंक्शन का उपयोग करने पर अभी भी कुछ इंडेंट इश्यू है। लेकिन यह समाधान ज्यादातर मामलों में ठीक काम करता है।

वर्तमान स्थिर संस्करण के लिए पैच अभी भी उपयोगी है rjsx-mode v0.4.0।

बग 2018-8-19 पर अस्थिर संस्करण में तय किया गया था , विवरण के लिए https://github.com/felipeochoa/rjsx-mode/pull/75 देखें।

मेरे द्वारा छड़ी करने rjsx-modeका कारण यह है कि यह js2- मोड से विरासत में मिला है इसलिए मैं js2- मोड से imenu फ़ंक्शन का उपयोग कर सकता हूं। Es6 जावास्क्रिप्ट लिखते समय यह बहुत उपयोगी है।

कृपया ध्यान दें कि यदि आप js2-jsx-modeइसके बजाय उपयोग करते हैं rjsx-mode, तो भी आपको मेरे पैच की आवश्यकता है।

समाधान 2:

वेब-मोड का उपयोग करें । मैं वेब-मोड का उपयोग नहीं करता, लेकिन इसके हालिया रिलीज़ नोट का दावा है कि jsx इंडेंटेशन को ठीक से संभाला जा सकता है। यदि आप वेब-मोड का उपयोग करते हैं, तो js2-mode से imenu कोई और उपलब्ध नहीं है।

— चने बिन
स्रोत

2

नहीं पता था कि वेब-मोड समर्थन jxx, मैं इसे तब उपयोग करूंगा, लेखक वास्तव में जीथब पर उत्तरदायी है, अगर आपको इंडेंटेशन में बग मिलते हैं।

— ज्यूकिक

1

Rjsx- मोड में इंडेंटेशन समस्या तय हो गई है!

— CGL

यह मेरा फिक्स लगाने के बाद तय हुआ है। मैं दोनों Emacs 25.2 और 25.3 में rjsx-मोड का उपयोग करें

— chen बिन

पैच एक अच्छा विचार है, काश यह पहले से ही rjsx मोड में विलीन हो जाता!

— रुडोल्फ ओलाह

क्या आप नए संस्करणों के साथ पैच के अनावश्यक होने की जानकारी जोड़ सकते हैं rjsx-modeया इसे पूरी तरह से हटा सकते हैं?

— DoMiNeLa10

5

Emacs पर masterशाखा (अंततः Emacs 27), JSX समर्थन अब, Emacs के लिए डिफ़ॉल्ट जावास्क्रिप्ट मोड में बनाया गया है js-mode। (इसे आज़माएं! आप स्रोत से निर्माण कर सकते हैं या उदाहरण के लिए पीपीए से स्नैपशॉट स्थापित कर सकते हैं ।)

यदि JSX का उपयोग प्रत्याशित है, तो जावास्क्रिप्ट बफ़र्स में JSX समर्थन स्वचालित रूप से सक्षम हो जाएगा। डिफ़ॉल्ट मानदंड हैं:

फ़ाइल का नाम ".jsx", या में समाप्त होता है
import React from 'react'या var React = require('react')फ़ाइल के शीर्ष के पास दिखाई देता है

आप चर में regexps जोड़कर पता लगाने की रणनीति को अनुकूलित कर सकते हैं js-jsx-regexps। बिना शर्त के js-jsx-syntaxJSX को सक्षम करने के लिए, आप init फ़ाइल / .dir-locals.el / फ़ाइल चर में t करने के लिए सेट कर सकते हैं या कॉल कर सकते js-jsx-enableहैं js-mode-hook।

एक बार सक्षम होने के बाद, JSX को हाइलाइट और इंडेंट किया जाएगा।

जो उपयोगकर्ता JSX इंडेंटेशन सपोर्ट से निराश थे, वे वर्जन 25 से उपलब्ध हैं, यह जानकर सुखद आश्चर्य हो सकता है कि इंडेंटेशन पहले की तुलना में कहीं अधिक सटीक है। उदाहरण के लिए, JSX को अब ठीक से इंडेंट होने के लिए कोष्ठक में लपेटने की आवश्यकता नहीं है। तीर फ़ंक्शंस के साथ इंडेंटिंग कोड भी अब बहुत बेहतर काम करता है।

— जैक्सन
स्रोत

3

मैं निम्नलिखित कॉन्फ़िगरेशन के साथ वेब-मोड का उपयोग करता हूं :

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))

;; (setq web-mode-enable-auto-pairing t)
(add-hook 'web-mode-hook
          (lambda ()
            ;; short circuit js mode and just do everything in jsx-mode
            (if (equal web-mode-content-type "javascript")
                (web-mode-set-content-type "jsx")
              (message "now set to: %s" web-mode-content-type))))

— amirouche
स्रोत

आपका सभी कॉन्फ़िगरेशन JSX के लिए प्रासंगिक नहीं है।

— DoMiNeLa10

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

— amirouche

0

मैं वेब मोड का भी उपयोग करता हूं और यदि आप उपयोग use-packageकरते हैं तो आप इस कोड स्निपेट का उपयोग कर सकते हैं।

(use-package web-mode
  :defer 2
  :after (add-node-modules-path)
  :ensure t
  :mode ("\\.html?\\'"
         "/themes/.*\\.php?\\'"
         "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'"
         "\\.\\(handlebars\\|hbs\\)\\'")
  :config (progn
            (setq
             web-mode-markup-indent-offset 2
             web-mode-css-indent-offset 2
             web-mode-code-indent-offset 2
             web-mode-enable-auto-closing t
             web-mode-enable-auto-opening t
             web-mode-enable-auto-pairing t
             web-mode-enable-auto-indentation t
             web-mode-enable-auto-quoting t
             web-mode-enable-current-column-highlight t
             web-mode-enable-current-element-highlight t
             web-mode-content-types-alist
             '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

यह आपके रास्ते में स्थानीय नोड मॉड्यूल भी जोड़ता है ताकि आप के eslintसाथ उपयोग कर सकें flycheck। ध्यान दें कि आप macOS पर हैं, जिसे add-node-modules-pathउसी समस्या को ठीक करने की आवश्यकता है। आपको काम करने के लिए लाइनिंग के लिए फ्लाईचेक को अलग से कॉन्फ़िगर करने की भी आवश्यकता होगी।

यदि आप केवल jsx संबंधित सामान चाहते हैं तो आप इसका उपयोग कर सकते हैं:

(use-package web-mode
  :ensure t
  :mode ("/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")
  :config (progn
            (setq
             web-mode-content-types-alist
             '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

यह केवल नाम वाले फ़ोल्डर पर वेब मोड को सक्षम करेगा components, containersया src। यदि आप किसी भी .js फ़ाइल पर वेब मोड को सक्षम करना चाहते हैं तो उन लाइनों को हटा दें। यदि आप srcफ़ोल्डरों में वेब-मोड को सक्षम नहीं करना चाहते हैं, तो उस लाइन को स्ट्रिंग पर :modeऔर दोनों पर निकालें :config।