Sublime Text 3インストール(MacOSX)

HTML5とCSS3を書くためにインストールしました。
VSCodeを使っていたのですが、Sublime Textもあると知ったので比較のために使ってみることにしました。

# [1] インストール
以下のURLからダウンロードしてインストールします。
[Sublime Text 3 - Sublime Text](https://www.sublimetext.com/3)

# [2] 日本語化
## [2-1] Package Controlインストール
日本語化を行う前にパッケージ管理ツールである「Package Control」をインストールします。

- Sublime Textで[Show Console]を選択する
- [Package Controlのページ](https://packagecontrol.io/installation#st3)を開き、インストールコマンドをコピーする
- Consoleの入力欄に貼り付けてEnterキーを押下する

<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/bd58318f-6887-43e5-7c0e-0498c311162c.png" width=80%>
<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/34a3f6d6-cff8-2b78-da48-82ed8dbfa82d.png" width=70%>
<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/72527991-5018-aa2b-d03c-c7ebba9fbda8.png" width=80%>

## [2-2] Japanizeインストール
日本語化パッケージの「Japanize」をPackage Controlを使用してインストールします。

- Sublime Textで[Package Control]を選択する
- [Install Package]を選択する
- [Japanize]を選択する

<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/0e87a44c-70ca-e500-d78e-8c94445cf7fc.png" width=80%>
<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/2f1feaaa-0082-4c67-30dc-ba1804bdbc31.png" width=80%>
<img src="https://qiita-image-store.s3.amazonaws.com/0/345798/d95f219a-dfbc-24b5-b610-908b09e70865.png" width=80%>

以下のファイル操作を行います。
- Japanizeインストールディレクトリの"*.jp"ファイルを"Default"ディレクトリにコピーする
- コピーした"*.jp"ファイルから拡張子"*.jp"を取り除く
- Japanizeインストールディレクトリの"Main.sublime-menu"を"Default"ディレクトリにコピーする

```bash
$ cd /Users/(ユーザー名)/Library/Application\ Support/Sublime\ Text\ 3/Packages/Japanize/
$ mkdir ../Default/
$ cp -p *.jp ../Default/.
```
```bash
$ 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,}
```
```bash
$ 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](https://github.com/SublimeLinter/SublimeLinter-html-tidy)

```bash:MacOSXの場合
$ brew install tidy-html5
```

(*2) /usr/local/bin/tidyを参照するようにする
[SublimeText3でHTML5の構文チェック - Qiita](https://qiita.com/maccotsan/items/eebd7aa5932b74b48eff)

```bash
sudo vi /etc/paths
```
```file:/etc/paths
/usr/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
```

(*3) 別途csslintのインストールが必要
[SublimeLinter/SublimeLinter-csslint](https://github.com/SublimeLinter/SublimeLinter-csslint)

```bash
$ npm install -g csslint
```

(*4) 別途sass-lintのインストールが必要
[SublimeLinter-contrib-sass-lint](https://github.com/skovhus/SublimeLinter-contrib-sass-lint)

```bash
npm install -g sass-lint
```

# 参考資料
[「Sublime Text3」をメインのテキストエディタに決めた7つの理由](https://iritec.jp/web_service/7085/)
[Sublime Text 2 から 3 に乗り換えたときの設定](http://memo.sanographix.net/post/66229664630)
[WordPress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ](https://nelog.jp/sublime-text-packages)