วิธีแก้ไขไฟล์ jsx (ตอบสนอง) ใน emacs?

ฉันใช้โหมด js2 แต่ไม่ได้เยื้อง html ใน javascript อย่างถูกต้อง ฉันได้พบ repo นี้แล้วhttps://github.com/jsx/jsx-mode.elแต่มันไม่ได้มีไว้เพื่อตอบสนอง แต่เป็นสำหรับ jsx อื่น ๆ

คุณใช้อะไรในการแก้ไขแอปพลิเคชันตอบโต้ด้วยไฟล์ jsx

โซลูชันที่ 1:

ขั้นตอนที่ 1 ใช้https://github.com/felipeochoa/rjsx-mode

ขั้นตอนที่ 2 ติดตั้ง Emacs 25+ ดูhttps://github.com/mooz/js2-mode/issues/291

ขั้นตอนที่ 3, แก้ไข rjsx-mode ด้วยโค้ดด้านล่าง

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

โปรดทราบว่ายังมีปัญหาเยื้องอยู่หากคุณใช้ฟังก์ชันลูกศรในแอตทริบิวต์ attribute แต่วิธีนี้ใช้ได้ผลดีในกรณีส่วนใหญ่

rjsx-mode v0.4.0แพทช์ยังคงมีประโยชน์สำหรับรุ่นที่มีเสถียรภาพในปัจจุบัน

ข้อผิดพลาดได้รับการแก้ไขในปี 2018-8-19 ในเวอร์ชันที่ไม่เสถียรดูhttps://github.com/felipeochoa/rjsx-mode/pull/75เพื่อดูรายละเอียด

เหตุผลที่ผมยึดติดrjsx-modeคือมันสืบทอดมาจากโหมด js2 ดังนั้นฉันจึงสามารถใช้ฟังก์ชั่น imenu จากโหมด js2 มันมีประโยชน์มากเมื่อเขียน es6 javascript

โปรดทราบว่าถ้าคุณใช้js2-jsx-modeแทนคุณrjsx-modeยังต้องใช้โปรแกรมแก้ไขของฉัน

โซลูชันที่ 2:

ใช้โหมดเว็บ ฉันไม่ได้ใช้โหมดเว็บ แต่บันทึกย่อประจำรุ่นล่าสุดอ้างว่าการเยื้อง jsx สามารถจัดการได้อย่างเหมาะสม หากคุณใช้โหมดเว็บ imenu จากโหมด js2 จะไม่สามารถใช้งานได้อีกต่อไป

ใน Emacs masterสาขา (ในที่สุด Emacs 27) สนับสนุน JSX ถูกสร้างขึ้นในขณะนี้เข้าสู่โหมด JavaScript เริ่มต้นสำหรับ js-modeEmacs, (ลองเลย! คุณสามารถสร้างจากแหล่งที่มาหรือติดตั้งสแนปชอตจากPPA )

หากคาดว่าจะมีการใช้ JSX ฝ่ายสนับสนุน JSX จะเปิดใช้งานโดยอัตโนมัติในบัฟเฟอร์ JavaScript เกณฑ์เริ่มต้นคือ:

• ชื่อไฟล์ลงท้ายด้วย“ .jsx” หรือ
• import React from 'react'หรือvar React = require('react')ปรากฏขึ้นใกล้ด้านบนของไฟล์

คุณสามารถกำหนดกลยุทธ์การตรวจสอบโดยการเพิ่ม regexps js-jsx-regexpsให้กับตัวแปร ต้องการเปิดใช้งานโดยไม่มีเงื่อนไข JSX คุณยังสามารถตั้งค่าjs-jsx-syntaxการทีในตัวแปรไฟล์ init / .dir-locals.el / แฟ้มหรือโทรในjs-jsx-enablejs-mode-hook

เมื่อเปิดใช้งานแล้ว JSX จะถูกเน้นและเยื้องอย่างเหมาะสม

ผู้ใช้ที่ผิดหวังกับการสนับสนุนการเยื้อง JSX ที่มีอยู่ตั้งแต่เวอร์ชัน 25 อาจประหลาดใจอย่างยิ่งที่พบว่าการเยื้องนั้นมีความแม่นยำมากกว่าเดิม ตัวอย่างเช่น JSX ไม่จำเป็นต้องห่อในวงเล็บอีกต่อไปเพื่อให้มีการเยื้องอย่างเหมาะสม การเยื้องรหัสด้วยฟังก์ชั่นลูกศรก็ทำงานได้ดีขึ้นเช่นกัน

ฉันใช้โหมดเว็บด้วยการกำหนดค่าต่อไปนี้:

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

ฉันยังใช้โหมดเว็บและหากคุณใช้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แก้ไขปัญหาเดียวกัน นอกจากนี้คุณยังจะต้องกำหนดค่า Flycheck แยกต่างหากเพื่อให้ขุยทำงาน

หากคุณต้องการเฉพาะสิ่งที่เกี่ยวข้องกับ 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