Bootstrap を使った HTML/CSS コーディングがはかどる Sublime Text パッケージ
こんにちは。
マイクロソフトの渡辺です。
久しぶりに Bootstrap を使って HTML/CSS を書く機会があったので、改めて便利だと感じた Sublime Text のパッケージを 3つご紹介します。
Sublime Text へのパッケージ追加方法は下記記事をご覧ください。
Sublime Text をインストールする - Yuta Watanabe's Blog
Bootstrap を使った HTML/CSS コーディングがはかどる Sublime Text パッケージ
Bootstrap 3 Snippets
bs3- で始まるスニペットで Bootstrap 3 のコードをサクサク書いていけます。
例えば、bs3-col:6 + "tabキー" で下記のコードが挿入されます。
Bootstrap 3 Snippets: bs3-col:6
公式ページにスニペット一覧が掲載されていますので、よく書くコードから活用していきましょう。
Loremlsum
ダミーのテキストをボリュームを指定して挿入できます。
ショートカットキーは "Alt+Command+l" ( WIndows の場合は Control+Alt+l )。数字を入力してからショートカットを呼び出すと行数が指定できます。
HTMLBeautify
先の２つのパッケージ、Bootstrap 3 Snippets と Loremlsum を使い倒していると、インデントがずれたり無駄な改行が入ってしまったりしてきます。そんなときは、この HTMLBeautify を使いましょう。
HTML のソースコードをきれいに整形してくれます。呼び出し方は "Command+Option+Shift+F" ( Windows の場合は、Cntrol+Alt+Shift+F )。自分はメニューバーから Edit->Beautify HTML で呼び出しています。
このあとは
Sublime Text で活用できるパッケージは、今回ご紹介した物以外にもたくさんあります！ぜひ、自分の仕事を効率化してくれるパッケージを探してみてください。
