Brackets

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をダウンロードしてフォルダに入れます。

https://github.com/sass/node-sass-binaries/raw/master/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#8f4e3fborder-color: #8f4e3f;
カテゴリー: 未分類 タグ: , , パーマリンク