emacs에서 jsx (반응) 파일을 편집하는 방법?

js2 모드를 사용했지만 자바 스크립트에서 html을 올바르게 들여 쓰기하지 않습니다. 이 저장소 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 모드 패치

(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-mode에서 상속되므로 js2-mode에서 imenu 함수를 사용할 수 있기 때문입니다. es6 자바 스크립트를 작성할 때 매우 유용합니다.

js2-jsx-mode대신에 사용 하는 경우 rjsx-mode에도 여전히 패치가 필요합니다.

해결책 2 :

웹 모드를 사용하십시오 . 웹 모드를 사용하지 않지만 최신 릴리스 노트에서는 jsx 들여 쓰기를 올바르게 처리 할 수 ​​있다고 주장합니다. 웹 모드를 사용하는 경우 js2-mode의 imenu를 더 이상 사용할 수 없습니다.

Emacs master브랜치 (최종 Emacs 27)에서 JSX 지원은 이제 Emacs의 기본 JavaScript 모드로 구축되었습니다 js-mode. (시도해보십시오! 소스에서 빌드 하거나 PPA 에서 스냅 샷을 설치할 수 있습니다 .)

JSX 사용이 예상되면 JavaScript 버퍼에서 JSX 지원이 자동으로 활성화됩니다. 기본 기준은 다음과 같습니다.

• 파일 이름이“.jsx”로 끝나거나
• import React from 'react'또는 var React = require('react')파일 상단 근처에 나타납니다

regexp를 변수에 추가하여 탐지 전략을 사용자 정의 할 수 있습니다 js-jsx-regexps. JSX를 무조건 활성화하려면 js-jsx-syntaxinit 파일 / .dir-locals.el / 파일 변수에서 t로 설정 하거나을 호출 js-jsx-enable할 수도 js-mode-hook있습니다.

활성화되면 JSX가 강조 표시되고 올바르게 들여 쓰기됩니다.

버전 25 이후로 제공되는 JSX 들여 쓰기 지원에 실망한 사용자는 들여 쓰기가 이전보다 훨씬 더 정확하다는 것을 기쁘게 생각할 수 있습니다. 예를 들어, 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. 이것은 add-node-modules-path동일한 문제를 해결 해야하는 macOS에 있다고 가정합니다 . 보푸라기가 작동하도록 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폴더 에서 웹 모드를 사용하지 않으려면 on :mode및 에서 문자열에서 해당 줄을 제거하십시오 :config.