Làm cách nào để chỉnh sửa tập tin jsx (phản ứng) trong emacs?

Tôi đã sử dụng chế độ js2 nhưng nó không thụt vào html trong javascript đúng cách. Tôi đã tìm thấy repo này https://github.com/jsx/jsx-mode.el nhưng nó không phải để phản ứng, nó dành cho một số jsx khác.

Bạn sử dụng gì để chỉnh sửa ứng dụng phản ứng với các tệp jsx?

Giải pháp 1:

Bước 1, sử dụng https://github.com/felipeochoa/rjsx-mode

Bước 2, Cài đặt Emacs 25+, xem https://github.com/mooz/js2-mode/issues/291

Bước 3, Patch chế độ rjsx với mã bên dưới

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

Xin lưu ý rằng vẫn còn một số vấn đề thụt lề nếu bạn sử dụng chức năng mũi tên trong thuộc tính thành phần. Nhưng giải pháp này hoạt động tốt trong hầu hết các trường hợp.

Bản vá vẫn hữu ích cho phiên bản ổn định hiện tại rjsx-mode v0.4.0.

Lỗi đã được sửa vào 2018-8-19 ở phiên bản không ổn định , xem https://github.com/felipeochoa/rjsx-mode/pull/75 để biết chi tiết.

Lý do tôi dính vào rjsx-modelà nó kế thừa từ chế độ js2 để tôi có thể sử dụng các hàm imothy từ chế độ js2. Nó rất hữu ích khi viết javascript es6.

Xin lưu ý nếu bạn sử dụng js2-jsx-modethay vì rjsx-mode, bạn vẫn cần bản vá của tôi.

Giải pháp 2:

Sử dụng chế độ web. Tôi không sử dụng chế độ web nhưng lưu ý phát hành gần đây của nó tuyên bố thụt lề jsx có thể được xử lý đúng cách. Nếu bạn sử dụng chế độ web, imothy từ chế độ js2 sẽ không còn nữa.

Trên masternhánh Emacs (cuối cùng là Emacs 27), hỗ trợ JSX hiện được tích hợp vào chế độ JavaScript mặc định cho Emacs , js-mode. (Hãy dùng thử! Bạn có thể xây dựng từ nguồn hoặc ví dụ: cài đặt ảnh chụp nhanh từ PPA .)

Nếu việc sử dụng JSX được dự đoán, thì hỗ trợ JSX sẽ tự động được kích hoạt trong bộ đệm JavaScript. Các tiêu chí mặc định là:

• Tên tập tin kết thúc bằng Tiếng Nhật .jsx, hoặc
• import React from 'react'hoặc var React = require('react')xuất hiện gần đầu tập tin

Bạn có thể tùy chỉnh chiến lược phát hiện bằng cách thêm regexps vào biến js-jsx-regexps. Để bật JSX vô điều kiện, bạn cũng có thể đặt js-jsx-syntaxthành t trong một tệp init / .dir-locals.el / tệp hoặc gọi js-jsx-enablevào js-mode-hook.

Khi được bật, JSX sẽ được tô sáng và thụt lề đúng cách.

Người dùng đã thất vọng với hỗ trợ thụt lề JSX có sẵn kể từ phiên bản 25 có thể ngạc nhiên khi thấy rằng thụt lề chính xác hơn nhiều so với trước đây. Chẳng hạn, JSX không còn cần phải được gói trong ngoặc đơn để được thụt lề đúng cách. Mã thụt lề với các chức năng mũi tên cũng hoạt động tốt hơn nhiều bây giờ.

Tôi sử dụng chế độ web với cấu hình sau:

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

Tôi cũng sử dụng chế độ web và nếu bạn sử dụng, use-packagebạn có thể sử dụng đoạn mã này.

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

Điều này cũng cho biết thêm module nút địa phương để con đường của bạn để bạn có thể sử dụng eslintvới flycheck. Lưu ý điều này giả sử bạn đang sử dụng macOS, cần add-node-modules-pathkhắc phục vấn đề tương tự. Bạn cũng sẽ cần phải định cấu hình Flycheck một cách riêng biệt để linting hoạt động.

Nếu bạn chỉ muốn những thứ liên quan đến jsx, bạn có thể sử dụng cái này:

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

Điều này sẽ kích hoạt chế độ web chỉ trên thư mục với tên components, containershoặc src. Nếu bạn muốn bật chế độ web trên bất kỳ tệp .js nào, hãy xóa các dòng đó. Nếu bạn không muốn chế độ web được bật trong srccác thư mục thì hãy xóa dòng đó trong chuỗi cả bật :modevà tắt :config.