[Emacs] web-mode

요즘 웹이라 하면 HTML 뿐만이 아니라 CSS와 Java Script가 기본이다. 거기다 템플릿 기반의 웹개발도 일반적이다. 그래서 웹개발에 이용되는 하나의 소스 파일에는 최소한 3가지 이상의 문법이 이용된다고 볼 수 있다.

Emacs에서 하나의 버퍼는 하나의 메이저 모드만 이용 할 수 있다는 제약은 이런 웹 개발에 있어서는 좀 문제가 있는 편이다. 기본적으로 html-mode와 js-mode, css-mode 등 필요한 메이저모드는 지원되지만 개별 버퍼에 하나만 쓸 수 있다. 그래서 multi-web-mode나 Mumamo 같은 여러 모드를 섞는 특수 모드 등이 사용되기도 한다. (최하단 링크 참고)

이번에 소개하는 web-mode는 멀티 모드가 아닌 하나의 모드에서 다양한 문법의 하이라이트와 편집 기능을 지원하는 통합형(?) 메이저모드이다.

http://web-mode.org

앞서 이야기 한 대로, web-mode는 HTML/CSS/JavaScript 뿐만 아니라 Jinja 같은 템플릿 언어 문법도 지원한다. 위 스크린샷에서 중괄호 { } 로 둘러쌓인 문법이 Jinja의 템플릿 문법이다.

설치 방법은 MELPA로 쉽게 가능하니 생략한다. 개인적으로 아래와 같은 설정을 사용하고 있다. 참고로 이 설정은 공식 홈페이지에 나열된 것 그대로이다.

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)

(setq web-mode-indent-style 1)
(setq web-mode-comment-style 2)

(setq web-mode-engines-alist
      '(("php" . "\\.phtml\\'")
        ("jinja" . "\\.html\\'")
        )
      )

두 번째 라인은 web-mode를 사용할 파일의 종류를 설정하는 부분이다. 정규표현식이라 htm이나 html 확장자의 파일이 해당된다.

어거지로 php관련 설정이 들어가 있지만, 현재는 Flask와 Jinja를 이용해서 개발을 주로 하기 때문에 일단 확장자는 .html 위주로 구성되어 있다. 그 외 대부분 들여쓰기의 레벨을 지정하고 있다.

indent-style이나 comment-style은 공식 문서의 내용을 참조하자. 그냥 들여쓰기를 한단계 더 들어가게 스타일을 설정해 주는 변수이다.

마지막의 engine의 경우는 템플릿 처리 엔진을 설정하는 곳이다. 위의 경우 web-mode-engines-alist 변수에 .html에 jinja를 묶어 놓도록 해 놨다. 따라서 이 경우 html 파일은 기본적으로 jinja 템플릿으로 동작한다는 말이 된다. (이유는 단순하게도, jinja 템플릿 파일의 확장자를 .html로 그냥 쓰고 있기 때문이다)

이 외에도 php나 jsp 등 다양한 서버사이드 스크립트 문법을 사용 할 수 있으니 필요한 설정을 잘 찾아보자. ;-)

참고링크: [Emacs] Javascript와 CSS가 포함된 HTML 파일 편집