Sublime Text 개발환경 세팅하기

* 기본 * 

당연한 얘기겠지만 SublimeText 3, nodeJS가 설치되어있어야 한다.

nodeJS의 경우 node -v, npm -v를 커맨드에 입력하면 설치 여부를 확인할 수 있다.

* 개발환경 세팅하기 * 

Package Control 설치하기

설치가 끝나면 Preference에 Package 관련 메뉴가 추가된 것을 볼 수 있고, 윈도우의 경우 Ctrl + Shift + P를 이용해 컨트롤할 수 있다. 이제 패키지 컨트롤을 열고 install package 를 입력하여 원하는 플러그인을 다운받으면 된다.

SublimeLinter 

문법 오류를 실시간으로 화면에 띄워준다. 이와 동시에 회사 내의 코딩 컨벤션을 따라가기 위해선 꼭 필수적으로 설치해야하는 플러그인. (참고 영상 : https://www.youtube.com/watch?v=QUK4hMoYv_c)

처음엔 뒤죽박죽으로 설치하느라 애를 먹었었는데, 기본적인 설치 순서는 다음과 같다.

npm install -g eslint

패키지 컨트롤을 열어 sublimeLinter, sublimeLinter-config-eslint 설치 

커맨드 창을 열어 eslint --init 실행. (line ending은 Unix추천)

여기까지 했으면 .eslintrc 파일이 생성된 것을 볼 수 있다. 

마지막으로는 회사 코딩컨벤션을 npm으로 설치한 후, .eslintrc의 "extends"에 회사 이름을 수정해넣으면 끝.

이제 화면에 린트 결과가 뿌려지는 걸 볼 수 있다.

설정을 바꾸고 싶다면 패키지 컨트롤 창을 열고 sublimelinter를 타이핑하면 다양한 옵션들이 뜬다. 

Sidebar Enhancement

화면 좌측 사이드바에 다양한 기능을 추가해주는 플러그인.

마찬가지로 패키지 컨트롤을 이용해 install하면 되고, 프로젝트 사이드바에 들어간 폴더나 파일을 우클릭하면 다양한 메뉴들이 추가된 것을 볼 수 있다.

나는 Open in Browser 기능 때문에 꼭 설치한다.

BracketHighlighter 

따옴표나 괄호같은 쌍이 누락되지 않게 표시해주는 플러그인

AllAutoComplete

추천받아서 써보고는 있는데 아직까지는 좋은 점을 잘 모르겠다. 개발을 하다보면 느껴지는게 있지 않을까

이 외에도 인터넷에 쳐보면 다양한 추천 플러그인들이 있으니 개인의 기호에 따라 설치하시기를.