Sublime Text 3（サブライムテキスト）は、とても軽量で動作が早く僕自身もとても愛用しているテキストエディタです。今回は、そんなSublime Text 3をさらに使いやすく高機能にしていくためのプラグインを紹介・導入解説していく記事です。
【前提条件】
・Sublime Text 3をインストール済み
まだの方は、下記リンクからインストールしましょう。
カスタマイズの準備
まずは、Sublime Text 3にプラグインをインストールできるようにするために、Package Controlというパッケージをインストールしていきます。
- 上記のリンクを開き、[Sublime Text3]タブ内のコード（スクリプト）を全てコピー
- Sublime text 3を起動し、上メニュの[View] → [Show Console]でコンソールを表示させる
- 画面下に表示されたコンソールに 1.でコピーしたコード（スクリプト）をペーストして[Enter]
- コンソールの処理が終了したらインストール完了です
※ 下に[ = ]イコールのようなマークが揺れ動いているのは、インストール中を意味しています。
プラグインインストールの流れ
プラグインを紹介していく前に、インストールの流れを確認しておきます。
- [Tool] → [Commond Palette] でコマンドパレットを出す
※ キーでのコマンドパレットの出し方
Windows：[Ctrl + Shift + P]
Mac：[Commond + Shift + P]
- コマンドパレットの検索欄が表示されたら”Package Control: Install Package”を検索
[Package Control: Install Package]を選択し実行すると、また別の検索欄が表示される。
※ プラグイン削除したい場合は、[Package Control: Remove Package]
- 新しい検索欄に表示が切り替わったら、プラグインを検索しインストールしていく
これでカスタマイズの準備はできたので、これから紹介していくプラグインの名前を検索欄で探して、インストールしていっきましょう。
おすすめプラグイン
Emmet
Emmetは、コーディングの速度・正確性を大幅にあげてくれる神プラグイン。神プラグインたる所以は「たった数文字で」ものすごい量のコードが書けちゃうところ。コーディングすることが多い方は、絶対入れましょう。
実例で紹介していきます。
htmlショートコード
.test ←これを展開すると <div class="test"></div>
.test*3 ←これを展開すると <div class="test"></div> <div class="test"></div> <div class="test"></div>
.test>ul>li →これを展開すると
<div class="test">
<ul>
<li></li>
</ul>
</div>
.test>ul>li*3 →これを展開すると <div class="test"> <ul> <li></li> <li></li> <li></li> </ul> </div>
.test>ul>li.sample$$*3 ←これを展開すると <div class="test"> <ul> <li class="sample01"></li> <li class="sample02"></li> <li class="sample03"></li> </ul> </div>
続いてCSS
cssショートコード
w →展開すると width: ; w300 →展開すると width: 300px; w100p →展開すると width: 100%; wa →展開すると width: auto; h →展開すると height: ; ha →展開すると height: auto;
これは、未来ですね。
他にも沢山の応用があるので調べて見てください。
All Autocomplete
このパッケージは「HTMLやCSSなどのコード補完」をしてくれるパッケージです。時間短縮やミスの軽減にもつながります。シンプルですが、必要不可欠なプラグインです。
GitGutter
現在のコードとgitのHEADとの追加や変更の差分を、コード行数の左へ記号で表示してくれます。
機能の方はPluginの説明ページに画像がありますので、理解しやすいと思います。
https://sublime.wbond.net/packages/GitGutter
Material Theme
「Material Theme」とは、Sublime Textのデザインテーマのプラグインです。GoogleのMaterial Designを採用しており、シンプルかつ見やすく、洗練されたデザインになっています。
デフォルトのSublime Textとは違うエディタだと思う程、見た目が美しくなるので、モチベーションが上がります。（これすごく大事！）
【テーマ設定の仕方（インストール後）】
- [Tool] → [Commond Palette] でコマンドパレットを起動
- Preferences: Settingを検索し実行
※ ショートカットキーcommand+,で上記の1. 2.と同じ設定を開くことができます。
- 2つの設定ファイルが表示されるので、Preferences.sublime-setting–Userの方にテーマのコードを追記する
※ テーマのコードを追記して保存すると上のようなテーマに切り替わります。
//Default Theme（上の画像と同じテーマ）
//Preferences.sublime-settings---User
{
"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}
//Darker Theme（黒テーマ）
//Preferences.sublime-settings---User
{
"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme"
}
//Lighter Theme（白テーマ）
//Preferences.sublime-settings---User
{
"theme": "Material-Theme-Lighter.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Lighter.tmTheme"
}
今後、よいプラグインがあったら、こちらの記事に追記していきたいと思います。
