Sublime Text 3 (서브라임 텍스트) 패키지 설치방법 및 유용한 패키지 소개

Sublime text를 욱더 막강한 코딩 툴로 만들기 위해 

여러가지 유용한 패키지를 설치 해야 합니다. 패키지 설치 방법은 다음과 같습니다.

Package 설치 방법

1. Ctrl + Shift + P 를 누릅니다. (패키지 콘드롤을 이용하여 패키지 설치.)

2. PCI 를 입력하면 Package Control: Install Package 부분에서 엔터!!!

3. 기다리면 패키지 검색란에서 원하는 패키지 검색 후 설치.

유용한 Package

1. Emmet (Zencoding)

Emmet은 Zencoding 이라고도 불리며 코딩하는 사람들은 모두 알것입니다. 

줄임말로 순식간에 원하는 코딩을 할 수 있습니다.

단축키는 Tab 이나 Ctrl + E 로 제공됩니다.

ex) 

HTML : ul>li*5 (ul안에 li 5개 생성)

CSS : mgb5 (margin-bottom:5px; 생성)

2. All Autocomplete

코딩을 할때 자동완성의 기능을 제공한다. 

근데 내가 설치했을때는 잘 모르겠다...;;;

3. AutoFileName

어떤 파일이나 경로 설정의 임포트시 자동으로 파일의 위치경로를 알려준다.

4. Diffy

비교해 보고 싶은 두개의 파일이 있다면 이것을 이용하여 비교할 수 있습니다.

5. GitGutter

혹시 Git을 사용하고 계신가요? 버전관리를 하고 계신분이라면 꼭! 추가시키시면 후회하지 않으실 플러그인입니다. 코드작업시에 이전 작업에서 수정된 부분과, 현재 작업을 진행하고 있는 부분을 확인시켜 주기 때문에 무척 도움이 됩니다.

6. Goto-CSS-Declaration

html 파일에서 클래스를 css 에서 바로 찾고자 한다면 이 패키지는 필수 입니다.

단 html과 css 파일이 같이 열려 있어야 합니다.

7. SCSS

SASS를 Sublime Syntax에 적용시킴으로 알아보기 쉽게 구분색으로 화면에 표시합니다.

8. SublimeLinter

언어의 각종 문법오류를 체크 해줍니다.

근데 실제 설치해서 오류를 내 보았는데 표시가 안나네요. sublime text2가 아니라서 그런지??? 잘 모르겠습니다.

9. Tag

<tag>를 열고, </까지 입력하면 자동으로 닫아주는 플러그인입니다.

10. BracketHighlighter

코딩의 열고 닫고를 밑줄로 표시해 줍니다. 표시로 인해 어디부터 시작이고 끝인지를 한눈에 확인할 수 있습니다.

11. W3CValidators

W3C 에 접속하여 오류를 확인해 줍니다.

‘Tools > W3C Validators’에서 체크하고자 하는 문서형식을 선택하면 됩니다.

12.HTML-CSS-JS Prettify 

자동 줄 정렬을 시켜줍니다. (Node.js에 의존함으로 Node.js를 설치해야 합니다. 관련링크)

정렬하려는 코드를 드래그하여 선택 후 단축키를 눌러주면 자동정렬 됩니다.

단축키 : Ctrl + Shift + H

세팅 : 들여쓰기 Size 설정(Preferences - Package Settings - HTML/CSS/JS Prettify - set Prettify Preferences ) → indent_size 의 값 조절

=============2018.07.02 추가=============

13.JSON Key-Value

다소 한색상만으로 보여지는 JSON 파일을 

색상을 적용하여 가독성을 높여준 패키지 입니다.