[Emacs] Prettier 설치 및 동작 방식

Prettier는 javascript(+ 약간의 기타언어)의 소스 코드를 일정한 형식에 맞게 정리해주는 툴로 단독으로도 사용될 수 있지만 여기서는 Emacs에 연동하여 사용하는 방법에 대해 정리해보겠다. 물론 Emacs 외 다른 편집기들도 지원한다. (자세한 사항은 홈페이지 참조)

• Prettier 홈페이지 : https://prettier.io/

설치 방법

1. DiffUtils for Windows를 설치한다. (Emacs에서만 사용시 Path 환경변수는 굳이 잡아줄 필요없다)
   • http://gnuwin32.sourceforge.net/packages/diffutils.htm
2. Prettier-js for Emacs 홈페이지에서 prettier-js.el 파일을 다운받아 Emacs의 site-lisp 폴더에 복사한다.
   • https://github.com/prettier/prettier-emacs

3. .emacs 파일에서 exe-path에 Diff Util의 bin폴더에 대한 경로를 추가한다. (정슬래시 사용)

(setq exec-path (append exec-path '("/path/to/diffutils")))

4. .emacs 파일에서 Javascript Hook으로 prettier mode를 설정한다.

(require 'prettier-js)
(dolist (hook '(js2-mode-hook js-mode-hook json-mode-hook))
  (add-hook hook 'prettier-js-mode))

5. [옵션] 들여쓰기에 탭 문자가 아닌 스페이스를 사용하기 위해서는 아래와 같이 prettier-js-arg를 설정한다. 혹은 추가로 필요한 옵션이 있으면 설정한다. 아래 옵션 페이지 중 CLI용 옵션을 사용하면된다.

   (setq prettier-js-args '(
     "--use-tabs" "false"
     "--tab-width" "4"
   ))

   • Prettier 옵션 페이지 : https://prettier.io/docs/en/options.html
   • 들여쓰기로 탭 문자 사용으로 설정할 경우, 여기서 설정한 탭 사이즈가 아닌 Emacs 기본 탭 사이즈가 적용된다.

동작 방식

• 일반 다른 모드들과 같이 Tab키를 누르거나 Enter키로 줄바꿈을 하였을 때 조정되는 방식이 아니라, 1) 저장시와 그리고 2) M-x를 누른후 명시적으로 prettier-js를 입력하였을 때 정리가 일어난다. 단순이 들여쓰기만 정리되는 것이 아닌 코딩 스타일 전반에 걸쳐 정리가 된다.
• 저장시에 적용되는 것은 빼고 명시적으로 커맨드를 입력하였을 때만 적용하려면 .emacs 파일 설정시 아래와 같이 hook 부분은 빼고 설정해도 된다.

  (require 'prettier-js)
  

참고사항

• [Emacs] 자바스크립트 탭 사이즈를 2 <-> 4로 토글시키는 함수 정의

<테스트 환경>
- OS : Windows 10
- Emacs 버전 : Emacs 24.5.1 윈도우