Bagaimana cara mengedit file jsx (bereaksi) di emacs?

Saya telah menggunakan js2-mode tetapi tidak membuat html di javascript dengan benar. Saya telah menemukan repo ini https://github.com/jsx/jsx-mode.el tetapi tidak untuk bereaksi, itu untuk beberapa jsx lainnya.

Apa yang Anda gunakan untuk mengedit aplikasi bereaksi dengan file JSX?

Solusi 1:

Langkah 1, Gunakan https://github.com/felipeochoa/rjsx-mode

Langkah 2, Instal Emacs 25+, lihat https://github.com/mooz/js2-mode/issues/291

Langkah 3, patch rjsx-mode dengan kode di bawah ini

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

Harap perhatikan bahwa masih ada beberapa masalah indentasi jika Anda menggunakan fungsi panah pada atribut komponen. Tetapi solusi ini berfungsi dengan baik dalam banyak kasus.

Patch masih berguna untuk versi stabil saat ini rjsx-mode v0.4.0.

Bug diperbaiki pada 2018-8-19 dalam versi tidak stabil , lihat https://github.com/felipeochoa/rjsx-mode/pull/75 untuk detailnya.

Alasan saya bertahan rjsx-modeadalah karena ia mewarisi dari mode js2 sehingga saya dapat menggunakan fungsi imenu dari mode js2. Ini sangat berguna saat menulis javascript es6.

Harap dicatat jika Anda menggunakan js2-jsx-modebukan rjsx-mode, Anda masih membutuhkan tambalan saya.

Solusi 2:

Gunakan mode web. Saya tidak menggunakan web-mode tetapi catatan rilisnya baru-baru ini mengklaim indentasi jsx dapat ditangani dengan benar. Jika Anda menggunakan mode web, imenu dari mode js2 tidak tersedia lagi.

Pada mastercabang Emacs (akhirnya Emacs 27), dukungan JSX sekarang dibangun ke dalam mode JavaScript default untuk Emacs js-mode,. (Cobalah! Anda dapat membangun dari sumber atau mis. Memasang snapshot dari PPA .)

Jika penggunaan JSX diantisipasi, maka dukungan JSX akan secara otomatis diaktifkan di buffer JavaScript. Kriteria default adalah:

• nama file berakhir dengan ".jsx", atau
• import React from 'react'atau var React = require('react')muncul di dekat bagian atas file

Anda dapat menyesuaikan strategi deteksi dengan menambahkan regexps ke variabel js-jsx-regexps. Untuk mengaktifkan BEJ tanpa syarat, Anda juga bisa mengatur js-jsx-syntaxuntuk t dalam variabel file / .dir-locals.el / init file, atau panggilan js-jsx-enabledi js-mode-hook.

Setelah diaktifkan, BEJ akan disorot dan lekukan dengan benar.

Pengguna yang kecewa dengan dukungan indentasi JSX tersedia sejak versi 25 mungkin akan terkejut menemukan bahwa lekukan itu jauh lebih akurat daripada sebelumnya. Sebagai contoh, BEJ tidak perlu lagi dibungkus dalam tanda kurung agar indentasi dengan benar. Indentasi kode dengan fungsi panah juga berfungsi jauh lebih baik sekarang.

Saya menggunakan mode web dengan konfigurasi berikut:

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

Saya juga menggunakan mode web dan jika Anda menggunakan use-packageAnda dapat menggunakan potongan kode ini.

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

Ini juga menambahkan modul simpul lokal untuk jalan Anda sehingga Anda dapat menggunakan eslintdengan flycheck. Catatan ini mengasumsikan Anda menggunakan MacOS, yang perlu add-node-modules-pathmemperbaiki masalah yang sama. Anda juga perlu mengonfigurasi Flycheck secara terpisah agar linting berfungsi.

Jika Anda hanya menginginkan hal-hal terkait Jsx, Anda dapat menggunakan ini:

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

Ini akan mengaktifkan mode web hanya pada folder dengan nama components, containersatau src. Jika Anda ingin mengaktifkan mode web pada file .js apa pun, hapus baris tersebut. Jika Anda tidak ingin mode web diaktifkan di srcfolder, maka hapus baris itu di string baik aktif :modedan :config.