Brackets

Adobeが提供している開発向けテキストエディタ。
テキストエディタとIDE（統合開発環境）の中間あたりの印象で、IDEほど高機能ではないがバランス良く高機能で軽快に動作します。
またエクステンション（拡張機能）により様々な機能追加も可能。

Bracketsのインストール

Brackets
Bracketsサイトから最新版をインストール

必須エクステンション

Shizimily Multiencoding for Brackets

Shift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させてくれる。

Emmet

Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートする。Emmetの主な特徴は、独自の省略記法によるコーディングの高速化。

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

Beautify

JavaScript、HTML、CSSを見やすいよう整形してくれる。minファイル等を復元・解析する際に重宝する。

Brackets Tools

これ1つでコーディングやプログラミングが便利になる様々な機能を追加することができる。

• ・空白行の削除
• ・改行の削除
• ・行頭の連番を削除
• ・重複行の削除
• ・単語リストを配列に変換
• ・単語リストをulリストに変換
• ・HTMLタグの消去
• ・先頭からX文字削除
• ・末尾からX文字削除
• ・単語を小文字化、ハイフン区切りに
• ・大文字に変換
• ・小文字に変換
• ・単語の1文字目を大文字に変換
• ・HTMLエンコード
• ・HTMLデコード
• ・URLエンコード
• ・URLデコード
• ・新規HTML5ファイルを開く
• ・同じ単語をハイライト

Extensions Rating

拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれる。

Highlight Multibyte Symbols

全角英数字・記号をハイライトする。

Custom Work

開いているファイルを上部にタブ表示してくれる。
ドラッグ&ドロップでタブを移動、左右のサイドバー開閉、分割表示設定、タブのソート、タブの一覧表示などもできる。

Brackets Outline List

ファイルの構造をアウトライン表示してくれる。
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様。

Brackets File Icons

ファイルツリーや他エクステンションで拡張したタブに拡張子ごとのアイコンを表示してくれる。

Brackets CSS Class Code hint

編集中のHTMLが読み込んでいるCSSのセレクタに書かれているclassとIDが、属性値の記述時にコードヒントとして出てくる。