Bracketsプラグイン

Adobe Systemsが開発するソースコードエディタ「Brackets」は、「プラグイン」と呼ばれる拡張機能を追加することで、使いやすく、便利にカスタマイズしていくことが可能です。

プラグインの数は無数にありますが、すべて入れてしまうとエラーの危険性が出てしまったり、そもそも軽快に動作させたいはずのエディタ自体が重くなってしまいますので、いくつか厳選した授業で使用するプラグインを紹介します。

Autoprefixer

CSSにベンダープレフィックス（-webkitなど）を自動付与。

Beautify

ソースコードを自動整形。

Brackets CSS Class Code hint

idやclassの入力候補を表示。

Brackets SASS

SASSで書いたコードを保存時自動的にCSSに変換。

Brackets SASS Code Hintes

SASSのコードの補完追加

Color Highlighter

CSSで色の値を色指定した時に、コード上でその色をハイライト表示。

colorHints

一度使用したことのある色をリストアップ。

Emmet

HTMLやCSSを省略記法で簡単に記述。

Indent Guides

インデントの位置にガイドを表示。

Overscroll

 ファイルの最終行より更に下までスクロール

Paste and Indent

ペーストしたコードを、自動的に正しくインデント

SASS/SCSS Hints

変数やmixinの名前などSASS特有のコードヒントを表示

SASSHints

変数の補完

Select Lines

行番号をクリックして行選択

W3C Validation(by Umoxfo)

htmlとcssの文法チェック

Whitespace Normalizer

ファイル保存時に、不要なインデントを削除

全角空白・スペース・タブ表示

全角空有白・タブ・スペースを可視化