Bracketsのおすすめエクステンション

2016年4月24日

本日は、無料のコードエディタであるBracketsのおすすめエクステンションを紹介していきたいと思います。Bracketsは、もともとはAdobeによりプロジェクトが設立されて、オープンソースのプロジェクトとして、多くの方がその発展に貢献をしています。

このBracketsの魅力は、なんといってもカスタマイズ性です。Bracketsの場合には、エクステンションと呼ばれる拡張機能があり、それを自由にインストールして、自分のコードエディタを自分の使いやすいように設定しておくことができるのです。

今回は、特にフロントエンドの開発をしていく上で、Bracketsに入れておいたほうが良いおすすめのエクステンションを紹介していきたいと思います。

Shizimily Multiencoding for Brackets

BracketsはUTF-8のみに対応しているので、日本語でよく使用されるShift_JISやECU-JPなどのエンコーディングのファイルに対応させるためのエクステンションです。まずは、これを入れておくことをおすすめします。

Brackets Outline List

ドキュメントのアウトライン構造を表示してくれます。HTMLを長く書いていくと、複雑な入れ子構造になっていくことがありますよね。その時に、HTMLドキュメント全体のアウトラインが左のサイドバーに表示されますので、全体構造を確認しておきたい時に便利です。またCSSについても同様にセレクタの記述順にアウトラインを表示してくれます。

Show Whitespace

半角スペースやタブなどを表示することができます。コードを書く上で、インデントとして半角スペースとタブが混在すると、別のエディタで表示した際などにコードが見づらくなることがあります。スペースも視覚的に見えていると、半角スペースなのかタブなのか明示的に分かり便利です。

Paste and Indent

他のドキュメントからコードをコピー&ペーストときに、自動的にドキュメントの構造に合わせて、インデントを調整してくれます。コードを書くときにインデントがズレると一気にコードが見づらくなってしまうので、このエクステンションは重宝しますね。

HTML Block Selector

HTMLの開始タグか終了タグのどちらかを選択している状態で、Ctrl+Shift+Tで、そのタグ全体を選択することができます。

Brackets Css Color Preview

CSSで色を指定している行の左側に、実際に適応される色を表示してくれます。ぱっと見で色の設定状況がわかるのが助かりますね。

colorHints

色の指定をする際に、「#」を入力した段階で、そのファイル内で使用済みの色をヒントとして表示してくれます。Webサイトでは、同じ色をいくつかのセレクターに設定することが多いので、このヒントは有用性があります。Brackets Css Color Previewとも併用するとCSSでの色の設定は分かりやすいですね。