[devtool] Sublime Text 초기 설정과 팁

Published: 2018-04-17 by 놀이터흙이제맛

• Categories:
• devtool 6

• Tags:
• devtool 8
• sublimetext 1

• 개요
• 기본 설정
  • 터미널에서 서브라임 실행하기
  • 코드 스니펫 추가하기
• 패키지
  • 추천 패키지
• 작성자 저장용 사용자 설정
  • settings - user
  • key bindings - user
• 기본 단축키
  • 단어 선택
  • 멀티 캐럿(Multiple Selection)
  • 커서/포커스 이동
  • Code Folding
  • 편집
  • 오버레이 Overlay
  • 매크로
  • 기타 조합형 단축키
  • 북마크 Bookmark
  • 마크 Mark
  • 프로젝트, 워크스페이스

참고 문서

• https://www.sublimetext.com/docs/index.html
• https://docs.sublimetext.io/guide/

버전 정보

• Build 4xxx

개요

서브라임 텍스트 시리즈의 기본 설정, 단축키 등 정리.

기본 설정

터미널에서 서브라임 실행하기

Windows에선 아래 세 가지 방법이 있는데:

• 설치 폴더(기본 설정이면 C:\Program Files\Sublime Text 3)를 시스템 환경 변수 Path에 추가한다.
• 설치 폴더의 subl.exe 파일을 C:\Windows\System32 경로에 복사한다.
• 파워셸 프로파일에 별칭을 추가한다.

세 번째 방법을 추천. 방법은 아래 코드를 복사해서 파워셸에 입력한다:

if (!(Test-Path -Path $PROFILE)) {
  New-Item -ItemType File -Path $PROFILE -Force
}
"Set-Alias sb 'C:\Program Files\Sublime Text\subl.exe'" >> $PROFILE
. $PROFILE

이게 끝이고 이제 sb로 서브라임 실행 가능:

sb  # 서브라임 실행
sb .  # 새 서브라임을 실행하면서 현재 경로를 Open Folder로 열기
sb .\.gitignore  # .gitignore 파일을 서브라임으로 열기

WSL에선 셸 설정파일(rc)에 호스트 PC의 경로를 별칭으로 추가하면 끝:

alias sb='/mnt/c/Program\ Files/Sublime\ Text/subl.exe'

코드 스니펫 추가하기

서브라임에서 자동 완성 항목을 추가하는 방법이다.

메뉴에서 Tools > Developer > New Snippet... 을 누르면 새 스니펫 파일이 열린다. 거기에 아래처럼 작성한 뒤:

<!-- javascript-cl.sublime-snippet -->
<snippet>
  <content><![CDATA[
console.log(${1});
]]></content>
  <tabTrigger>cl</tabTrigger>
  <scope>source.js</scope>
</snippet>

<!-- javascript-cl2.sublime-snippet -->
<snippet>
  <content><![CDATA[
console.log('${1:msg}:', ${2:msg});
]]></content>
  <tabTrigger>cl2</tabTrigger>
  <scope>source.js</scope>
</snippet>

<!-- javascript-cd.sublime-snippet -->
<snippet>
  <content><![CDATA[
console.log(${1});
]]></content>
  <tabTrigger>cd</tabTrigger>
  <scope>source.js</scope>
</snippet>

<!-- javascript-cd2.sublime-snippet -->
<snippet>
  <content><![CDATA[
console.debug('${1:msg}:', ${2:msg});
]]></content>
  <tabTrigger>cd2</tabTrigger>
  <scope>source.js</scope>
</snippet>

확장자명을 반드시 sublime-snippet으로 해서 패키지 파일 디렉터리에 저장한다. 패키지 파일 디렉터리는 윈도우 기준 %APPDATA%\Sublime Text\Packages\User이며 저장할 때 자동으로 지정된다.

⚠️ <snippet> 태그는 스니펫 파일의 루트 태그여야 한다. 그러니까 <snippet> 하나당 스니펫 파일 하나씩이다.

작성한 파일을 다시 열어보고 싶으면 View Package File 명령을 실행할 것.

패키지

패키지는 서브라임 커뮤니티에 공유되는 플러그인 같은 거라고 생각하면 된다.

일단 package control을 설치한다. 커맨드 팔레트ctrl + shift + p에서 'install package control' 입력 후 엔터.

설치가 끝나면 (ctrl + \` 눌러서 확인 가능) 다시 커맨드 팔레트에서 'Package Control: Install Package' 입력하면 패키지 검색 창이 뜬다. 여기서 원하는 패키지 검색 후 엔터 누르면 됨.

추천 패키지

⭐ MoveTab

ctrl + shift + pageup/pagedown으로 탭의 위치를 좌우로 이동한다.

StyleToken

파일 내에서 특정 단어별 하이라이팅

FileDiffs

간단한 diff 뷰어. diff 성능 자체는 그닥… (shell의 기본 diff와 거의 비슷)

ConvertToUTF8

EUC-KR로 작성된 파일을 UTF-8로 전환해서 열어주는 패키지. 이 패키지를 활성화하면 파일을 열때마다 인코딩을 물어봐서 좀 귀찮음

⭐ BracketHighlighter

브라켓 하이라이터. 괄호가 어디서 시작하고 어디서 끝나는지 행번호 표시영역에 아이콘으로 표시해준다.

Sync View Scroll

여러 view의 스크롤을 동기화하는 패키지. 심지어 좌우 스크롤도 동기화된다.

URLEncode

URL 인코드-디코드 기능 제공.

HexViewer

주기능은 HEX 파일 뷰어, 부기능으로 HEX-텍스트간 변환과 해시 생성 등을 지원하는 패키지. 좌측에 HEX, 우측에 일반 텍스트를 동시에 표시해줘서 포커스된 문자를 하이라이팅 해주는 등 뷰어 기능이 쓸만함.

⭐ SideBarEnhancements

서브라임의 부실한 사이드바(파일 탐색기) 기능을 보충해주는 패키지.

⭐ MarkdownPreview

마크다운 파일 브라우저로 미리보기

⭐ Insert Nums

늘어난 캐럿만큼 순번을 자동으로 입력해줌. 시작 번호와 증가치를 지정할 수 있음. 기본 단축키는 ctrl + alt + n, ctrl + alt + shift + n

⭐ Emmet

예전 이름은 Zen coding이었던 축약어로 마크업을 완성해주는 Emmet 지원 패키지. Emmet 문법은 여기를 보면 됨.

Log Highlight

로그 파일 가독성이 아주 약간 좋아짐.

⛔ Compare Side-By-Side

FileDiffs보다 보기 좋은 diff 뷰어. 단축키는 alt + n(다음), alt + p(이전)

이 패키지는 기본 단축키를 바꿔버려서 안쓰기로 함.

⭐ Clickable URLs

URL에 해당하는 텍스트에 커서를 놓고(혹은 드래그 후) 단축키 ctrl + alt + enter를 누르면 브라우저로 연결함.
⚠️ 설치하면 기본 단축키인 replace_all을 덮어쓰니 주의

⭐ Case Conversion

영단어 케이스 변환 기능 제공. 사용 방법은 커맨트 팔레트에서 'case convert' 치면 주르륵 나옴.

두문자어를 무시('userID'를 'userId'로 변환)하고 싶은 경우 Preferences > Package Settings > Case Conversion > Settings로 진입한 뒤 이걸 붙여넣으면 된다:

{"detect_acronyms": false}

🌟 InsertDate

2015년이 마지막 커밋이지만 서브라임4에서도 잘 작동하는 날짜 + 시간 입력기. 기본 단축키는 f5이며 strftime 포맷 커스텀 입력은 alt + f5.

⭐ Pretty JSON

JSON 문자열을 한 줄로 압축하거나 반대로 예쁘게 포맷해주는 플러그인

작성자 저장용 사용자 설정

settings - user

{
  "fallback_encoding": "UTF-8",
  "font_face": "Consolas",
  "font_size": 10,
  "tab_completion": false,
  "auto_complete": true,
  "auto_complete_commit_on_tab": true,
  "auto_complete_with_fields": true,
  "show_encoding": true,
  "show_line_endings": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "save_on_focus_lost": true,
  "show_full_path": false,
  "show_rel_path": true
}

key bindings - user

[
  { "keys": ["f1"], "command": "show_overlay", "args": {"overlay": "command_palette"} },
  { "keys": ["ctrl+shift+d"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },
  { "keys": ["ctrl+shift+k"], "command": "duplicate_line" },
  { "keys": ["ctrl+shift+s"], "command": "save_all" },
  { "keys": ["ctrl+k", "ctrl+k"], "command": "do_nothing" },
  { "keys": ["ctrl+k", "ctrl+backspace"], "command": "do_nothing" },
  { "keys": ["ctrl+b"], "command": "do_nothing" }
]

걸리적거려서 기본 단축키 몇 개는 끔.

기본 단축키

Build 3126 이후에 기록함.

무슨 명령인지 모르겠으면 여기를 보자.

단어 선택

• ctrl + shift + right/left: 단어(words) 단위의 선택 영역을 좌우로 확장한다. 단어란 언더바_를 포함한 연속적인 단어 구성 문자를 의미한다. (abc, abcDef, ABC_DEF, …)
• alt + shift + right/left: 보조 단어(subwords) 단위의 선택 영역을 확장한다. 단어와 다르게 보조 단어는 앞단어와 다른 대소문자와 모든 특수문자로 구분된다.

멀티 캐럿(Multiple Selection)

서브라임에선 Expand Selection 기능으로 분류한다.

캐럿을 추가해 여러 지역에서 작업을 동시에 할 때 사용하는 기능. 에디터마다 부르는 이름이 제각각이다. 서브라임은 Expand Selection, 아톰과 VSCODE는 Add Selection, 인텔리제이는 Select Next Occurrence 😒

• ctrl + d: 선택한 단어와 동일한 다음 단어에 캐럿 추가
• ctrl + u: 캐럿 추가 되돌리기
• ctrl + alt + 방향키 위/아래: select_lines 위나 아래로 멀티 캐럿
• alt + f3: 현재 파일에서 선택한 단어와 같은 모든 단어에 멀티 캐럿
• ctrl + shift + l: split_selection_into_lines 선택한 영역에서 각 라인마다 캐럿 분리

커서/포커스 이동

• alt + \-: Jump Back 이전 포커스로 이동. 이클립스의 alt + ←와 비슷
• alt + shift + '+': Jump Forward 다음 포커스로 이동. 이클립스의 alt + →와 비슷
• ctrl + r: 현재 파일의 모든 심볼(함수, 변수, 프로퍼티, 제목 등) 보기. 선택하면 포커스 이동.
• ctrl + shift + r: 현재 프로젝트(혹은 열려있는 폴더)의 모든 심볼 보기. 선택하면 포커스 이동.
• f12: Goto Definition 현재 커서가 있는 함수나 메서드의 선언부로 이동. 제한적으로 작동하는 기능(Syntax 보기 형태와 문서의 내용이 알맞아야 함)이다.
• shift + f12: Goto Reference 함수나 메서드를 사용(참조)하고 있는 라인으로 이동.
• ctrl + 0: 사이드바로 포커스 이동
• alt + 숫자키: 열려진 탭 사이의 포커스 이동
• alt + shift + 숫자키: 레이아웃 나누기
• ctrl + 숫자키: 레이아웃이 나눠진 상태에서 다른 레이아웃으로 포커스 이동
• ctrl + r: Goto Symbol
• ctrl + shift + r: Goto Project Symbol

Code Folding

특정 코드 영역을 접고 펴는 기능

• ctrl + shift + [: Fold (보통은 괄호 등으로 작성된 코드 블록을) 접기
• ctrl + shift + ]: Unfold 펼치기
• ctrl + k, ctrl + 1: Fold All 모두 접기
• ctrl + k, ctrl + j: Unfold All 접혀있는 코드 전부 펼치기
• ctrl + k, ctrl + 숫자키: Fold Level 2~9 코드 깊이에 따라 해당하는 모든 코드를 접는 기능이다. 숫자키는 2부터 9까지 가능

편집

• ctrl + shift + j: 라인 단위 병합
• F9: 대소문자 무시하고 라인 단위 알파벳 오름차순 정렬
• ctrl + F9: 라인 단위 알파벳 오름차순 정렬
• ctrl + m: 가까운 닫는 괄호(bracket) 혹은 여는 괄호로 이동.
• ctrl + shift + m: 가까운 닫는 괄호까지 텍스트 선택.

오버레이 Overlay

• ctrl + \`: 콘솔창
• ctrl + shift + p: Command Palatte 빠른 명령어 탐색창 열기
• ctrl + p: (폴더 열기 이후)빠른 파일 탐색창 열기
• ctrl + r: 함수 단위 탐색창 열기
• ctrl + g: 라인 이동
• ctrl + ;: 키워드 탐색창 열기
• ctrl + alt + shift + p: Show Scope Name 스코프 이름 보기. 현재 캐럿이 위치한 곳 기준으로 스코프 정보를 툴팁으로 표시하는 기능이다. 그런데 소스 코드의 스코프가 아니라, 서브라임 텍스트의 환경 기준의 스코프를 의미한다. 그러니께 서브라임 패키지 개발자용 기능

매크로

• ctrl + q: 매크로 기록 시작/종료
• ctrl + shift + q: 매크로 실행 (하나밖에 안 되나 보다)

기타 조합형 단축키

• ctrl + k: 단축키 시퀀스 시작
• ctrl + k, ctrl + u: 대문자 변환
• ctrl + k, ctrl + l: 소문자 변환
• ctrl + k, ctrl + b: 사이드 바 토글. 서브라임 머지에도 같은 단축키로 작동함.

북마크 Bookmark

활성화된 파일 내에서만 작동하는 북마크 기능

• ctrl + f2: 현재 캐럿 위치에 북마크 생성
• f2: 다음 북마크로 이동
• shift + f2: 이전 북마크로 이동
• ctrl + shift + f2: 현재 파일의 북마크를 모두 삭제한다.
• alt + f2: 모든 북마크 위치에 캐럿을 생성한다.

마크 Mark

현재 캐럿이 위치한 라인과 컬럼을 마킹하는 기능. 마킹지점을 기준으로 범위 선택이나 범위 삭제를 할 수 있다.

• ctrl + k, ctrl + space: 마크 만들기
• ctrl + k, ctrl + a: 현재 커서의 위치부터 마크까지 선택(드래그 블록)
• ctrl + k, ctrl + w: 현재 커서의 위치부터 마크까지 삭제
• ctrl + k, ctrl + x: 현재 커서의 위치에 새로 마크를 만들고, 이미 마킹되어 있던 지점으로 커서 이동
• ctrl + k, ctrl + g: 마크 삭제
• ctrl + k, ctrl + y: Yank 기능이라는데 어떻게 작동하는 건지 몲.

프로젝트, 워크스페이스

• alt + shift + p: Quick Switch Project 빠른 프로젝트 변경 창 열기