호쌤
호쌤 Just For Fun

[Tip/Tech] Sublime Text Package 설치와 추천 패키지

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[Tip/Tech] Sublime Text Package 설치와 추천 패키지≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[Tip/Tech] Sublime Text Package 설치와 추천 패키지

Sublime Text의 기본 환경 설정과 Package라는 형태의 확장 기능을 설치 방법을 소개합니다. 확장 기능을 통해 더욱 효율적인 코딩이 가능해 집니다.

#01. Node.js 설치하기

1) 내려받기

Sublime의 일부 기능들은 내부적으로 Node.js을 필요로 하기 때문에 미리 설치해 두면 좋습니다.

https://nodejs.org/en/에 접속하여 설치파일을 다운로드 받습니다.

두 개의 다운로드 버튼 중에서 왼쪽 항목을 선택해야 합니다.

img

2) 설치하기

설치 과정은 특별한 것 없이 체크할 항목들을 모두 체크하고 다음으로 진행하면 됩니다.

img

#02. Sublime Text 기본 환경 설정

1) 환경설정 파일 열기

Preferences > Settings 항목을 선택하여 환경설정 파일을 엽니다.

img

창이 좌,우로 나누어져 표시되는데 왼쪽이 원본이고 오른쪽이 사용자 설정 영역 입니다.

원본의 내용을 잘 확인하여 수정하고자 하는 부분을 오른쪽에 명시하고 값을 수정하면 됩니다.

설정 파일은 일반적인 JSON 형식 입니다.

img

2) 기본 환경설정 값

아래는 기본적으로 사용하면 좋은 설정 값의 내용입니다.

주석과 함께 명시하기 위해 스크린샷으로 제시했습니다. 실제 설정 파일에는 주석을 명시할 수는 없습니다. 코드 형태는 밑에서 제시합니다.

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "bold_folder_labels": true,
    "font_size": 23,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages": [
        "Vintage"
    ],
    "line_padding_bottom": 3,
    "overlay_scroll_bars": "enabled",
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}

#03. Package Control 설치하기

Package Control은 Sublime Text에 Package라고 불리는 확장팩을 설치할 수 있게 하는 기능입니다.

Ctrl + Shift + P를 누르면 명령창이 표시됩니다. (Mac의 경우 Cmd + Shift + P) 여기에 Install Package Control 라고 검색하여 표시되는 항목을 선택하고 엔터를 누릅니다.

설치가 완료되면 잠시 후 설치 되었다는 확인 창이 표시됩니다.

img

#04. Package 설치하기

1) 패키지 설치 방법 (IMESupport 설치)

윈도우의 경우 Sublime에서의 한글입력이 부자연스럽습니다. 윈도우에서는 IMESupport라는 패키지를 설치하여 이러한 문제를 해결할 수 있습니다.

패키지를 설치하기 위해 Ctrl + Shift + P를 눌러서 명령창을 열고 여기에서 install이라고 검색하면 Package Control: Install Package라는 항목이 표시됩니다. 이 항목을 선택하고 엔터를 누릅니다.

img

이제 명령창이 전환되면서 설치 가능한 패키지 목록이 표시됩니다.

여기서 IMESupport라는 항목을 검색해서 선택하고 엔터를 누릅니다.

img

어떤 패키지는 설치가 완료되면 확인창이 표시되기도 하고, 어떤 패키지는 설치 정보가 새로운 편집 탭을 통해 텍스트로 제시되기도 하며 어떤 패키지는 아무런 표시도 되지 않습니다. 잘 구분하시기 바랍니다.

2) Sublime 필수 패키지

아래는 제가 항상 사용하는 필수 패키지 목록 입니다.

패키지 이름 설명
A File Icon 사이드바에서 파일의 종류별로 아이콘을 표시함
All Autocomplte HTML, CSS, JS 코딩시 자동 완성 기능을 지원함
Auto Close HTML Tags HTML 태그 작성시 마침 태그를 자동으로 추가함
AutoFileName HTML, CSS, JS 등에서 다른 파일을 참조해야 할 경우
파일의 경로명에 대한 자동 완성 지원
Color Hightlight HTML, CSS, JS 등에서 색상 코드값을 사용할 경우 실제 색상으로 강조함
CovertToUTF8 UTF8 이외의 형식을 깨지지 않게 함 (ex: EUC-KR)
Codec33 ConvertToUTF8이 참조하는 모듈
Emmet CSS 선택자에 따른 HTML 태그 자동 작성 기능
GitGutter Github과 연동되어 있는 프로젝트를 작업시 변경된 파일들을 표시함
HTML-CSS-JS Prettify HTML, CSS, JS 파일의 코드 자동 정렬 기능
IME Support 한글 입력의 부자연스러움을 해결함
SublimeLinter 코드 작성시 구문 에러가 있는 부분을 표시함
SyncedSideBar 현재 작업중인 파일과 사이드바에 선택되어지는 파일을 동기화 함
JavaIME 자바 언어 개발에 도움을 주는 기능들
JavaImports 자바 import 구문에 도움을 주는 기능들

HTML-CSS-JS Prettify 를 설치한 경우 추가 설정

Preferences > Package Settings > HTML/CSS/JS Prettify > Set 'node' Path 항목을 선택하여 설정 파일을 엽니다.

img

아래 화면을 참고하여 Node.js의 설치 경로와 설정값들을 수정하고 나면 HTML,CSS,JS를 코딩할 때 정렬이 자동으로 수행되어 매우 편리하게 사용할 수 있습니다.

img

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[Tip/Tech] Sublime Text Package 설치와 추천 패키지≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus