Sublime Text 3 사용하기

====== 0. intro ======

이전에 sublime_text2 를 정말 좋은 에디터라고 생각하고 사용해 왔다. 그러나 사용법들을 숙지하지 않고 그냥 필요한 부분만 대충 사용하였었기에 이젠 새로 나오고 있는 3 버전에 대해 정리 및 활용하기 위한 포스트를 작성한다.

참조사이트 목록
http://parkcj.wordpress.com/2013/01/30/sublime-text-2-%EC%84%A4%EC%B9%98-%ED%9B%84-%ED%95%B4%EC%95%BC%ED%95%A0-%EA%B2%83%EB%93%A4/
http://demun.tistory.com/2241
http://blog.daum.net/sman76/15711546
http://martian36.tistory.com/1226
http://jalnaga.wordpress.com/2013/08/31/sublime-text%EC%9A%A9-%EC%B6%94%EC%B2%9C-%ED%8C%A8%ED%82%A4%EC%A7%80/
http://devthewild.tistory.com/31

====== 1. install ======

설치는 간단하다. portable 버전도 지원하기 때문에

http://www.sublimetext.com/3

사이트에서 해당하는 운영체제를 받아 설치한다.

====== 2. package control ======

3버전이 나온 초기에는 이 패키지 컨트롤이 2버전과 다르게 직접 파일을 받아 설치해줘야 했는데 최신 릴리즈에서는 사용법이 2와 같이 간단해졌다.

먼저 콘솔 (단축키 : Ctrl + `)을 열어 아래의 내용을 입력한다.

<code>
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)
</code>

그리고 에디터를 껐다 키면 적용 완료.

참고로 2버전은 아래와 같다.

<code>
import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
</code>

또한 기타 문제로 자동으로 설치되지 않는경우 아래의 사이트를 참고하여 직접 설치할수 있다.

참조 : http://www.hans.or.kr/2013/11/sublime-text3.html

====== 3. 단축키 ======

출처 : http://juhoi.tistory.com/51

ㅇ 단축키는 자주 사용하는 다른 에디터랑 동일하게 변경해서 사용할 수도 있습니다.
   - Preferences > Key Bindings - Default 로 설정 파일을 열어 직접 수정합니다.

ㅇ 개인적으로 자주 사용하는 단축키를 정리해 봅니다.
   - 전체 화면 : [f11]
   - 한줄 주석/취소 : [Ctrl + /]
   - 블럭 주석/취소 : [Ctrl + Shift + /]
   - 현재라인 한라인 위로 : [Ctrl + Shift + up]
   - 현재라인 한라인 아래로 : [Ctrl + Shift + down]
   - 아래로 한라인 추가 : [Ctrl + Enter]
   - 위로 한라인 추가 : [Ctrl + Shift + Enter]
   - 현재라인 삭제 : [Ctrl + Shift + k]
   - 현재라인 바로 아래 복사 : [Ctrl + Shift + d]
   - 코드 펴기/접기 : [Ctrl + Shift + [, ]]

2차출처 : http://www.hans.or.kr/2013/11/sublime-text.html

Windows

Mac

====== 4. 유용한 플러그인 ======

Ctrl + Shift + p 를 누르면 나오는 팔레트에서 install package 를 선택 후 아래 플러그인을 검색하여 설치한다.

===== Code intelligence plugin : 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. 언어들에 대해 code intelligence 기능을 지원해준다.

===== Sublime Alignment : Alignment =====

- 아래 코드의 Before 를 작성하고 블럭 지정후 Ctrl + Alt + a 하면 After와 같이 정렬 된다.

<code>
// Before

var joe = 'joe';

var johnny = 'johnny';

var quaid = 'quaid';

 
// After

var joe    = 'joe';

var johnny = 'johnny';

var quaid  = 'quaid';
</code>

===== Sublime Terminal : Terminal =====

Ctrl + Shift + t : 현재 열려있는 파일이 위치한 폴더 경로로 터미널 (cmd 혹은 power shell) 이 실행된다.
Ctrl + Shift + Alt + t : 현재 열려있는 파일의 프로젝트 폴더 경로로 터미널이 실행된다.

===== Bracket Highlighter =====

블럭영역이나 <>, </>의 시작과 끝부분을 눈에 잘 띄도록 표현해 준다.

===== ConvertToUTF8 =====

EUC-KR, UTF8등 흔히 사용하는 언어엣을 쉽게 사용할 수 있게 해준다. Files > SET Fi8le Encoding to > 를 통해 선택

===== AdvancedNewFile =====

원하는 폴더에 원하는 이름으로 파일을 쉽게 생성해준다.

===== Emmet =====

젠코딩을 가능하게 해주는 것. html과 css 코딩에 최적화 되어 있다.

===== Linter =====

SublimeLinter를 설치하면 CoffeeScript, CSS, Haml, Java, JavaScript, Objective-J, Perl, PHP, Python, Ruby 등에서 잘못된 문법 혹은 잘못된 것 같은 문법이 있으면 그 부분을 강조해서 보여준다.

예를 들어 JavaScript에서 라인의 끝에 세미콜론(;)을 붙이지 않았다거나, 괄호의 짝이 맞지 않는다거나, CSS에서 존재하지 않는 style 이름을 사용하거나 혹은 #을 통해 DOM의 ID를 사용하는 경우에도 그렇게 사용하지 말라고 알려준다.

===== DocBlockr =====

JavaScript, PHP, ActionScript, CoffeeScript, Java, Objective-C, C, C++에서 문서화를 쉽게 할 수 있도록 도와주는 패키지다. /** 입력 후 엔터를 치면 아래와 같이 문서화를 해준다.

/**
 * [sum description]
 * @param  {[type]} a [description]
 * @param  {[type]} b [description]
 * @return {[type]}   [description]
 */
function sum(a, b){
return a+b;
}
참고로 함수선언형과 변수할당은 같은 결과가 나온다.

/**
 * [sum description]
 * @param  {[type]} a [description]
 * @param  {[type]} b [description]
 * @return {[type]}   [description]
 */
var sum = function(a, b) {
return a+b;
};
/** 후 shift + enter를 치면 간략한 주석을 달 수 있다.

/** [sum description] */
function sum(a, b){
return a+b;
}

===== Sidebar Enchanter =====

사이드바 기능을 확장해 준다.