HTML5와 CSS3을 작성하기 위해 설치했습니다.
VSCode를 사용하고 있었습니다만, Sublime Text도 있다고 알았으므로 비교를 위해서 사용해보기로 했습니다.

[1] 설치

다음 URL에서 다운로드하여 설치합니다.
Sublime Text 3 - Sublime Text

[2] 일본어화

[2-1] Package Control 설치

일본어화하기 전에 패키지 관리 도구인 "Package Control"을 설치합니다.

Sublime Text에서 [Show Console]을 선택한다

Package Control 페이지를 열고 설치 명령 복사

Console의 입력란에 붙여 넣고 Enter 키를 누릅니다

[2-2] Japanize 설치

일본어 패키지의 "Japanize"를 Package Control을 사용하여 설치합니다.

Sublime Text에서 Package Control을 선택합니다

Install Package 선택

[Japanize] 선택

다음 파일 작업을 수행합니다.
- Japanize 설치 디렉토리의 ".jp"파일을 "Default"디렉토리에 복사
- 복사한 ".jp"파일에서 확장자 "*.jp"제거
- Japanize 설치 디렉토리의 "Main.sublime-menu"를 "Default"디렉토리에 복사

$ cd /Users/(ユーザー名)/Library/Application\ Support/Sublime\ Text\ 3/Packages/Japanize/
$ mkdir ../Default/
$ cp -p *.jp ../Default/.

$ cd ../Default/.
mv Context.sublime-menu{.jp,}
mv Side\ Bar\ Mount\ Point.sublime-menu{.jp,}
mv Encoding.sublime-menu{.jp,}
mv Side\ Bar.sublime-menu{.jp,}
mv Find\ in\ Files.sublime-menu{.jp,}
mv Syntax.sublime-menu{.jp,}
mv Indentation.sublime-menu{.jp,}
mv Tab\ Context.sublime-menu{.jp,}
mv Line\ Endings.sublime-menu{.jp,}
mv Widget\ Context.sublime-menu{.jp,}
mv Main.sublime-menu{.jp,}

$ cd ../Japanize/
$ cp -p Main.sublime-menu ../User/.

[3] 패키지 설치

Japanize를 설치할 때와 동일한 방식으로 다음 패키지를 설치했습니다.


패키지
내용


Emmet
HTML, CSS를 효율적으로 쓸 수 있다

HTML5
HTML5 코드 완성

CSS3
CSS3 코드 완성

All Autocomplete
코드 완성 강화

AutoFileName
파일 경로 자동 완성

BracketHighlighter
태그 및 괄호 강조 표시

AlignTab
이콜과 쉼표 정렬

Color Helper
색상 코드를 해당 색상으로 표시

ConvertToUTF8
UTF-8 이외의 문자 코드로도 표시

Goto-CSS-Declaration
CSS의 해당 지점으로 날아갑니다.

TrailingSpaces
줄 끝 공간 하이라이트

Sublime Linter
구문 오류 검사

SublimeLinter-html-tidy(*1,2)
HTML 구문 오류 검사

SublimeLinter-csslint(*3)
CSS3 구문 오류 검사

Sass
Sass용 하이라이트

SCSS
SCSS용 하이라이트

SublimeLinter-contrib-sass-lint(*4)
Sass 구문 오류 검사


(* 1) 별도 tidy-html5 설치 필요
SublimeLinter/SublimeLinter-html-tidy

MacOSX의 경우

$ brew install tidy-html5

(*2)/usr/local/bin/tidy를 참조하도록 한다
SublimeText3에서 HTML5 구문 검사 - Qiita

sudo vi /etc/paths

/etc/paths

/usr/local/bin
/usr/bin
/bin
/usr/sbin
/sbin

(* 3) 별도 csslint 설치 필요
SublimeLinter/SublimeLinter-csslint

$ npm install -g csslint

(* 4) 별도 sass-lint 설치 필요
SublimeLinter-contrib-sass-lint

npm install -g sass-lint

참고 자료

Sublime Text3를 주요 텍스트 편집기로 결정한 7가지 이유
Sublime Text 2에서 3으로 변경할 때 설정
WordPress 개발이 바삭바삭한 Sublime Text 추천 패키지 30개 정리