Emacs jsx (tepki) dosyaları nasıl düzenlenir?

Ben js2-modu kullanıyorum ama düzgün javascript html girintili değil. Bu repoyu buldum https://github.com/jsx/jsx-mode.el ama tepki vermek için değil, diğer bazı jsx için.

Reaksiyon uygulamasını jsx dosyalarıyla düzenlemek için ne kullanıyorsunuz?

Çözüm 1:

Adım 1, https://github.com/felipeochoa/rjsx-mode kullanın

Adım 2, Emacs 25+'yi yükleyin, bkz. Https://github.com/mooz/js2-mode/issues/291

Adım 3, rjsx-mode'u aşağıdaki kodla yapıştırın

(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))))

Bileşen özniteliğinde ok işlevini kullanırsanız, bazı girinti sorunları olduğunu lütfen unutmayın. Ancak bu çözüm çoğu durumda iyi çalışır.

Düzeltme eki geçerli kararlı sürüm için hala yararlıdır rjsx-mode v0.4.0.

Hata 2018-8-19'da kararsız sürümde düzeltildi, ayrıntılar için bkz. Https://github.com/felipeochoa/rjsx-mode/pull/75 .

rjsx-modeYapışmamın nedeni js2 modundan miras almasıdır, böylece js2 modundan imenu fonksiyonlarını kullanabilirim. Es6 javascript yazarken çok kullanışlıdır.

js2-jsx-modeBunun yerine rjsx-mode, hala yamama ihtiyacınız olduğunu lütfen unutmayın .

Çözüm 2:

Web modunu kullanın . Web modunu kullanmıyorum ancak son sürüm notunda jsx girintisinin düzgün bir şekilde işlenebileceğini iddia ediyor. Web modu kullanıyorsanız, js2 modundan imenu artık kullanılamaz.

Emacs masterdalında (sonunda Emacs 27), JSX desteği artık Emacs, için varsayılan JavaScript moduna yerleştirilmiştir js-mode. (Deneyin! Kaynaktan oluşturabilir veya örneğin bir PPA'dan anlık görüntü yükleyebilirsiniz .)

JSX kullanımı öngörülüyorsa, JavaScript arabelleklerinde JSX desteği otomatik olarak etkinleştirilecektir. Varsayılan ölçütler:

• dosya adı “.jsx” ile biter veya
• import React from 'react'veya var React = require('react')dosyanın üst kısmında görünür

Değişkene normal ifadeler ekleyerek algılama stratejisini özelleştirebilirsiniz js-jsx-regexps. Koşulsuz JSX etkinleştirmek için ayrıca ayarlayabilirsiniz js-jsx-syntaxinit dosyası / .dir-locals.el / dosya değişkeni veya çağrısında t js-jsx-enableiçinde js-mode-hook.

Etkinleştirildiğinde, JSX düzgün şekilde vurgulanır ve girintilenir.

Sürüm 25'ten beri mevcut olan JSX girinti desteğiyle hayal kırıklığına uğramış olan kullanıcılar, girintinin öncekinden çok daha doğru olduğunu bulmaktan hoşnut olabilirler. Örneğin, JSX'in düzgün girintilenmesi için artık parantez içine alınması gerekmez. Kodu ok işlevleriyle girintilemek de artık çok daha iyi çalışıyor.

Kullandığım web modu aşağıdaki yapılandırmaya sahip:

(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))))

Ayrıca web modunu kullanıyorum ve use-packagekullanıyorsanız bu kod snippet'ini kullanabilirsiniz.

(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]?\\'")))))

Kullanmak böylece Bu aynı zamanda yoluna yerel düğüm modüllerini ekler eslintile flycheck. Bunun add-node-modules-path, aynı sorunu düzeltmesi gereken macOS'ta olduğunuzu varsaydığını unutmayın . Ayrıca, linch'in çalışması için Flycheck'i ayrı olarak yapılandırmanız gerekecektir.

Sadece jsx ile ilgili şeyler istiyorsanız bunu yapabilirsiniz:

(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]?\\'")))))

Bu isimlerle sadece klasörler web modunu sağlayacak components, containersya da src. Herhangi bir .js dosyasında web modunu etkinleştirmek istiyorsanız, bu satırları kaldırın. Web modunun srcklasörlerde etkinleştirilmesini istemiyorsanız , dizedeki bu satırı hem :modeve hem de kaldırın :config.