티스토리 뷰
서브라임텍스트 설치
서브라임텍스트는 현재 안정버전인 Sublime Text 2 버전과 베타 버전인 Sublime Text3 가 있습니다.
SublimeText 2, 3 툴은 무료로 사용 가능합니다.
SublimeText 를 활용하여, html, css, javascript, 등 여러 코딩 작업 뿐만 아니라
메모장 역할로도 아주 좋습니다.
먼저 해당 사이트에 접속을 해서 윈도우용 서브라임텍스트를 다운받아 설치합니다.
Next 만 누르면 설치 완료.
기본 설정하기
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 선택 합니다
- 1. 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"
}
}
}
나머지 유용한 URL
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