とりあえずコレは入れとけ!Sublime Text 3のパッケージ

こんにちは、石井です。

今回はSublime Text 3を使い始めるときに「とりあえずこれは入れとけ」と言えるパッケージをご紹介します。

「最初から大量に入れすぎると各パッケージの役割がわからなくなる」という考えから、様々なサイトを巡って僕が吟味したものたちです。

これらだけ入れておけば、通称「恋するエディタ」Sublime Textに恋できます。たぶん。

おすすめパッケージ一覧

Package Control

パッケージの管理とかがすごく楽になる必需品。とりあえず入れとけコンテストがあったら間違いなく1位。

SASS, SASS Build, SCSS, Compass

これらを導入することでSublime TextからショートカットキーでSASSをコンパイルすることができるようになります。大変便利!

IMESupport

Sublime Textでは日本語入力時に入力欄が別ウィンドウで表示されてしまいますが、それを通常のインライン表示に変えてくれます。背景が白いのは気になるけど笑

ConvertToUTF8, Codecs33

この2つのパッケージをインストールすることでShift_JIS(シフトジス、コンピューター上で日本語を含む文字列を表現するときに使われる文字コード)で書かれたファイルの文字化けを防いでくれます。(正確にはShift_JISからUTF-8に変換している)

しかし、Codecs33はPackage Controlからインストールできません。

なので、こちらのページのClone or Downloadボタンを押してZIPファイルをダウンロードし、解凍したファイル「Codecs33-osx」の名前を「Codecs33」に変換して上で、Sublime TextのPreferences->Browse packagesを押して開かれるフォルダに入れてあげてください。

SideBarEnhancements

サイドバーの右クリックメニューで出来ることが増えます。パスをコピーしたり複製なんかもできるのでフォルダを開く手間も省けますね!

All Autocomplete

自作の定数や関数を補完して入力予測してくれるようになります。

AutoFileName

htmlでimgのsrcを設定するときにフォルダ内のファイルを入力予測してくれるようになります。他にもwidthやheightを自動挿入してくれたり。おかげで画像まわりのコーディングがかなり楽になりました。

BracketHighlighter

タグや括弧の始まりと終わりをわかりやすく表示してくれます。初歩的なミスが減るかと。

Color Highlighter

cssで色を指定している部分に、実際に表示される色を表示してくれます。覚えることを減らすのは大事ですね。

Goto-CSS-Declaration

htmlのclassやIDにカーソルを合わせてショートカットキーを押すと、それらを定義しているcssファイルの場所までジャンプしてくれます!素敵!ただ、定義しているCSSファイルが開かれていないといけません。

wpseek.com WordPress Developer Assistant

WordPressを使用している人専用。WordPressの独自関数などが補完されて入力予測してくれるようになります。

終わりに

こんな感じでしょうか?

まぁ、究極的には、万人に当てはまるマストなパッケージなんてないので参考程度に。

使ってていらないなと思ったら消していきまーす。

それでは、ありがとうございました!