EditorSublimeText

SublimeText Packages

Sublime Text 패키지 활용

서브라임 텍스트에 패키지들를 활용 하려면 패키지 컨트롤이 미리 설치 되어 있어야 한다. 패키지 컨트롤이 설치 안되어 있다면 아래 링크의 내용을 참조하면 된다.
서브라임 패키지 컨트롤 설치 방법

Emmet

에멧(Emmet)은 간단한 글자 입력으로 복잡한 코드를 완성할 수 있는 플러그인 이다. 이전의 젠 코딩(Zen Coding)이었던 것이 Emmet으로 이름이 바뀌면서 기능도 더 좋아졌다.

FTPSync(FTP 연결하기)

기본적으로 서브라임 텍스트에는 호스팅 서버와 연결해 작업할 수 있는 환경이 구비되어 있지 않다. 하지만 관련 플러그인을 설치하고 설정만 해주면 서버와 연결해서 작업 할 수 있다. FTP의 경우 무료 플러그인이 있고 SFTP는 유료 플러그인이 있다.

SideBarEnhancements(사이드바 기능 향상)

기본적으로 서브라임 텍스트에는 사이드바의 폴더나 파일을 대상으로 마우스 오른쪽 버튼을 클릭했을 때 나오는 메뉴가 별로 없다. Sidebar로 검색하면 처음에 나타나고, 설치하면 바로 사용할 수 있다.

Color Picker(컬러 피커)

패키지 설치에서 Color Picker로 검색해 설치한 후 CSS 파일을 열고 Ctrl + Shift + C 를 누르면 컬러피커가 나타난다. 컬러피커는 CSS 파일뿐 아니라 다른 파일에서도 열린다. 이미 컬러 피커가 열린 상태에서는 서브라임 텍스트에서 파일을 열거나 클릭할 수 없으므로 색상 코드를 입력할 곳을 미리 지정한 다음 열어야 한다.

Minifier(축약 코드)

파일의 용량을 줄이기 위해 코드의 공백을 모두 제거하고 한줄로 만드는 패키지 이다.
메뉴에서 Toos Minifier를 선택하면 축약형으로 변경 가능 하다. 자바스크립트에서도 사용할 수 있고 용량이 큰 경우 다소 시간이 걸리기도 한다. Minifier의 반대 기능을 하는 패키지는 Prettify 이다.

HTML/CSS/JS Prettify

패키지 설치에서 위 제목과 같은 검색어로 검색한 후 설치한다.
이전에 Minifier로 축약한 파일을 대상으로 Ctrl + Shift + H 를 누르면 예쁘게(Prettify) 볼수 있게 코드가 바뀐다.

BracketHighlighter

기본적으로 서브라임 텍스트에서는 서로 일치하는 태그나 따옴표, 괄호를 구분하기가 어렵다. 하지만 BracketHighlighter 패키지를 설치하면 이를 쉽게 구분할 수 있다.

AutoPrefix

CSS3 속성은 아직 웹 표준으로 승인되지 않은 것이 많아서 브라우저별 접두어를 붙여서 사용해야 하는데 모든 브라우저의 접두어를 일일이 복사해 사용하기는 번거롭다. AutoPrefix 패키지는 바로 이러한 문제를 해결해 준다.

Canluse

패키지 설치에서 CanIuse로 검색해서 설치하면 사용법과 단축키가 나온다. CSS 속성에 커서를 배치한 다음 단축키인 Ctrl + Alt + F 를 누르면 웹 브라우저에서 아래의 사이트로 이동하며 웹표준이 현재 어떤 상태인지 알 수 있다.

CSSComb

CSSComb는 스타일시트를 보기 좋게 정리해주는 패키지 이다.
패키지 설치에서 CSSComb으로 검색해 설치하고 스타일시트 화면에서 Ctrl + Shift + C 를 누르면 자동으로 정리(스타일 순서)해 준다. 그룹이나 팀 단위로 프로젝트를 진행할 시 활용할 만한 패키지이다.

Sublime Alignment

Sublime Alignment는 코드를 = 기호나 : 기호를 기준으로 보기 좋게 좌우로 나누어 정렬해주는 패키지 이다.
패키지 설치에서 Sublime Alignment으로 검색해 설치한 후 정리하고자 하는 코드를 블록으로 설정한 다음 Ctrl + Alt + A(맥에서는 Cmd + Ctrl + A)를 누르면 코드가 정리되며, CSS의 경우 세미클론을 기준으로 좌우로 정렬된다.

1
{"keys": ["ctrl+alt+a"], "command": "alignment"}

이 패키지는 별도의 메뉴를 제공하지 않아 단축키를 사용해야 하는데 다양한 패키지를 설치해서 사용하다 보면 단축키가 중복될 가능성도 있으므로 패키지가 작동하지 않을 경우 사용자 키 바인딩 파일을 열고 위 코드를 추가한 다음 편집기를 재시작해야 한다.

Trimmer
불필요한 공백을(Trailing Whitespace)를 제거하는 패키지 이다.
패키지 설치에서 Trimmer로 검색해 설치하고 줄 끝에 공백이 있는 경우 Ctrl + Alt + S(맥에서는 Ctrl + S)를 누르면 줄 끝 공백이 제거된다. 마찬가지로 단축키가 중복될 경우 아래의 코드를 사용자 키 바인딩에 추가해야 한다.

1
{"keys": ["ctrl+alt+s"], "command": "trimmer"}

이러한 패키지별 단축키는 메뉴에서 Preferences -> Package Settings 에 설치된 패키지 목록이 있으니 해당 패키지에 마우스를 올리고 Key Bindings - Default를 선택하면 나타난다.

HyperlinkHelper

도메인에 URL 링크를 자동으로 만들어주는 패키지 이다.
도메인과 도메인 접미어를 입력한 뒤 Ctrl + Shift + Alt + L(맥에서는 Cmd + Shift + Ctrl + L)을 누르면 잠시 후에 a 태그와 href, title 속성이 자동으로 만들어진다. href와 title은 구글 검색을 통해 채워지기 때문에 해당 URL이 구글 검색 엔진에 등록된 상태여야 한다.

Fetch(파일 가져오기)

파일이나 압축 파일을 가져와 원하는 폴더에 설치할 수 있는 패키지 이다. 패키지 설치에서 Fetch로 검색하면 Nettus + fetch가 나타난다. 이 패키지를 선택하고 엔터 키를 눌러 설치한
Ctrl + Shift + P를 눌러서 커맨트 팔레트에서 fetch로 검색한 후 Fetch: Manage를 선택하고 엔터 키를 누르면 Fetch 설정 파일이 열린다.

SublimeLinter

SublimeLinter 패키지는 코드 작성 시 에러를 즉시 감지해서 알려주는 패키지 이다. 서브라임 텍스트3에서는 API가 달라지면서 서브라임 텍스트2와 달리 사용 언어별로 플러그인을 별로도 설치해야 한다.

PackageResourceViwer( 패키지 리소스 보기)

서브라임 텍스트 3의 패키지는 압축돼 있는 경우가 많아서 파일 내용을 보거나 편집 할 수가 없는데, 이 플러그인을 설치하면 파일 내용을 보거나 편집할 수 있다.

서브라임 텍스트에서 커맨드 라인 열기

먼제 패키지 설치에서 Terminal로 검색해 설치한 다음 편집기에서 파일을 열고 Ctrl + Shift + T(맥에서는 Cmd + Shift + T)를 누르면 커맨드 라인이 열린다. 한가지 주의할 점은 동일한 단축키가 이미 서브라임 텍스트에서 사용하고 있어서 닫힌 파일 열기 기능이 작동되지 않는다는 것이다. 따라서 다른 키로 변경하는 것이 좋다.

1
2
3
4
5
6
7
8
{
    "keys": ["ctrl+alt+k"],
    "command": "open_terminal",
    "args": {
        "parameters": ["-T", "Custom Window Title"]
    }
},
{"keys": ["ctrl+alt+t"], "command": "reopen_last_file"}

SublimeREPL

이 패키지는 서브라임 텍스트 편집기 내부에서 커맨드 라인 기능을 사용할 수 있게 만들어 준다.

Goto Documentation

커서가 위치한 단어의 문서 사이트로 이동하는 패키지 이다.
다음과 같이 중복되지 않게 원하는 단축키를 추가한다.

1
{"keys": ["ctrl+shift+h"], "command": "goto_documentation"}

JavaScript & NodeJs Snippet

자바스크립트와 Node.js의 코드 조각 패키지 이다.

공유하기