エンジニア御用達！SublimeTextパッケージ活用術10選

エンジニアおすすめのSublimeTextパッケージ

それではさっそくエンジニアおすすめのSublimeTextパッケージをご紹介していきましょう。今回は特にどんなシーンでも役立つベースパッケージとweb制作などのフロントエンド製作時に役立つパッケージに分けてご紹介していきますね！

どんなシーンでも役立つ優良パッケージ

複雑になったショートカットキーを一発確認 ~BoundKeys~

パッケージはとても便利なもの。でもそんなパッケージを入れすぎてキーボードショートカットがよくわからなくなってしまった…という悲しい結末を回避するのに有効なのが、こちらのBoundKeys。

これを導入しておけば、今有効になっているキーボードショートカットが一覧で確認できます。パッケージの力を120%活用する為にも、入れておきたいパッケージです。使い方はコマンドパレットから「List bound keys」を呼び出すか、「↑」＋「F10」を押下。

インデントの付いた行をサクッと削除 ~Smart Delete~

インデントのついた行の削除って鬱陶しくないですか？Smart Deleteはそんなインデント付き行を一発で削除してくれる爽快パッケージ！使い方は簡単、行末にカーソルを当ててfn+delete (windowsの場合はdelete)を押すだけ。deleteボタンを連打していたあのイライラをサクッと解消してくれちゃう、デキる子なんです。

インデントの簡単整理に ~Alignment~

「＝」を綺麗に揃えてくれるAlignmentは開発にとても便利なパッケージ。使い方はちょっとわかりにくいので詳しく解説しますね。まずcommandを押しながら整列させたい箇所をクリックして複数選択します。そして「command+control+A」と入力。こうすると一発でインデントが揃ってとても爽快な気分に！ちなみに「＝」以外でも整列を効かせたい場合はこのようにどうぞ。 １．ユーザー用の設定ファイルを開く （Preferences>Package Settings>Alignment>Settings-Use） ２．「”alignment_chars”: [“=”],」を「”alignment_chars”: [“=”,”:”],」と書き換え この状態だと「：」にも反応してくれるようになります。

安心の自動バックアップ ~Local History~

編集中のファイルが不慮の事故で消えてしまったり誤って削除してしまった後の虚無感は、言いようのないもの。暫くモニターの前に戻るのが嫌になりますね。そんな悲しい事故が起こる前に防衛策として入れておきたいのが、Local History。ローカルにバックアップを取ってくれたり、差分比較などができるとってもデキる子なのです。使い方はコマンドパレット>Local Historyか右クリック>Local Historyから操作をどうぞ。ユーザー用の設定ファイル内では保存期間も設定できるので融通が効いていいですね。（保存期間を変更するには「”file_history_retention”:30」の数値部分を任意の日数に変更。あまり長く入れておくと容量がいっぱいになりやすいので注意。)

windowsユーザーのお守り ~ConvertToUTF8~

MacユーザーやLinuxユーザーにはあまり関係ないかもしれませんが、windowsで作業をしている人にはお守り的存在になるのがこちらのConvertToUTF8。sublimeTextではUTF-8以外に弱いのですが、これを入れておけばShift_JISなどUTF-8以外のファイルを自動的にUTF-8に変換してくれます。人から渡されたファイルを開く時など、もしShift_JISに出くわしてしまっても安心！

web製作時に効果を発揮する優良パッケージ

HTMLマークアップを驚く程スマートに ~Emmet~

先に言っておきます、これはスゴいです。今までちまちまタグを打っていたあの苦労は何だったのか、そんな気さえしてくるパッケージがこのEmmet。もはやSublimeText使いなら常備と言わんばかりの人気パッケージで、HTMLマークアップが飛躍的に便利に！例えばulタグを打つのってめんどくさいですよね。同じような文章をコピペ、コピペ、コピペ…それが一発で出来るという神仕様！

１．「ul>li.menu-$$*4>a{メニュー$$}」と入力して入力した範囲を選択

２．「control」+「E」を押下

たったこれだけで面倒なulタグの入力が完了です。もちろん他のタグも簡単入力できますし、CSSも対応！「bg#0」と入力して変換すれば「background:#000;」となり、予測変換機能よりもスマートにコーディングが出来ます。ちょっと面倒なのは独自の書き方を覚えないといけない事。しかし慣れれば飛躍的にコーディングが早くなるので、覚える苦労は簡単に我慢できるかもしれません。

便利なリアルタイム構文チェック機能 ~SublimeLinter~

こちらも便利すぎて非常に有名なパッケージなのでご紹介しますね！SublimeLinterはリアルタイムで構文チェックをしてくれるとても便利なパッケージ。ただし、これだけでは動かないのでPHP用やHTML用のLinterも別途インストールする必要があります。HTML5をリアルタイムで構文チェックしたいなら「HTML-tidy」の導入が必要。併せて導入してくださいね。

・HTML5のリアルタイム構文チェック

※HTML-tidyはsublimeからのパッケージ導入だけでは不十分です。mac向けですがこちらで詳しく導入方法が紹介されているので、参考にどうぞ。

ショートカットキーで簡単リロード ~View In Browser~

HTMLやCSSで編集作業をして、ブラウザに移動してリロードして…っていう一連の作業、めんどくさくないですか？私はめちゃくちゃ面倒で嫌いなのですが、そんな面倒な作業を軽減してくれるのがこのView In Browser！このパッケージを入れておくと、「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれます。ユーザー用の設定ファイルの「”browser”:“chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動させるのができる点も特筆ポイントですね。

目的のclassやidに一発ジャンプ ~Goto-CSS-Declaration~

HTML側でid名やclass名を探してCSS側でcommand+fで検索して…という一連の作業、これが面倒で嫌いな人には絶対におすすめのパッケージがこちらのGoto-CSS-Declaration！このパッケージを導入しておき、HTML側のid名やclass名にカーソルを当てます。そして「command」+「→」を押下すると、CSSの定義箇所に一発ジャンプ！もう目グレップや検索コマンドを何度もカチカチする必要はありません。快適なコーディングライフには欠かせないパッケージです。

深いネストも一安心 ~Bracket Highlighter~

ネストが深くなったりしてソースコードが複雑になってくると、この終了タグはどこだっけ、このifの終了部分はどの括弧だっけ、という事がちまちま出てきます。そのたびに対応する部分を探すのはそれだけで神経を消耗してしまう作業。そんな余計な手間を省いてくれるのがこちらのBracket Highlighter。HTMLなら開始タグと終了タグに白い枠線がついてセットになっている事がわかりやすくなったり、プログラムでは開始括弧と終了括弧の下にアンダーラインがついて処理の纏まりが把握しやすくなります。

・HTML（白い枠で囲ってくれます） ・php（開始と終了括弧にアンダーラインを出してくれます）

まとめ

さて、今回はエンジニアがおすすめするsublimeTextパッケージをご紹介しましたが、いかがでしたでしょうか？不便さを何とかしようという精神から生まれたパッケージは同じ不便さを感じた側からしてみれば、まさに痒いところに手が届く素晴らしい仕様。今回は人気かつ便利なパッケージをご紹介しましたが、あまり知られていなくても便利なものやディープな機能に特化したパッケージもたくさんあります。もし「不便だな」と感じたら、解決できそうなパッケージがないか探してみてくださいね！