BracketsはMac専用じゃないよ。Windowsでも使えるよとご指摘を受けましたのでタイトル修正しましたm(_ _)m
最近、週末に子ども達にプログラミングやHTMLコードを教える道場「CoderDojo西宮」という勉強会でメンターをしています。
CoderDojoでは、HTML+CSSの作成に無料のオープンソースエディタBracketsを利用しています。今日、初めてBracketsをインストールしてみて、便利そうでしたので紹介します。
今回のテーマはBracketsでZenCodingする。です。
まずはBracketsのインストール
Brackets - The Free, Open Source Code Editor for the Webライブプレビューが高機能
GoogleChromeと一緒に使う機能ですが、ライブプレビュー機能がかなりの高性能です。
画面、右上の雷（ボルト？）マークをクリックすると編集中のコードが瞬時にChrome上に再現されます。Dreamweaverのようななんちゃってライブプレビューじゃなくて、実際にブラウザでどう見えるかのプレビューなのでとても分かりやすい。
ZenCoding拡張機能（Emmet）のインストール
ファイル＞拡張機能マネージャーを開くとBracketsに拡張機能をインストールできます。
インストールすれば、ZenCodingが利用できるようになります。
余談：ZenCodingで長らく親しんでいましたが、プロジェクトがリネームされて今はEmmetと呼ぶそうです。
Zen-Codingの次期バージョン、Emmet について
そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。
知らなかったのは僕だけですか？そうですか。
これからはEmmetと呼ぶことにします。本題に戻る。
Emmetのショートカット
ul#menu>li*3>a{test}と打ち込んでおもむろに
option+command+returnを押すとHTMLに展開してくれます。- <ul id="menu">
- <li><a href="">test</a></li>
- <li><a href="">test</a></li>
- <li><a href="">test</a></li>
- </ul>
他にもいろいろなコマンドがあるので、メニューバーのEmmetを開いて確認して下さい。
 |
| Expand Abbreviationの右端の記号がreturnキーだと初めて知った |
Bracketsが気になった方は紹介動画もどうぞ
中々便利そうではありますが、僕はPhpStorm使うので出番はなさそうです。
0 件のコメント:
コメントを投稿