PackageControllを使ってみよう

Sublime Text 3は、基本的には他のテキストエディタと使い方は同じなので、起動したらすぐに使うことができるでしょう。
しかし、Sublime Text 3が他のテキストエディタと違う点の一つは、PackageControllと呼ばれるプラグイン機能が利用できるところです。

PackageControllを導入することで、PHPやJavaScript、Pythonなどの構文を自動でチェックしてくれたり、自動補完やハイライトを行ったりすることができます。

ここでは例として、ブラケット(かっこ)の開始と終了を強調してくれる「BracketHighlighter」をダウンロードしてみましょう。

6.png
スクリーンショット:2017年9月

まず、メニューバーのPreferencesからPackageControllを開くか、Ctrl+Shilt+Pで直接PackageControllを開きます。
(メニューに出てこない場合には、その前にToolsPackageControllをクリックしてPackageControll自体をインストールしてみてください)

7.png
スクリーンショット:2017年9月

次に、表示されたコマンドラインに*「Install Package」*を入力します。

8.png
スクリーンショット:2017年9月

ロード後表示されるコマンドラインにPackageControll名を入力します。
ここでは*「BracketHighlighter」*を入力します。

9.png
スクリーンショット:2017年9月

無事にインストールできたら、このように補足説明が記されたファイルが表示されます。

おすすめPackageControll ベスト5

ここでは、Sublime Text 3に入れておきたい、オススメのプラグインの名前と簡単な概要を紹介していきます。
気に入ったものがあったらぜひ入れてみてください。

1. Japanize

Japanizeは、その名の通りSublime Text 3を日本語化してくれるパッケージです。
全てのメニューが日本語化されるわけではありませんが、よく使うメニューはほとんど日本語化されるので、ぜひインストールしてみましょう。

2. AlignTab

AlignTabを適用すると、コードを見やすく整列してくれます。
CSSを入力する際にコロン(:)を中心に整列したいといったときに活躍します。

使い方は簡単で、整列したい場所にカーソルを合わせて右クリックし、Align Byを選択します。

aligntab.gif
スクリーンショット:2017年9月

すると、このようにコロンを中心に揃えることができました。

3. All Autocomplete

allautocomplete.gif
スクリーンショット:2017年9月

All AutocompleteHTMLCSSなどのコードを補完してくれるパッケージです。
長いコードを入力する際に、以下のように必要なプロパティも含めながらコードを生成してくれて、手打ち入力とくらべてはるかにミスを減らすことにもつながります。

4. Markdown Extended

markdownextend.png
スクリーンショット:2017年9月

Markdown Extendedは、Markdownをシンタックスハイライトするパッケージです。
太字やリンクなどを、見やすく色分けしてくれます。

5. Emmet

emmet.gif
スクリーンショット:2017年9月

Emmetは、コーディングを圧倒的に速くするための入力補助プラグインです。
スニペットを記述して、Ctrl+Eで展開するという操作で、まとまったコードを一気に記述することができます。

Webデザイナーの中には、もはやこれなしでは仕事ができない、と言われるほどに便利なプラグインです。