sublime text3 스마트하게 사용하기

Sublime Text3 사용 방법

sublime text3 [Mac & Window] 에서의 단축키 및 유용한 플러그인의 설치 및 사용방법에 대해 알아보겠습니다.

Keyboard shortcut (단축키 정리)

Window 용	Mac 용	내        용
ctrl + shift + k	ctrl + shift + k	라인 삭제하기
ctrl + shift + d	cmd + shift + d	라인 복사하기
F11		전체 화면(Full Screen)
shift + F11		편집 집중모드
ctrl + shift + p	cmd + shift + p	명령어 팔레트(Command Palette)
ctrl + '	ctrl + '	콘솔 보기(show console)
ctrl + k + b	cmd + k + b	사이드바 토글(show/hide Sidebar)
ctrl + /	cmd + /	한줄 주석 토글(Toggle Comment)
ctrl + shift + /	cmd + alt + /	여러줄 주석 토글(Toggle Block Comment)
ctrl + k + u	cmd + k + u	대문자로 변경 (Convert Case - Uppercase)
ctrl + k + l	cmd + k + u	소문자로 변경 (Convert Case - Lowercase)
ctrl + d	cmd + d	멀티 셀렉션 기능, 단어 선택 (Select Word) & 연속해서 누를 경우, 동일한 단어 중복 선택
ctrl + l	cmd + l	줄 선택 (Select Line) & 연속해서 누를 경우,  다음 줄 중복 선택
ctrl + Click	cmd + Click	마우스로 멀티 편집할 포인트 추가
ctrl + shift + a	cmd + shift + a	선택영역 확장하기
ctrl + p	cmd + p	파일 이름으로 빠르게 찾아 열기 (Open file based on name) css@.class or js@함수이름등…
ctrl + g	cmd + g	라인 번호로 이동 (Go to line number)
ctrl + r	cmd + r	심볼로 탐색 (Go to symbol) 예를 들어 css 의 클래스나 아이디값 찾을때
ctrl + p 누른 후, @	cmd + p 누른 후, @	파일 이름으로 빠르게 찾아 연 후, 심볼로 탐색
ctrl + m		짝이 맞는 괄호 시작/끝으로 이동 (Go to matching bracket)
ctrl + enter	cmd + enter	다음 줄 삽입 (Insert line after)
ctrl + shift + enter	cmd + shift + enter	이전 줄 삽입 (Insert line before)
ctrl + shift + ↑↓	cmd + ctrl +  ↑↓	윗 줄과 아랫 줄 바꾸기 (Swap line)
ctrl + j	cmd + j	라인 합치기 (joine line)
ctrl + shift + f	cmd + shift + f	디렉토리 모든 파일에서 검색  (Search all files in a folder)
ctrl + h	cmd + h	찾아서 대체 (Replace)
[ctrl + f 누른 후,  alt + enter		용어를 찾은 후, 멀티 편집
alt + 숫자	cmd + 숫자	열려진 탭 순서로 선택 (Select a Tab, 예: alt + 3)

Quick Switch Project (프로젝트별로 빠르게 전환하기)

여러 프로젝트를 진행하고 있을 경우 해당 프로젝트로 빠르게 전환하고자 할 때 편리하게 사용할 수 있습니다.

Project 탭패널에서 컨텍스트 메뉴 Save project as... 를  클릭 → 여러 프로젝트를 관리하기 위한 새로운 폴더를 생성하고 그 폴더 안에 현재 서브라임에 열려있는 프로젝트에 대한 네임을 입력한 후 저장 → 현재 열려있는 프로젝트를 close project 한 후 다른 프로젝트를 열어서 save project as... 클릭 후 프로젝트를 스위치하기 위해 만들어 놓은 폴더에 위와 같은 방식으로 네이밍을 한 후 저장

ctrl + alt + p (프로젝트 스위치하기)

스닙펫(Snippet) 활용하기

패널 메뉴중 Tools  → new snippet

사용자 정의의 코드를 입력한 후 저장을 하면 서브라임의 user 폴더에 저장됩니다. 하지만 스니펫은 하나만 사용할 것이 아니라면 user 폴더안에 따로 snippets 과 같은 스니펫만 관리하는 폴더를 생성한 후 스니펫을 관리하는 것이 좋습니다.

저장할 때 확장자는 *.sublime-snippet 으로 저장

scope 는 어느 파일에서 사용할 지에 대한 영역(syntax mode)를 지정하며 source.html, source.js 로 콤마로 구분하여 추가가능합니다.

scope 코드를 주석처리해 놓으면 모든 문법모드에서 사용가능합니다.

description 태그를 추가하면 스니펫에 대한 설명을 보여줍니다.

<snippet>

    <content><![CDATA[

        (function($2) {

        $3

        })($1);

        ]]></content>

    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

    <tabTrigger>self-fn</tabTrigger>

    <!-- Optional: Set a scope to limit where the snippet will trigger -->

    <scope>source.js</scope>

    <description>자가 실행함수</description>

</snippet>

Macro ( 사용자 정의 단축키 지정하기)

Record macro 클릭 -> 실행할 코드를 녹화 후 Record macro 다시 클릭하여 녹화종료

ctrl + Q 매크로 토글 단축키

녹화한 매크로 기능을 저장하기 위해 save Macro 클릭

user 폴더에 매크로 명령들만 모아두기 위해 Macros 새폴더를 생성한 후 녹화한 매크로 기능 이름을 정의하여 저장

keybinds settings -user 에 단축키 설정하기

{"keys": [“ctrl+;"], "command": "run_macro_file", "args": {"file":"Packages/User/Macro/semicolon.sublime-macro”}}

파일 경로는 preference -> Browser Packages 의 User 폴더안의 매크로가 저장되어 있는 경로를 저장

(에디터플러스의 글자복제 기능을 서브라임텍스트에서 macro 로 활용하기)

Setting - User 설정하기

Setting - Default 의 값을 가져와 Setting -User 값에 복사하여 사용합니다.

{
    "aprosopo_active_bar": true,
    "aprosopo_active_text": true,
    "aprosopo_combined_dirty_active_bar": true,
    "aprosopo_dark_dirty_orange": true,
    "aprosopo_dark_purple": true,
    "aprosopo_dirty_bar": true,
    "aprosopo_show_tab_close_buttons": true,
    "color_scheme": "Packages/Theme - Gravity/Monokai Gravity (SL).tmTheme",
    "draw_minimap_border": true,
    "font_face": "Consolas",
    "font_options":
    [ "no_bold", "no_italic" ],
    "font_size": 13,
    "highlight_line": true,
    "ignored_packages":
    [ "Vintage" ],
    "scroll_past_end": true,
    "tab_height_short": true,
    "tab_size": 4,
    "theme": "Gravity.sublime-theme",
    "word_wrap": true
}

 Keybindings 을 정의하는 방법도 위와 유사합니다. 플러그인을 깔아서 사용할 경우 해당 플러그인의 keybinding 값도 커스터마이징하여 사용할 수 있습니다.

아래는 sidebar enhacements 란 플러그인의 키 바인딩 디폴트값을 유저값으로 변경하여 사용한 것입니다.(Mac에서 사용)

[
    { "keys": ["super+alt+shift+s"], "command": "toggle_side_bar" },
    { "keys": ["f12"], "command": "side_bar_open_in_browser"},
    { "keys": ["alt+f12"], "command": "side_bar_open_in_browser"},
    {"keys": ["ctrl+alt+n"], "command": "side_bar_new_file2"},
    {"keys": ["f2"], "command": "side_bar_rename"},
    {"keys": ["super+d"], "command": "side_bar_delete"},
    {"keys": ["super+alt+m"], "command": "side_bar_move"}
]

Sublime Text 에서 유용한 플러그인

1. colorsublime.com (스킨적용)

2. theme - Gravity (서브라임 테마, Gravity는 제가 사용하는 테마 ^^)

3. css format (css 코드 포맷팅을 손쉽게 하기)

4. apply syntax

5. ConvertToUTF8 (인코딩 변환)

6. Syntax Highighting for Sass (sass 와 scss 문법 두가지 모드 확실히 활성화하기)

7. Emmmet (젠코딩 업그레이드 버전)

8. emmet css snippets

9. sublimeCodeIntel 

10. autoprefix

11. bracket Highlighter

12. Fetch

13. REM PX (ctrl + shift + x, ctrl + shift + r) : rem px 변환하기

advancedNewFile

(ctrl+alt+n) 새로운 파일 및 디렉터리 생성

현재파일에서 cmd + shift+p 후 move file 선택하면 파일이동가능

alignment

커서 이동 후 ctrl + cmd + a 

만약 Alignment가 제대로 작동하지 않는다면?

monospace 유형의 글꼴(font_face)인지 확인해야 합니다.

개발 환경에 적합한 폰트 10

hivelogic.com/articles/top-10-programming-fonts

alignTab

커맨트팔레트에서 alignTab preview mode 를 사용하여 정규표현식으로 사용가능

Clipboard History 패키지

일반적으로 클립보드에 등록된 메모리는 일회성이지만, 클립보드 히스토리 플러그인 패키지를 Sublime Text에 설치하면 기록하여 관리/호출할 수 있습니다. 단축키 한번이면 복사했던 내용들이 기록되어 있으니 손쉽게 불러낼 수 있어 매우 유용한 패키지입니다. (단축키: ctrl+alt+v)

github.com/kemayo/sublime-text-2-clipboard-history

find history ctrl+alt+v (위에 있는 것이 처음 복사 아래가 나중에)

pre history - ctrl + shift + v

next history - ctrl + shift + alt + v

명령창에서 installed Packages 폴더로 이동하여 git clone 실행

폴더는 ST2 방식이고 ST3는 압축된 형태로 사용해야 하기 때문에 clipboard 폴더를 압축하고

기존 폴더는 삭제한후 압축파일의 확장자를 sublime-package 로 바꿔준다.

Color Picker 패키지

github.com/weslly/ColorPicker

key binding user 에 { "keys": ["alt+ctrl+c"], "command": "color_pick” }설정

docBlockr

스크립트 주석작성 편리하게

사용자정의 함수의 이름과 파리미터,리턴값에 대한 설명들을 편리하게 작성할수 있도록해준다.

해당 함수 바로위에 /**  작성후 탭

서브라임 텍스트 아이콘 변경하기

RES Editor 다운로드

http://www.resedit.net/

Sublime Text 아이콘 다운로드

https://dribbble.com/shots/1192130-Sublime-Text-Replacement-Icon

http://cl.ly/2y011p3Z1Q1J

resditor 를 다운받아서 cancel 후 no 를 클릭

프로그램파일에서 sublime_text.exe 파일을 바탕화면에 복사해놓는다.

메뉴 file에서 open project로 바탕하면에 있는 파일을 연다

icon 항목에서 우측클릭하여 add resourse 에서 icon 항목을 클릭한다.

기존에 준비된 것을 진행하면서 준비된 서브라임텍스트 아이콘을 클릭한다.

기존 아이콘은 제거한다.

현재 아이콘에 우측클릭을 하여  rename 을 한다

identifer 에 103 을 입력하고 language 는 영어(오스트레일리아) 클릭후 ok

저장한 후 바탕화면의 아이콘을 잘라내기 한 후 프로그램파일의 서브라임텍스트 폴더에 복사(덮어쓰기)한다.

reseditor 는 32비트만 지원하기 때문에 서브라임도 32비트를 깔고 해야한다.

ICO 온라인 변환 서비스

http://www.icoconverter.com/

Adobe Photoshop - ICO 플러그인 다운로드

http://www.mediacollege.com/adobe/photoshop/plugins/ico/

서브라임 텍스트에 컨텍스트 메뉴 추가하기

OpenWithSublimeTextAsAdmin.bat 다운로드

https://gist.github.com/jcppkkk/8330314

@ _elevate.cmd 가 있는 해당 폴더에 다운받은 파일 오버라이딩 및 추가후 .bat 파일 더블클릭 실행

subl (명령창에서 실행하기)

환경변수 등록하여 cmd 창에서 서브라임텍스트 실행하기

환경변수에 path 에 서브라임.exe 경로를 등록한다.

관리자 권한의 cmd 창을 실행하여

mklink subl.exe sublime_text.exe

subl 기호화 생성한 것임

Jaehee's WebClub