[팁]Sublime Text 2(서브라임텍스트) 몇가지 팁
- 퍼블리셔/SublimeText
- 2012. 11. 26. 09:00
서브라임텍스트를 사용하면서 알게된 사용법 및 팁을 알려드립니다.
아마도 팁에 관한 글은 몇가지 더 연장될것으로 생각됩니다.
이글에서 알려드릴 사용법등은 아래와 같습니다.
- Package Control 삭제하는 방법.(플러그인 삭제하는 법).
- 서브라임 텍스트 초기상태로 되돌리기.
- 코드작성시 옆으로 이동하는 방법.
- Snippet 의 간단한 소개.
1. Package Control , 플러그인 삭제하는 방법.
여기서의 삭제는 플러그인을 삭제하는 방법을 말합니다.
간혹 플러그인을 설치했는데 마음에 안든다든가, 키의 충돌이 있다든가하면 플러그인을 삭제하면 됩니다.
근데 삭제하려면 먼저 Remove Package 를 선택합니다.
플러그인 설치때와 마찬가지로 곧이어 설치되어 있는 플러그인 목록이 나옵니다.
아래의 이미지는 아무것도 안눌렀을때 자연적으로 첫번째 목록이 선택된 화면입니다.
여기서 엔터를 클릭하면 Emmet 플러그인이 삭제됩니다.
2. 서브라임 텍스트 초기상태로 되돌리기.
서브라임 텍스트를 사용하다보면 이것 저것 설정도 많이하고, 플러그인도 많이 설치하고 그러면 충돌이 나거나 무거워집니다.
그럼 설치했을때로 되돌리기도 하는데 이 방법을 알아봅니다.
플러그인도 하나도 없고, 서브라임 텍스트를 막 설치했을때의 깨끗한 상태로 되돌리는 방법입니다.
아래의 위치에 있는 폴더를 삭제하면 됩니다.
OS X: ~/Library/Application Support/Sublime Text 2
Windows: %APPDATA%\Sublime Text 2
Linux: ~/.config/sublime-text-2
저의 경우 윈도우니까 Packages 폴더를 열어보았습니다.
왼쪽의 Sublime Text 2 하위 폴더를 모두 삭제합니다.
그럼 아래처럼 나오겠죠.
깨끗한 모습입니다.
여기서 Sublime Text 2 서브라임 텍스트를 다시 실행하면 기본폴더와 파일은 다시 생성이 됩니다.
여기서 중요한 점은 기존의 설정과 플러그인은 모두 삭제가 된다는 겁니다.
그린 다시 사용하고자 하는 설정은 먼저 백업을 한 다음 사용하세요.
서브라임텍스트는 초기상태로 되돌리는것도 쉽습니다.
3. 코드작성시 옆으로 이동하는 방법.
이건 그림을 보며서 설명하겠습니다.
특히 자주 사용하는것은 자바스크립트를 사용할때 자주 사용하더군요.
서브라임텍스트는 ' 를 입력하면 자동으로 '' 가 입력이 됩니다.
마찬가지로 ( 를 입력하면 () 모두 입력이 되고 커서가 중간에 위치하게 됩니다. 아주 편리한 기능이죠.
아마도 사용해보신분은 다 아실겁니다.
문제는 아래처럼 .testdiv 까지만 입력했을때 서브라임텍스트는 자동으로 닫는 ') 까지 입력이 되므로 일일이 오른쪽으로 이동하는 화살표 이동키를 두번 눌러야 됩니다.
또는 입력하지 않고 자동으로 생성된 코드는 그대로 입력하면 또 생성되지 않고 그냥 입력되어지고 옆으로 이동을 하게 됩니다.
이처럼 될때는 바로 Ctrl + 우측이동키를 입력하면 됩니다.
한번 해보세요. 그래야 이해가 갈겁니다
또한 코드중간에 입력한 것을 기억했다가 그대로 반복하는것도 가능합니다.
코드를 한줄 입력하고 엔터, 동일한 형식으로 코드를 작성할때 옆으로 이동할때 Shift + 우측이동키를 눌러보세요.
또 Ctrl + 엔터도 사용해보세요.
4. Snippet 의 간단한 소개.
snippet 은 자동으로 입력되어지는 단축코드라고 보시면 됩니다.
이걸로 여러가지를 만들수 있으니 검색하면 관련글이 많이 나옵니다.
여기서는 생성하고 사용하는 방법을 간단이 알아봅니다.
저는 css 를 작성할때 단락을 구분지어주는 긴주석을 넣는것을 한번 넣어보겠습니다.
먼저 Tool - New Snippet 를 클릭합니다.
이처럼 보일텐데요.
아래처럼 수정합니다.
이코드를 저는User 폴더에 comment.sublime-snippet 이라는 이름으로 저장을 했습니다.
빨강색 네모안에 들어가는것이 주석으로 에디터에 표시되는 부분입니다.
노랑색 네모는 주석을 해제해서 원하는 snippet의 이름을 적어주면 됩니다. 이것의 경우 css 사용하는 긴주석이기때문에 comment 라고 적었습니다.
그럼 아래처럼 css 를 작성할대 comm 이라고 작성하니 툴팁이 나오는거 보이시죠.
여기서 엔터를 클릭하면 아래그림처럼 나옵니다.
보시다시피 저위의 그림에서 $1 은 첫번째 커서의 위치를 나타내고, $2 는 두번째커서의 위치를 나타냅니다.
첫번째 커서의 위치에서 ${1:이 부분은 적어되고 안적어도 됩니다. 하지만 원하는 단어나 키워드를 미리 적어서 저장해 놓았다면 또다시 작성하지않고 다음으로 넘어가겠죠...
제가 설명으로 ${1:제목을 적은다음 탭} 이라고 적은것처럼 원하는 글을 다 적었으면 탭키를 누르면 ${2} 의 위치에 커서가 자동으로 가게됩니다.
글로 설명이 안되 간단한 동영상을 만들어봤습니다.
참고 링크
[Design/코딩] - Sublime Text 2(서브라임텍스트) tip
[Design/코딩] - Sublime Text 2에서 코드 오류를 자동으로 잡아주는 SublimeLinter
[Design/코딩] - Sublime Text 2 단축키 및 한글
[Design/코딩] - Sublime Text 2에서 less 컴파일하기
[Design/코딩] - Sublime Text 2 플러그인 Emmet cheat-sheet
[Design/코딩] - Sublime Text 2에서 폴더 파일 빠르게 만드는 방법(AdvancedNewFile)
[Design/코딩] - Sublime Text 2에서 Fetch 설정파일
[Design/코딩] - Subline Text 2에서 YUI 를 이용하여 js, css 압축하는 방법
[Design/코딩] - Sublime Text 2에서 less 파일 구문강조하기
[Design/코딩] - Sublime Text 2에서 Package Control 설치하는 방법
[Design/코딩] - Sublime Text 2에서 Emmet 사용하는 방법
[Design/코딩] - Sublime Text 2 에서 코드정렬하기(Alignment)
[Design/코딩] - Sublime Text 2 온라인에서 코드 가져오기(Fetch)
[Design/코딩] - Sublime Text 2에서 Gist(github) 코드 불러오기,업데이트하는 방법
[Design/코딩] - Sublime Text 2로 Gist(github)에 코드 발행하는 방법
[Design/코딩] - Sublime Text 2 사이드바 확장(Enhancements)
[Design/코딩] - Sublime Text 2에서 Prefixr 사용하는 방법
[Design/코딩] - Sublime Text 2에서 Zen Coding을 사용하는 방법
[Design/코딩] - Sublime Text 2에서 Zen Coding 설치하는 방법