コーディング速度を爆速効率化！「Brackets（ブラケッツ）」の拡張機能5選

「Brackets（ブラケッツ）」は、そのまま使っても心地よいコーディングができる素晴らしいエディタツールですが、実際のお仕事で使う際はもう少し効率よくコーディングを進めたいですよね。

そこで今回は、コーディング速度を上げるために必要な「Brackets」の拡張機能を5つご紹介していきます。今以上にもっと時短効率を上げてコーディングをしたいという方は、ぜひ使ってみてください。

スマートなコーディングのお供に!自由にカスタマイズができるエディタツール「Brackets」

Bracketsは、PhotoshopやIllustratorといったデザイン系のソフトをリリースしたAdobe社が提供している無料のエディタツールです。エディタツールとして名高いSublime TextやVisual Studio Codeと並んで愛用者が多く、エディタツールには珍しく日本語にも対応しています。

そのためプログラミング初学者はもちろん、プロの方まで幅広く利用されています。

ストレスフリーなコーディングを実現！エディタツールの拡張機能ってどんなことができるの？

そんなBracketsは、HTMLやCSS、Javascriptといった言語で構成されており、エディタツールそのもののカスタマイズも容易だとか。

事実、有志による拡張機能も多数リリースされており、エディタ画面の色替えや基本コードの簡略・圧縮化など、使い方次第でかゆいところにまで手が届くツールとして機能します。

そのため効率的に多数のプロジェクトをこなしたい時に役立ちます。

コーディングの作業を効率化する!Bracketsの拡張機能5選

では実際にどういった拡張機能が存在するのでしょうか。ここではBracketsで代表的な拡張機能を5つご紹介していきます。

1.Autoprefixer

まずご紹介するのは、ベンダープレフィックスを自動付与する拡張機能です。ちなみにベンダープレフィックスとは、CSS3がまだ一般化されていないブラウザで独自の機能を動作させるために付ける接頭辞のこと。

CSS3が普及しつつある今、多用する機会も年々減りつつはあるものの、未だ対応しきれていないものも少なからずあるので、導入しておくといいでしょう。

2.Beautify

コードとひたすらに向き合っていると、知らぬ間に開始タグと終了タグの位置がずれて、あとでコードを見返すときに見づらくなっていたなんてことはありませんか。

そんな時に役立つのが、コードを自動で整形してくれる「Beautify」です。これを使うことで、絶え間なく綴られるコードの開始タグと終了タグの位置を揃え、コードをキレイに記述することができます。

おもに複数人でコードを書くときや第三者のコードを引き継いで作業するときなど、クセのあるコーディングを見直す際に活躍します。

3.Indent Guides

また「Beautify」と関連して、単純にコードをキレイに書きたいというのであれば、「Indent Guides」でインデント位置に気をつかってみるのもいいでしょう。タグの入れ子構造を理解しやすいようインデントのガイド線を表示してくれるので、見やすくコーディングができますよ。

4.Emmet

0からモノを作るとき、同じコードを何度も書いていると少し時間がもったいないですよね。

そんな時は「Emmet」の独自記法で、HTMLやCSSのコーディングを効率化してみましょう。使い方次第でタグの展開後の内容も操作できるので、早くコーディング作業を済ましたいのであれば、設定しておいて損はありません。

5.W3CValidation

最後にご紹介するのは、記述したHTML文法に間違いがないかを検証してくれる拡張機能です。これを使うことで、どこのコードに間違った記述があるのかを瞬時に確認することができます。

そのため文法の単純なケアレスミスを防ぐのに役立ちます。

おわりに

今回は、エディタツール「Brackets」の拡張機能を5つご紹介しました。ただでさえ無料で使えるエディタツールだというのに、さらに自分なりに使いやすく自由に機能をカスタマイズできるとなれば、もう使わない理由がないですよね。

メモ帳やサクラエディタなどを使って「0からタイピングするのはそろそろキツイかも…」という方は、これを機にぜひ次のエディタツールとして「Brackets」を検討してみてはいかがでしょうか。

（執筆：黒川シュン）