Bracketsの使い方②

5分でわかるBracketsの使い方

①Bracketsをダウンロード

http://brackets.io/

上記にアクセス。

右画面にもある真ん中の

水色ボタンクリックして

ダウンロード。

②Brackets画面一覧の機能

■作業用フォルダを選択ここで選んだフォルダ内に入っているファイル一式が左サイドバーに表示される。

■コーディング画面を左右 or 上下に分割例えば一つの画面にHTMLとCSSを分けて表示できるので、いちいち画面を切り替える手間が省けて便利。

■ライブプレビュー+便利機能一番上の雷マークを押すとライブプレビューと言って、コーディング結果をリアルタイムにGoogleChromeに表示させる機能が使える。

③新規でファイル作成→コーディング

■新規作成 を選択し作成新規作成を選択し空ファイルが生成されます。

※HTML templateプラグインを使うとよくつか

うテンプレートを始めから使える。

■新規作成ファイル保存→拡張子決める！htmlファイルとして保存→.htmlcssファイルとして保存→.cssjavascriptファイルとして保存→.js

拡張子が決まればコードヒントが使える！

なんと、基本的にコーディングをするには

これだけでOKなんです！

④覚えておきたいショートカット

・ctr（cmd）+ ／　→ コメントアウト（altも含めると若干挙動が変わる）

・ctr（cmd）+ E → クイック編集

（該当のHTMLにカーソル合わせて行うと、該当の CSSをダイレクトに編集）

（CSSだとカラーコードやアニメーション定義箇所上で押すと編集可）

・ctr（cmd）+ D → 行の複製（altも加えると行の削除になる）

・ctr（cmd）+ F → 検索機能（通常のブラウザと同じですね）

※上記以外のショートカットは下記を参照！

http://qiita.com/assialiholic/items/7683d94108b12f1ca3ad

⑤絶対いれたいプラグイン

■Beautifyコード整形をしてくれる。

■Emmet高速でコーディングを実施してくれるためのツール。

■W3CValidationバリデーション機能を導入してくれる。

■Themes for Brackets見た目のデザインを色々変更できる。

■HTML Block Selector開始タグか終了タグのところでCtr(Cmd）+Shift+Tを押すと該当タグの範囲を全部選択してくれる。

■Show WhiteSpace半角スペースを表示してくれる（無駄なものは赤色で表示される）

■WDMinimapコード全体のマップを右側に表示させてくれる。

※その他プラグインについてはこちら！

http://qiita.com/assialiholic/items/c7962f804cdb21a49327

⑥プラグインの入れ方

■ここのアタッシュケースアイコンを選択そうすると左の画面が出てきます。入手可能のところに出てくる一覧から好きなものを選択するか、検索ボックスで名前を入力して入れたいものを選ぶ。

■インストールしたいものはボタン選択インストールボタンを選択したら、あとは数秒待つだけ！これでプラグインのインストールは完了です。

⑦参考リンク集

http://webcre8.jp/think/editor-brackets-features.html

http://www.atmarkit.co.jp/ait/articles/1503/20/news130.html

http://qiita.com/assialiholic/items/c8137321c7599a168b16

■このスライドは下記にも掲載されています！

http://www.slideshare.net/tatsuyakosuge

ありがとうございました！