Sublime Text 3 설치부터 플러그인까지(Windows)
1. 코드 에디터(Code editor)란?
일반적인 코드 에디터 모습
코드 에디터(Code editor)란 소스 코드를 작성하기 위한 프로그램으로 흔히 텍스트 에디터라고도 합니다. 주로 프론트 엔드(Front-end)에서 드림위버(Dreamweaver)와 같은 편집기로도 알려져 있습니다.
개발 업무 특성상 특정 소스 코드 작성이 반복될 경우가 많은데 이러한 문제도 해결해줄 수 있고, 특정 단축키를 이용하여 코딩 생산성을 비약적으로 향상시킬 수 있습니다.
요즈음 배포되고 있는 코드 에디터들은 개발자들 입맛에 맞는 테마가 설치가 가능하여 디자인면에서도 훌륭해지고 무료버전임에도 불구하고 자신에게 맞는 플러그인을 설치하고 기능을 보완하여 사용할 수 있습니다.
2.Sublime Text 3 소개 및 설치
Sublime Text 로고
<출처: http://www.sublimetext.com/>
코드 에디터들 중 많이 사용되고 있는 서브라임 텍스트(Sublime text)의 특징은 용량 면에서나 실행 면에서도 가볍습니다. 이 밖에도 화면 분할, 원하는 파일로 이동, 명렁어 단축키 지원, 패키징 시스템을 통해 여러 기능을 설치할 수 있습니다. 물론 다른 장점들도 존재합니다!
일단 설치를 해야합니다.
Sublime Text는 버전이 2, 3이 있는데 2보다 3이 향상된 버전이므로 이 포스팅에서는 Sublime Text 3 위주로 작성하겠습니다.
Sublime Text 2: 다운로드 Sublime Text 3: 다운로드 |
Sublime Text 3 설치
윈도우의 경우 exe 파일이므로 Next를 눌러서 설치합니다.
Sublime Text 4 설치 완료
설치가 모두 끝났습니다.
설치를 모두 완료하면 위와 같은 화면을 볼 수 있습니다.
3. Sublime Text 3 단축키 및 추천 플러그인
Sublime Text 3는 유용한 플러그인이 많습니다.
우선 플러그인을 설치하기 위해서는 패키지 컨트롤(Package Control)을 설치해야 합니다.
Sublime Text 3의 경우 ctrl+` 혹은 View > Show Console을 눌러 Console을 활성화 한 뒤
Sublime Text 3 Show Console 화면
아래 내용을 복사하셔서 붙여 넣습니다.
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) |
Goto Anything
파일이나 텍스트 등 자신이 원하는 위치로 이동할 수 있는 유용한 커맨드입니다.
윈도우의 경우 Ctrl + p 를 입력하여 아래와 같이 커맨드 창을 활성화합니다.
Goto Anything 창
텍스트 입력: 파일 이름을 정렬하여 찾습니다.
@텍스트 입력: 클래스나 메소드 같은 특정 심볼을 찾습니다.
#텍스트 입력: 특장 단어를 찾습니다.
:숫자 입력: 특정 라인넘버로 이동합니다.
다중 선택(Multiple Selections)
여러 영역을 다중 선택하여 동시에 편집할 수 있는 기능입니다.
다중 선택(Multiple Selections)
Ctrl + D: 커서가 위치한 단어와 동일한 단어를 다중 선택합니다.
Ctrl + U: 선택한 단어를 취소합니다.
ESC: 다중 선택한 단어를 모두 취소합니다.
화면 분할(Split Editing)
HTML과 CSS와 같이 다른 위치에 있는 파일을 한눈에 보면서 작업해야 하는 경우에 좋습니다.
GUI 메뉴에서 View -> Layout -> Single/Column/Row 으로 들어가 선택합니다.
화면 분할 화면
<추천 플러그인>
Emmet(Zen-coding)
젠 코딩이라 알려진 HTML/CSS 툴킷으로 코딩 속도를 비약적으로 향상시켜줍니다.
Package Control을 이용하여 설치합니다.
Ctrl+Shift+P 입력 -> Package Control: Install Package 입력 후 설치
Emmet(Zen-coding) 검색
Emmet(Zen-coding) 설치 완료
사용방법을 간단하게 보여드리겠습니다.
먼저 일반 태그 입력 후 Tab 버튼을 누를 경우 아래와 같이 작성됩니다.
예) div (Tab) -> <div></div>
여기에 특정 ID나 CLASS를 부여하고 싶은 경우엔 아래와 같이 입력합니다.
예) div#header.yellow (Tab) -> <div id="header" class="yellow"></div>
하위 태그 추가와 특정 태그를 반복적으로 넣고 싶다면 아래와 같이 입력합니다.
예) ul>li*3 (Tab) ->
하위 태그 추가 및 특정 태그 반복
Emmet에 대한 자세한 정보는 링크를 통해 확인합니다.
4. 마치며..
지금까지 서브라임텍스트를 사용방법을 살펴보았습니다. 무료임에도 불구하고 사용자의 환경에 따라 강력한 기능을 가진 개발도구가 될 수 있습니다. 이름(Sublime)에서도 알 수 있듯이 감탄할 만합니다.
Emmet 플러그인 외에도 유용한 플러그인이 많으니 패키지 컨트롤(Package Control)에서도 살펴보시기 바랍니다.
마지막으로 Sublime Text를 배울 수 있는 곳의 링크를 남겨드리며 글을 마치겠습니다.
Sublime Text 2 Tips and Tricks (http://code.tutsplus.com/tutorials/sublime-text-2-tips-and-tricks--net-21519)
Sublime Text Documentation (http://www.sublimetext.com/docs/2/)
Sublime Text Keyboard Shortcuts (http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html)