Sublime Text 설치 후 초기 세팅하기(기본 플러그인 포함)

WEB/서브라임텍스트

Sublime Text 설치 후 초기 세팅하기(기본 플러그인 포함)

조's

2015. 4. 26.

요즘 개발자들.. 특히 프론트엔드 개발자에게 인기를 끌고 있는 개발툴인 서브라임텍스트를 설치하고 난 다음 기본적으로 설치해야 하는 프러그인와 세팅방법을 포스팅 하려고 합니다.

서브라임텍스트 설치

서브라임텍스트는 현재 안정버전인 Sublime Text 2 버전과 베타 버전인 Sublime Text3 가 있습니다.
저는 앞으로 Sublime Text 3을 사용할 것이므로 이것을 설치하겠습니다.
먼저 해당 사이트에 접속을 해서 윈도우용 서브라임텍스트를 다운받아 설치합니다.

설치는 그냥 설치하라는데로 설치하면 문제 없습니다.

기본 설정하기

설치를 하고나면 “어.. 이게 뭐야” 라고 할정도로 아주 단순한 검정화면만 나옵니다. 마치 윈도우 메모장의 블랫버전 같습니다.
그러나 숨어있는 기능은 정말 어마어마합니다. 그래서 이 서브라임에디터를 사용하는 사람이 그렇게 많은 것입니다.

PACKAGE CONTROL 설치

먼저 패키지 컨트롤러를 설치해야합니다. 패키지 컨트롤러는 수많은 서브라임텍스트의 서드파티나 플러그인 프로그램들을 편하게 설치할 수 있게 해주는 기능을 합니다.

https://sublime.wbond.net/installation#st3 에 접속하면 설치하는 코드가 버전별로 있습니다.

먼저 Sublime Text Console 을 엽니다. (단축키: Ctrl+`, 메뉴: View > Show Console menu)
console 에 아래의 내용을 복사 합니다.

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

재부팅을 합니다.

PACKAGE 설치하기

이제는 패키지컨트롤러를 이용해서 패키지를 설치하는 방법입니다. 패키지 종류만 다를뿐 모든 패키지에 공통적으로 사용되어지는 방법입니다.

Sublime Text Command Pallet를 엽니다. (단축키: Ctrl-Shift-P, 메뉴: Tools > Command Pallet)
install를 입력하면 해당 글자가 포함된 명령어의 리스트가 나오는데 이때 Install Package 선택 합니다.
Package Control 창에 설치할 패키지명을 입력하고 설치합니다. 여기서는 emmet을 선택하여 설치합니다.

기본 환경설정

기본적으로 보기좋게, 사용하기 좋게 하기 위한 기본설정입니다.

Preferences > Settings-User

{
    "bold_folder_labels": true,
    "caret_style": "phase",
   "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
    "draw_minimap_border": true,
    "draw_white_space": "none",
    "fade_fold_buttons": false,
    "font_face": "Consolas",
    "font_size": 11,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Markdown",
        "Vintage"
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "save_on_focus_lost": false,
    "tab_size": 4,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}

기본 설치 플러그인 종류

BracketHighlighter

URL : https://github.com/facelessuser/BracketHighlighter
{}, [], <>, “”, ‘’, () 와 같은 개행 기호에 대해서 쌍으로 존재해야 닫힘 기호를 하이라이트 처리해주는 확장 기능
기본설정은 아래와같습니다.

Preferences > Package Settings > Bracket Highlighter > Bracket Setting-user

{
    "bracket_styles": {
        "angle": {
        "color": "entity.name.class",
        "style": "outline"
        },
        "tag": {
        "color": "entity.name.class",
        "style": "outline"
        },
        "default": {
        "color": "entity.name.class",
        "style": "solid"
        }
    }
}

SideBarEnhancements

URL : https://github.com/titoBouzout/SideBarEnhancements
왼쪽의 Sidebar에 대해 확장기능을 제공해 준다. Sidebar에 오른 클릭시 유용한 메뉴들이 나타난다.

SFTP

URL : http://wbond.net/sublime_packages/sftp
서브라임텍스트와 같이 성장했다고 할 수있는 대표적인 플러그인이다.
개발자 입장에서 SFTP에 한번 사용해봤다면 다른 FTP프로그램은 불편해서 사용할 수 없게 만드는 마성의 매력을 가지고 있다.
사용법이 생소해서 처음 이해하기는 조금 어려울 수 있으나 학습해서 익힐만한 충분한 가치가 있다.

DocBlockr

URL : https://github.com/spadgos/sublime-jsdocs
javascript등 문서에 주석을 효율적으로 달 수 있다. 프로 프로그래머라면 주석은 착실히 달아야 한다.
/** 입력하고 Enter를 치면 주석이 자동으로 달린다

AutoBackups

URL : https://github.com/akalongman/sublimetext-autobackups
이름에서도 알수 있듯이 편집하고 있는 문서에 대해서 자동으로 백업을 해주는 플러그인 이다.
프로라 할지라도 편집하다 날려먹으로수도 있으니 꼭 Backup하는 습관을 들이자. 그것이 힘들다면 Auto의 힘을 빌려도 된다.

SublimeCodeIntel

link : https://github.com/SublimeCodeIntel/SublimeCodeIntel
웹 에서 쓰이는 대부분의 언어(JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP)에 대해서 변수를 찾아주는 기능을 한다.
변수명에 대고 ALT+Click 또는 CTRL+F3 을 누르면 변수가 지정되어 있는 파일로 자동으로 이동해 준다.
ctrl + j 키를 누르면 심볼로 이동한다.

SublimeLinter

URL : https://github.com/SublimeLinter/SublimeLinter
코딩할때 실시간으로 문법을 검사해 준다. 초급때 문법을 개을리 했었다면 이 플러그인을 설치하는 것이 쪽팔림을 방지 할 수 있다.
해당기능을 사용하기 위해서는 먼저 node.js가 설치 되어 있어야 한다.

프론트엔드 개발을 위한 플러그인 종류

Emmet

URL : https://github.com/sergeche/emmet-sublime
ZenCoding을 아시는가? ZenCoding이 발전하여 Emmet이 되었다고 보면 된다. 간단한 단축키를 사용하여 효율적인 코딩이 가능하다.
약간의 규칙만 익히면 높은 생산성의 코딩이 가능하다.

Prefixr

URL : http://wbond.net/sublime_packages/prefixr
Cross browser를 지원하는 플러그인이다. 하나의 CSS를 작성하면 자동으로 Cross browser에 맞게 CSS를 생성해 준다.

HTML-CSS-JS Prettify

URL : https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
HTML, CSS, JS에 대해서 코딩을 이쁘게 정렬해주는 기능을 제공해 준다.
Ctrl + Shift + H 키를 누르면 코드가 이쁘게 정렬된다.

FuzzyFilePath

URL : https://packagecontrol.io/packages/FuzzyFilePath
이미지나 파일의 경로를 자동으로 알려주는 플러그인
Ctrl+Alt+Space : inserts filepaths relative, overriding possible settings
Ctrl+Shift+Space inserts filepaths absolute, overriding possible settings

저작자표시 비영리 변경금지

아래에 WEB/서브라임텍스트의 더 많은 정보에 링크를 걸어놨습니다.

서브라임텍스트3 - 사용하지 않는 파일과 디렉토리 숨기기 바로가기 클릭!

WEB/서브라임텍스트