Sublime Textの作業効率を飛躍的に上げるプラグイン31個

こんにちは、湘南生まれデトロイト育ちのきんぐです。
入社してから1年半ほどWebマーケターをやった後、気付いたらエンジニアになってました。

そんなこんなで異動してから9ヶ月が経ち、合コン等で
Q.「お仕事は何されてるんですか？」
A．「うぇ・・うぇぶえんじにあです。ほーむぺーじの運営してます。」 くらいは言えるようになったので、

本日は僕の相棒とも呼べる Sublime Text 2(3)のオススメプラグインを紹介したいと思います。
（そんな技術的なこと書いても、ね。）

私はSublime Text 2を使っていますが、これから導入する方はせっかくなので3使いましょう。
（当時2にあって3にはないプラグインがあった為未だに乗り換えてません）

※Sublime Textのインストール方法などは端折りますので、知りたい方は各自ggってくださいませ。
　
　

■絶対入れるよねプラグイン

●All Autocomplete

SublimeTextはデフォルトで自動補完機能がついてますが、その機能を強化してくれます。 マッチする文字列があればサジェストしてくれるんで入れといて損なし。

●Alignment

選択範囲をまとめて修正出来るので、選択した単語と同じ単語を選択出来るコマンドcommand ＋ Dと組み合わせて使うと効率的！ コードをまとめて綺麗にしたい場合は特にオススメ。

(動画埋め込みたいのにできないので参考リンクで勘弁）
Alignmentの参考動画

●ConvertToUTF8

文字エンコードをUTF8に変換し、セーブした時にまた戻してくれる良プラグイン。 sublime textはshift-jisに対応してないのでeuc-jpとかsjisとかプロジェクトによって文字コード違ったりする時に いちいち気にしないで良くなります。 また、新規ファイル作成時のエンコード設定も出来るので楽になりますね！

※注意点としては、ファイル開いて、文字コード変わった後に 「あ、このファイル修正しないでよかったやつだ。command ＋ zとかで戻る戻る！！！」とかやって変換される前の状態でセーブすると文字化けしたまま保存されます。

使う場合は注意してくださいね！

●RecentActiveFiles

名前通り、最近開いたファイルをリスト表示してくれるので、消した後にもう一回開きたい時等にオススメ。

●AutoFileName

ファイル名を自動的に補完してくれます。

●Sublime Files

はやい。コマンドラインでファイル探してるみたい。候補も出てきますし、オススメ。

●BracketHighlighter

タグやクォーテーションの開始/終了をハイライトしてくれます。

●CTags

これ入れてから凄い重くなったのでアンインストールしちゃいましたが、色々設定すれば素晴らしいプラグインかなと。 コードジャンプできるってやつです。

●SublimeCodeIntel(重いのが難点）

宣言へのジャンプや、強力なコード補完してくれます。 ただ、めっちゃ重いです。そこが難点。重いのは致命的なので使ってみて微妙だったらって感じですね。

●SublimeLinter

構文エラーをリアルタイムでチェックしてくれる凄いやつ。
Sublime Text 2だと重かったんですが、3だと進化してるらしいです！
詳しくはLIGさんのブログに。

●TrailingSpaces

末尾にスペースが入っている時にハイライトしてくれ、保存する時に削除してくれます。
地味だけど、オススメ。

※調べたところ、全角スペースにもハイライト表示適用できるみたいです。
以下手順

1.基本設定→Package Settings→TrailingSpaces→Settings – User

2.下記のコードを追記

　
ちなみに、僕がやってる全角スペースハイライトの方法
TrailingSpacesで対応出来るなら絶対そっちの方がいいんですが、一応僕がやった方法も記載しておきます。

1.メニューバー→Preferences→Browse PackagesでPackagesフォルダを開く

2. AlwaysHighlight 上記ダウンロード、解凍。

3.AlwaysHighlightのフォルダをPackagesフォルダに入れる

4.メニューバー→Preferences→Setting – Userを開き、下記のコードを追加

僕みたいな初心者は全角スペース入れっぱなしで保存したりしちゃうんですよ。。 コード書き始めた時に一度全角スペース問題に嵌って以来、ちゃんと設定してますｗ

●LiveReload

ファイルを保存すると、ブラウザで自動更新してくれるプラグイン。
各ブラウザのエクステンションのインストールも同時に必要ですが、２画面で作業している場合時にいちいち開いてブラウザ更新しなくて良くなります。 　
　

■マークアップするならこれ

●Emmet

コーディングのタイピングを劇的に減らしてくれる素晴らしいプラグイン。

Emmet用チートシートはこちら（使いこなせたら相当早い）

●Hayaku

oh と打ってtabを打つだけで overflow: hidden; が展開されるようなコーダー向けプラグイン。 Emmetと似てますが、両方使いこなせたら爆速でコーディング出来ると思います。

●Sass

定番ですね。業務ではまだ使ってないんですがあまりにも良いので今後取り入れていこうと思ってます。 ぶっちゃけSublime使えば他のソフト使う必要ないし、プラグイン揃ってるし、自動コンパイルもできるしでほんと素晴らしい。

●Compass

Sass x Compass。楽をしたい方はこちら。

●Sass Snippets

関数などのスニペット。

●Sass Build

Sassのコンパイルするならこれ。Compassでコンパイルするなら必要ない。

●SassBeautify

Sassのコードを綺麗にしてくれます。

●BlessCss

Sassってるとセレクタ4095個超えることがあります。そんなときはこれ。

●List stylesheet variables

SassとかLess使ってると、どの変数に何使ってるとか忘れますよね、多分。 定義した変数を一覧で表示、呼び出ししてくれるのでとっても便利。 　
　

■Git使いならこれ

●Git

GitをSublimeのみで扱うことができるように。 ターミナルに戻るのすら面倒くさい人にオススメです。

●GitGutter

GitDiffを視覚化してくれるので見やすくなります。 　
　

その他オススメプラグイン

●Color Highlighter

CSS書いてる時とかに、選択した色でハイライトしてくれるのでわかりやすい。

●AutoFileName

タグやcssなどで、パスを入力する時に補完してくれます。

●DocBlockr

関数コメント？Function Referenceを自動記述してくれる嬉しいプラグイン。 使い方は、ただ関数の上で /**を記述した後にエンターするだけ。

　
エンターを押すと

　
後は説明を加えるだけ。
難点としては、グーグル日本語入力を使っていると Enter押すと入力内容が消えます。
これ、割りと真面目にで鬱陶しいです。
shiftを押しながらEnter押せば大丈夫なんですが、そんな面倒なことしたくない私みたいな人は
こちらを参考にしてください。
プラグインとしてはかなり優秀です。しょっちゅう使わせていただいてます。

●Autoprefixer

ベンダープレフィックスの調整できたり、ブラウザのバージョン指定が可能。

●CSS Comb

CSSのプロパティを調整できます。

●Keymaps

キーマップ検索してくれます。チートシート的な。

●FindKeyConflicts

プラグインを増やすとショートカットキーがバッティングすることがたまにあります。 衝突を避けるためにFindKeyConflictsで確認、修正大事。

●Dotfiles Syntax Highlighting

.bashrc, .gitconfig といったドットファイルのシンタックスハイライトをまとめたパッケージ。

　
　
　
以上、ちょっとだけ書いて終わろうと思ってたらこれも良いあれも良いで長くなってしまいました。
Sublime Textは軽いし拡張性高いしで素晴らしいですね。こんな初心者でも使いこなせますし。
今回私が紹介したプラグインの他にも便利なプラグインは沢山あると思います。オススメプラグインありましたら是非教えてください。