サポート終了でプラグインサーバーもなくなりました。
これからはVisual Studio Codeへ
Adobeが開発した無用のHTMLエディタです。
プラグイン:Brackets-synapse
最新はGitHubにあり、1.2.91でFTPSが追加された。
さらにSFTPの不具合を山野井が修正したのがこちら
プラグイン:Emmet
Emmetチートシート https://docs.emmet.io/cheat-sheet/
例
入力 | TABキーによる変換後 |
! | <!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>Document</title></head><body> </body></html> |
div>ul>li.item$*3 | <div> <ul> <li class=”item1″></li> <li class=”item2″></li> <li class=”item3″></li> </ul></div> |
プラグイン: Beautify
ソースの整列、Dreamweaverにもある。
プラグイン: Brackets Color Picker
色をクリックすると
色を右クリックでクイック編集
カラーパレットが表示されるのすきな色を選べる。
プラグイン: Brackets CSS Class Code hint
クラス名を途中まで入れると候補が表示されるサジェスト入力ができる
プラグイン:Brackets Icons
ファイル名の横にアイコンを表示して見やすくします。
プラグイン: Brackets sass
sass/scssが使えるようになります。
メインモジュールが古いので変更する必要があります。
Bracketsを起動 > ヘルプ > 拡張機能のフォルダを開く > user > jasonsanjose.brackets-sass> node > 2.0.3 > node_modules > vendorの下にWin32-ia32-48というフォルダを作成します。次に下からwin32-ia32-48_binding.nodeをダウンロードしてフォルダに入れます。
最後にwin32-ia32-48_binding.nodeからbinding.nodeに名前を変更します。
(再起動)デバック>拡張機能付きでリロードもしくはF5をクリック
ファイルタイプscssで保存するとプリプロセッサが起動されファイルタイプcssが生成されます。
Emmetテクニック集
日本語設定
Bracketsを起動 > ヘルプ > 拡張機能のフォルダを開く > user > brakets-emmet > node_modules > emmet > lib > snippet.json
snippet.json を開きます。
langとlocalに書かれているenとen-USをjaとja-JPに変更して保存します。
デバック>拡張機能付きでリロードもしくはF5をクリック
Remove Tag (CTRL+Shift+k)
タグを選んでペアで削除
Update Tag(CTRL+Shift+i)
タグ名を選んでペアで変更
Emmetサンプル
タグの接頭部を入れてTABが基本
基本
ピリオドでclass,#でID、>で子タグ、[]で属性
div.mem | <div class=”mem”></div> |
div#mem | <div id=”mem”></div> |
div>ul>li*2 | <div> <ul> <li></li> <li></li> </ul> </div> |
img[src=”index.html”] | <img src=”index.html” alt=””> |
HTML
inp | <input type=”text” name=”” id=””> |
input:p | <input type=”password” name=”” id=””> |
CSS
bc#8f4e3f | border-color: #8f4e3f; |