Sublime Text日本語化とプラグインの入れ方+α

現在はWeb開発には基本的にvimを使っているのですが，学生時代から3年以上愛用してきたのはSublime Textでした。
今回は訳あってSublime Textの環境も構築する必要があったので，そのやり方と僕のSublime Textのプラグインのご紹介をします。
プラグインは有名どころばかりなので，既出感も否めませんが，これを入れておけば間違いないです。

【環境】
Windows10 Home 64bit(1703 build)

※Macでやったときはコチラが大変参考になりました。
<a href="https://qiita.com/Shoesk/items/3e766206531dc2dcd338">MacでSublime Text 3のインストールと日本語化メモ</a>

# インストール
## Sublime Text本体のインストール
<a href="http://www.sublimetext.com/3">こちら</a>からインストールできます。
今回はwindows 64bitを選択。
![install.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/9fbbe191-badd-42be-bb96-b23df5d4ca89.png)
インストーラがダウンロードされるので，インストールします。
※記事投稿時の最新バージョンは3143でした。

## Package Controlのインストール。
Sublime Textは様々なプラグインを入れることで自分だけの強力なエディタになります。
簡単にプラグインを入れられるように，まずはSublime Text本体にPackage Controlをインストールします。
<a href="https://packagecontrol.io/installation">こちら</a>にアクセスすると，以下のような画面になるので，
![packagecontrol.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/273f54e0-d780-b761-a86d-8995cc9b4968.png)
赤枠の部分を選択してコピーします。

次にSublime Textを起動して，メニューバーから「View」→「Show Console」でコンソールを開き，先程コピーした文字列をコンソールに貼り付けて，Enterを押します。
![showconsole.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/2946dd60-9e61-6d56-f10c-ef8dc42120c6.png)

# 日本語化
この状態でプラグイン等を入れて使っても何の問題も無いのですが，僕自身が悲劇的に英語ができなかったために，即日本語化しました。
「Preferences」→「Package Control」(もしくは Ctrl + Shift + p)でPackage Controlのコンソールを開きます。
そこに「ins」と入力すると下に候補が出てくるので，「Package Control: Install Package」を選んでEnter。
![ins.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/b5bab589-e4d7-0ac0-de87-2690b2bac4e2.png)
さらにコンソールが出てくるので，そこには「japa」と入力し，候補に出てくる「japanize」を選んでEnterを押します。
![japa.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/cdfbed5d-135c-c442-9299-d322c2032a66.png)
これで日本語化に必要なファイルがダウンロードされました。
すでにメニューバーが日本語化されていると思います。
さらにこの日本語化プラグインの作者さんはとても丁寧で，この先の日本語化プラグインの導入方法まで記してくれています。
![japanize.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/82a2f90c-21f5-87b9-9280-1d5f3d3b7cd6.png)
まずは「基本設定」→「Browse Packages」でPackageが保存されるフォルダを開きます。
そこに「Default」フォルダがなければ右クリックして「新規作成」から作っておきましょう。
次にそこにある「japanize」フォルダを開いて，ファイル名の末尾が「.jp」になっているファイルを全て先程の「Default」フォルダにコピー&ペーストします。
![japanize_files.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/50c14588-c83a-6c51-1568-d16cf479cd39.png)
そして，ファイル名末尾の「.jp」をファイル名を変更して削除します。
![japanize_files_edit.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/01a10df0-2d30-772a-28fe-e23032ee143e.png)
この時「拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか？」と聞かれますが，構わず変更してください。
これで詳細メニューも日本語化されました。
うまく日本語化されていないときはSublime Textを再起動してみてください。
![japanize_menu.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/6340308e-2277-c306-108c-c2c791245106.png)

# プラグイン
導入方法は先程の日本語化と同じです。
「japa」と入れたところに，下記のプラグイン名を入れるとインストール出来ます。

## All Autocomplete
### 補完強化
Sublime Textはもともと補完機能がありますが，それをさらに強化します。
僕がプログラミングを始めた頃はタイプミスがすごく多かったので，それを減らすためにも自動補完はすごく助かりました。
https://github.com/alienhard/SublimeAllAutocomplete
![body.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/4b43ea67-31d0-bf4e-89b1-7cce011aea3c.png)

## AutoFileName
### ファイル名・サイズを補完
画像を挿入したい際に重宝します。
画像のパスを途中まで入力すると，ファイル名とそのサイズを補完で出してくれます。
https://github.com/BoundInCode/AutoFileName
![autofilename.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/a782be8a-f8c0-63f7-e4fc-835c40bcb776.png)

## BracketHighlighter
###開始や終了タグの強調
カーソルがある場所を囲んでいるタグを行番号の左隣にマークで表示してくれます。
画像では少し見えにくいですが，bodyタグを強調しています。
https://github.com/SublimeCodeIntel/SublimeCodeIntel
![bracket.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/dce1dfeb-2af5-7272-ce56-1f8addab4774.png)

## Color Highlighter
### 色コードをカラーで表示
コード中の色コードをカラーで表示してくれます。
文字色や背景色の指定をしている場所がわかりやすくなります。
https://github.com/Monnoroch/ColorHighlighter
![colorhighlighter.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/9d04336c-6f97-816b-47a4-37f18ca14de3.png)

## ConvertToUTF8
### Shift-JISファイルも文字化けしない
複数の環境やチームでコーディングをしている時などにファイルの文字コードが違っていて，日本語が文字化けしてしまうことがあります。
それを防いでくれるプラグインです。
https://github.com/seanliang/ConvertToUTF8

## IMESupport
### 日本語入力を行内で
Sublime Textで日本語入力をしようとすると，行内ではなく別の場所に表示され，Enterで確定すると行内に表示される，というような挙動をします。
それを解決してくれるプラグインです。
https://github.com/chikatoike/IMESupport
![IMEsupport.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/c702d571-2439-abdf-8529-defdaca1c5f4.png)

## SideBarEnhancements
### サイドバーでの右クリックメニューを強化
プロジェクトをフォルダ単位で表示したいときに重宝するサイドバーの右クリックメニューを増やします。
ファイルのリネームや新規作成もサイドバーからできるようになります。
https://github.com/titoBouzout/SideBarEnhancements
![sidebar.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/94df7da8-9767-2200-e8de-8cd1eaf2ad50.png)

## SublimeCodeIntel
### 関数の補完やジャンプ
自分で定義した関数を入力補完してくれたり，ショートカットキーでその関数へジャンプできます。
Ctrl + F3またはAltを押しながらクリックでカーソルがジャンプします。
https://github.com/SublimeCodeIntel/SublimeCodeIntel
![script.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/9237ecf9-129f-60b8-715f-c5aec69b605a.png)

## TralingSpaces
### 全角スペースをハイライト表示
日本語が入るファイルを扱っていると，必ず一度はやってしまうのが，全角スペースによるエラーです。
これを未然に防ぐために，僕は必ず全角スペースをハイライト表示させています。
https://github.com/SublimeText/TrailingSpaces
インストールしたら，「基本設定」→「Package Setting」→「Trailing Spaces」→「Settings - User」を開きます。
そこに下記をコピー&ペーストします。

```
{
    "trailing_spaces_regexp": "　|[ \t]+",
    "trailing_spaces_highlight_color": "invalid",
}
```
すると全角スペースがピンク色でハイライトされました。
行末の不要と思われる半角スペースもハイライトしてくれます。
![highlight.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/acb33d39-f58b-88ff-7d80-b92cc0f6ba00.png)

# カラースキーマ・テーマ・アイコン
## molokai・Cobalt2
僕はカラースキーマはmolokaiを愛用しています。
変更は「基本設定」→「カラースキーマ」から行えます。
また，テーマはサイドバーのアイコンをわかりやすくしたかったので，「Cobalt2」にしてみました。
テーマもプラグインと同じようにインストールできます。
インストールしたら，「基本設定」→「基本設定 - ユーザ」を開いて，下記を追記します。

```json
{
	"color_scheme": "Packages/User/Color Highlighter/themes/Monokai.tmTheme",
	"theme": "Cobalt2.sublime-theme",
}
```
![theme.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/ce107e11-1c69-904f-bb7b-90af0643f688.png)
すると，サイドバーのアイコンがカラーに，ファイル種類ごとに変わります。
![icon.PNG](https://qiita-image-store.s3.amazonaws.com/0/131949/5f67372d-d8ce-cacf-49f1-bd587a785083.png)

https://github.com/wesbos/cobalt2

## 個人設定
ちなみに，僕のSublime Textの個人設定はこのようになっています。

```json
{
	"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
	"default_encoding": "UTF-8",
	"default_line_ending": "unix",
	"fallback_encoding": "UTF-8",
	"font_face": "Consolas",
	"font_size": 14,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_padding_top": 2,
	"show_encoding": true,
	"theme": "Cobalt2.sublime-theme",
	"translate_tabs_to_spaces": false,
	"word_wrap": false
}
	
"ignored_packages":
	[
		"Vintage"
	],
	//追記部分
	"color_scheme": "Packages/User/Color Highlighter/themes/Monokai.tmTheme",
	"theme": "Cobalt2.sublime-theme",

	"default_encoding": "UTF-8",		//デフォルトエンコーディング
	"default_line_ending": "unix",		//デフォルト改行コード
	"fallback_encoding": "UTF-8",		//文字コードが不明なファイルを開くとUTF-8で開かれる
	"font_face": "Consolas",			//フォント
	"font_size": 10,					//フォントサイズ
	"line_padding_top": 2,				//行の上下の余白
	"show_encoding": true,				//エンコーディングを表示
	"translate_tabs_to_spaces": false,	//Tabキーを押した際にスペースにならない
	"word_wrap": false					//ウィンドウの端で改行しない
}
```

# まとめ
## カスタマイズしてこそSublime Text
Sublime Textは本当にたくさんのプラグインがあります。
自分の目的に合わせてカスタマイズしてこそ，「最強になれる」エディタではないかなと，僕は思います。
今回紹介した他にもプラグインやテーマなどはたくさんありますので，ぜひ自分だけの最強エディタを作ってください。

## 参考
<a href="https://qiita.com/lunatea/items/53f4adcc6ea3f316e781">Sublime Text 3のインストールと初期設定</a>
<a href="https://qiita.com/maccotsan/items/f320036e19f8d3b798c1">SublimeTextの教科書で紹介されてるプラグインまとめ</a>