Javascript가 포함 된 HTML 파일을 편집하기 위해 emacs를 어떻게 구성합니까?


94

emacs를 사용하여 HTML 태그와 자바 스크립트 콘텐츠가 모두 포함 된 HTML 파일을 편집하는 힘든 첫 단계를 시작했습니다. nxhtml을 설치하고 사용해 보았습니다. 즉 .html 파일에 nxhtml-mumamo-mode를 사용하도록 설정했습니다. 그러나 나는 그것을 좋아하지 않습니다. 코드의 자바 스크립트 부분을 편집 할 때 탭 들여 쓰기가 C / C ++ 코드를 편집 할 때처럼 작동하지 않습니다. 행 안에 탭을 놓기 시작하고 행 앞의 공백에 탭을 치면 행을 다시 탭하는 대신 탭을 삽입합니다.

내가 싫어하는 또 다른 측면은 일반적인 C / C ++ 모드처럼 구문 색상을 지정하지 않는다는 것입니다. HTML 파일을 편집 할 때 기본 자바 모드의 동작을 선호하지만 HTML 코드와 잘 어울리지 않습니다. :-(

1) Javascript 부분으로 HTML 파일을 편집하는 더 나은 모드가 있습니까?

2) nxhtml이 javascript 부분에 기본 Java 모드를 사용하도록하는 방법이 있습니까?

문안 인사,

미디엄


저는 MMM 모드를 사용합니다. 이론적으로는이 작업을 수행하지만 다소 짜증납니다. 그다지 만족스럽지 않습니다. 나는 emacswiki에서 내 설정에 많은 lisp를 붙여 넣었지만 실제로 몇 주를 소비하지 않았습니다. emacs를 구성하는 것보다 사용하는 데 더 관심이있는 사람들에게 더 간단했으면합니다.
Nathan

1
해결 방법은 두 개의 파일을 만들고 javascript 파일을 <script src>. 둘 다 C-x 2또는 약간의 C-x 3모드로 시청할 수 있습니다 . :-/
Patrick

답변:


41

또 다른 해결책은 multi-web-mode다음과 같습니다.

https://github.com/fgallina/multi-web-mode

이미 언급 한 것보다 더 쉽게 구성 할 수 있습니다 multi-mode.

다음 .emacs과 같이 파일 에서 선호하는 모드를 구성하기 만하면 됩니다.

(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags 
  '((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
    (js-mode  "<script[^>]*>" "</script>")
    (css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)

Emacs의 다중 모드 (한숨)에 대한 자세한 내용은 다음을 참조하십시오.

http://www.emacswiki.org/emacs/MultipleModes

업데이트 : JavaScript 또는 CSS 영역을 감지하여 HTML5에서 작동하도록 정규 표현식을 단순화했습니다. 매우 정확하고 깨지기 쉬운 정규 표현식이 필요하지 않습니다.


나는 flymake과 결합 고민했다
juanmirocks

자세한 경우를 처리하기 위해 HTML5처럼, 지금은 자바 스크립트와 CSS를 위해 더 간단하고 용서 태그 설명을 사용(js-mode "<script[^>]*>" "</script>") (css-mode "<style[^>]*>" "</style>")
카이 카버

32

이러한 종류의 사용을 위해 주요 모드 web-mode.el을 작성했습니다 : JS, CSS, Java (JSP), PHP를 포함하는 HTML 템플릿 편집. http://web-mode.org에서 다운로드 할 수 있습니다 . Web-mode.el은 블록 유형에 따라 구문 강조 및 들여 쓰기를 수행합니다. 설치는 간단합니다.

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))

1
웹 모드는 패키지로도 제공됩니다. 적어도 MELPA에서.
mcginniwa 2013

플레이 / 면도기 엔진을 지원합니다!
juanmirocks

안녕하세요 fxbois, 왜 이것이 저에게 효과가 없습니까? web-mode.el을 / use / local / share / emacs / site-lisp /에 복사하고 다른 모든 .el 파일을 제거하고 web-mode.org의 "설치"섹션 (및 .emacs 파일 만 그 몇 줄이 있습니다). 도와 주 시겠어요? 감사.
Tony Xu

1
당신은 이맥스 내부의 우리-mode.el 파일을 파일로드 및 MX 웹 모드 후 수
fxbois

14

좋은 질문입니다. 첫 번째 투표에서 얼마나 많은 찬성표를 받았는지보세요!

모든 사람은 당신과 같은 경험을 가지고 있습니다. 나도.

당신이 설명한 것과 같은 종류의 이상 함을 보여준 nhtml-mode에 의존하는 대신 다른 옵션을 찾고 multi-mode.el을 찾았습니다 . 일종의 범용 다중 모드 골격입니다. 이를 사용하려면 한 모드가 시작되고 다른 모드가 끝나는 위치를 설명하는 정규식을 지정해야합니다. 따라서 <script...>자바 스크립트 블록 <style...>을 시작하고 CSS 블록을 시작하려고합니다. 그런 다음 각 블록에 대해 고유 한 모드를 연결합니다. 자바 스크립트 용 에스프레소를 좋아한다면 사용하세요. 다른 블록을 식별하는 다른 정규식에 대해서도 마찬가지입니다.

실제로 문서를 탐색 할 때 각 블록에 대해 다른 모드가 활성화됩니다.

다중 모드를 사용하여 ASP.NET을 생성하여 단일 파일에서 C #, HTML, CSS 및 Javascript를 편집 할 수 있으며 커서가 버퍼에있는 위치에 따라 적절한 강조 표시 및 글꼴을 사용할 수 있습니다. 완벽하지는 않지만 기존 가능성을 크게 개선 한 것으로 나타났습니다. 사실 이것은 당신이 원하는 것일 수 있습니다. 그것을 시도하십시오.

https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14


방금 aspx 모드를 사용해 보았습니다. 훌륭하게 작동했습니다. 내가 한 유일한 일은 자바 스크립트 지원을 익스프레스 모드에서 자바 스크립트 모드로 변경하는 것입니다.
MakeDummy 2011 년

7

정말 좋은 해결책은 아니지만 HTML에 자바 스크립트가 정말로 필요한 경우 빠른 수정은 자바 스크립트가 포함 된 영역을 선택하고 명령 narrow-to-region( C-x n n)을 사용한 다음 원하는 자바 스크립트 모드로 전환하는 것입니다. 명령을 실행 widen하면 ( C-x n w)로 돌아갑니다 .


0

nxhtml을 잘못 설정 한 것 같습니다. 필요한 유일한 설정은 autostart.el파일을 로드하는 것이어야하며 모든 것이 어느 정도 수준으로 작동해야합니다. nxhtml은 어떤 식 으로든 완벽하지는 않지만 html / css / javascript / mako에 대해 사용한 경험은 적어도 mako를 제외한 모든 것에 대해 꽤 좋습니다. 하지만 나는 마코 파트를 망쳐 놓았다고 확신합니다.

이것은 내 nxhtml을 초기화하는 방법입니다.

(when (load "autostart.el" t)
  (setq nxhtml-skip-welcome t
        mumamo-chunk-coloring 'submode-colored
        indent-region-mode t
        rng-nxml-auto-validate-flag nil))
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.