Bracketsの便利機能たち(拡張機能編)

Bracketsのアレコレ①のつづき

Bracketsは自分好みにカスタマイズすることが可能です。
ここでは

• コーディングを簡単にしてくれる「Emmet」
• コードのインデントをきれいに整えてくれる「Beautify」

の二つを紹介しておきます。 個人的にこの二つはマストです。

拡張機能の追加方法

レゴブロックみたいなアイコンが右サイドバーにありますのでクリック

入手可能タブが開かれた状態で検索窓に使いたい拡張機能の名前を打ち込んでみましょう
間違えずに打ち込めたら表示されるはずなのでインストールをクリック
インストールが終わったら「閉じる」ボタンを押して閉じると使えるようになります

下のgifではインストール済みになっていますので、できませんがインストールをクリックしましょう

Emmet

「Emmet」はHTML・CSS双方でコーディングを助けてくれる機能となっております。
HTMLでは階層化されたタグを簡単に出力してくれますし、CSSではプロパティと値を簡単に出力することができます。

基本的に何かを入力した後に「tabキー」を押すことによって幸せになることができます。

まずはHTML

基本的にタグの名前をうち「tabキー」を押すとタグが出てきてくれます
タグの名前の後に「>」付けて入れ子の形で出力することもできます

例えばdiv要素を作りたいのであれば
「div」と記述してtabキー

このようなリストを出力したいのであれば
「ul>li*5」と記述してtabキーを押してあげると簡単に出力されます。
この記述の意味はul要素の中にliタグを5つ出力するという、命令になっています。
個数を指定するときはタグの名前の後に「*(アスタリスク)」と「出力したい数」の形で記述しtabキーで展開してあげましょう

IDを付けたいときは付けたいタグ名の後にスペースなどは開けずに
「#」と「付けたい名前」
classであれば「.」と「付けたい名前」を記述してtabキーで展開しましょう
HTMLの骨組み部分は「!」とtabキーで展開できますのでよろしくお願いします

CSSの場合はプロパティと値をセットで出力してくれる形になります
法則があって大体「プロパティ名の頭文字＋α」＋値の形で展開できます。
値には単位を省略できるものなどがあり少しややこしいかもしれませんので、徐々に覚えていけるといいと思います

複数展開したいときはひとつひとつを「＋」で区切りましょう

Beautifyの使い方

拡張機能でBautifyをインストールすると右サイドバーにアイコンがひとつ増えることが確認できると思います。
使いたいときはこのアイコンをクリックするだけでコードのインデントをきれいに整えてくれるので可読性の高いコードを書くことが可能になります
右下のスペースと書かれた部分を「２」に変更してから使うといいと思います

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

エディタ部分に全角空白、スペース、タブを表示出来るようにした拡張機能です。
これがあると全角スペースによるミスを減らせると思います。