서브라임 텍스트에서 React 구문과 호환되게 자바스크립트 포맷팅하기

발생일: 2015.05.15

키워드: 서브라임 텍스트, Sublime Text, JsFormat, JsBeautifier, JsBeautify, .jsbeautirc

문제:

진행하고 있는 개인 프로젝트에 ES6와 React 구문을 함께 사용하려고 한다.

에디터론 서브라임 텍스트를 사용하고 있고, JsFormat 플러그인으로 자동 포맷을 설정하고 있었다.

헌데, React로 작성한 코드의 XML 부분이 올바르게 포맷팅되지 않는다.

좋은 방법이 없을까?

해결책:

JsFormat은 내부적으로 JsBeautifier를 사용하고 있는데, 살펴보니 `e4x`라는 옵션이 추가됐다.

XML 구문을 무시하고 beautify 하란 옵션이다.

문서를 더 살펴보니 옵션 뿐 아니라, `.jsbeautirc` 파일로 설정 정보를 관리할 수 있게 되었다.

기존엔 설정 파일을 제공하지 않아서 서브라임 패키지의 옵션으로만 넣어뒀었는데 편리하게 됐다.

내가 쓰고 있던 JsFormat은 예전 버전이라 해당 옵션을 지원하지 않아 포맷팅이 올바르게 되지 않았던 거였고,

설정 파일과 추가 옵션을 넣으니 잘 동작한다. :D

아래 순서로 적용해보면 된다.

1. 서브라임 텍스트에서 JsFormat 패키지를 최신 버전으로 업데이트 한다.

2. JsFormat의 사용자 옵션(`Sublime Text > Package Settings > JsFormat > Settings - User`)에서,

    JsBeautifier 의 설정 파일을 사용하겠다는 설정을 추가해준다.

위 파일에 아래 JSON을 추가해준다.

{

    "jsbeautifyrc_files": true

}

3. 프로젝트 디렉토리에 `.jsbeautify.rc` 파일을 추가한다.

  XML 구문을 허용하는 옵션은 `e4x`고, 내가 주로 사용하는 컨벤션에 맞는 설정은 아래와 같다.

{

    "indent_with_tabs": false,

    "preserve_newlines": true,

    "max_preserve_newlines": 2,

    "space_in_paren": false,

    "jslint_happy": false,

    "brace_style": "collapse",

    "keep_array_indentation": false,

    "keep_function_indentation": false,

    "eval_code": false,

    "unescape_strings": false,

    "ignore_sublime_settings": false,

    "indent_size": 4,

    "space_after_anon_function": true,

    "e4x": true

}

4. 포맷팅을 적용할 땐, 원하는 파일에서 커맨드 팔레트를 열고(`Cmd + Shift + P`), `JsFormat` 명령을 실행하면 된다.

편하다! ^^