2013年に驚異的にコーディングが便利になったSublimeTextのプラグイン、おすすめベスト5！

いよいよ今年も師走となりましたね！

この時期は年間を振り返るエントリーが多くなる訳なのですが、今回は2013年にWEB企画の制作チームが使ってみて良かった、SublimeTextのプラグインをランキング形式でご紹介します！

（いわゆる定番プラグインは今回はランキングからは除外させていただきました）

第5位　Placehold.it Image Tag Generator

ダミー画像を簡単に挿入してくれるプラグインですね！わざわざダミー画像を作ってフォルダに入れて…なんて作業をしなくても良くなりますので、とっても便利。

placehold.itというダミー画像を挿入するサービスがあるのですが、それをそのままプラグインにして使いやすくしたというものです。

事前に設定を登録しておくことで、さらに簡単にダミー画像を挿入できるようになる機能は秀逸！

第4位　SCSS・Compass関連のプラグイン

・Sass
・SCSS
・SCSS Snipets

この３つのプラグインにはお世話になりました。2013年はコーダーの中でも一気にSCSSを使ったコーディングが普及したのではないでしょうか。もちろんWEB企画もしっかり便乗してコーディング作業環境が大幅に変わりました。

入れ子にしてCSSを書けたり、変数や計算ができるという機能は革命的でした。まだ一度も使ったことが無いという方は是非とも触ってみるべきだと思います。

↓導入方法はコチラのサイトが参考になります
コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編

第3位　ZenkakuSpacet

SublimeTextは基本的に日本人のことを考えていませんので、日本語入力のように不便な点がいくつもあるのですが。中でも一番コーディングする上で問題と成るのが全角スペースでも半角スペースでも半角スペースとして表示されてしまうという点！

うっかり半角スペースで書かないといけないところを全角スペースにしてしまい、何時間も悶絶したコーダーも多いのではないでしょうか。

しかし！このプラグインを入れることで、全角スペースをわかりやすくハイライトしてくれるので、悶絶する必要はもうありません。快適にコーディングできるようになるはずです。

（PackageControlからはインストールできませんので、コチラからダウンロードして下さい→http://a.good.cx/sublime/）

第2位　Hayaku

このプラグインは本当に便利！今までEmmetのみ使用してきましたが、「あれ？position: absolute;はどうやって書くんだっけ？」と暗記できていない部分でかなり苦労したのですが、HayakuとEmmetを共存させたことで、より直感的にCSSが書けるようになりました。

ちなみに「position: absolute;」をEmmetで書くと「pos:a」ですが、Hayakuで書くと「posa」です。うーんスマート！もはやこのプラグイン無しではCSS書きたくない、というレベルです。

（導入方法についての良い解説サイトが404になってしまっていたので、今度記事にしますね！）

第1位　EmmetLiveStyle

2013年の当初はSCSSを使用していたのですが、このプラグインが登場してからは、完全に乗り換えてしまいました！確かにSCSSはとんでもなく便利なんですが、中小企業のコーポレートサイトを作るような機会が多い制作会社では、圧倒的にEmmetLiveStyleのほうが便利！

機能としては、GoogleChromeのデベロッパーツールでCSSの値を変えると、SublimeTextで開いているCSSが書き換えられたり、その逆にSublimeTextで開いているCSSを書き換えると、GoogleChromeで開いているHTMLにリアルタイムでデザインが反映されたりします！！

「Ctrl+S→ブラウザ更新して確認」この作業がなくなるだけでどれだけのストレスが無くなるか、想像できますでしょうか。特に「position: relative;」で位置を調節するときなんかは鬼のような威力を発揮します。

導入は若干面倒ですし、ディスプレイは2画面あったほうが効果を体感しやすいという点はございますが、是非とも試してみて欲しいプラグインの一つです。

↓EmmetLiveStyleの導入方法はコチラ
【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。