Dreamweaver CC向けEmmetをカスタムする（閉じタグ、コメント位置など）
公開日 2014年08月28日
ここ数カ月、Windows8をメインに使うようになってから、DreamweaverもCS6からCCに変えました。
DreamweaverCCでは、コーディングを効率化するための拡張である「Zen-coding」も「Emmet」となっており、「Zen-coding」以上の機能となっています。
今回は「Zen-coding」の時に設定していたカスタマイズを「Emmet」でも設定します。
Emmetのダウンロード先
emmetio/dreamweaver・GitHub
https://github.com/emmetio/dreamweaver
zxpファイルをAdobe Extension Managerからインストールすると下記の場所に4つのjsファイルが生成されます。（Windows8の場合）
C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Commands\Emmet
ショートカットの変更→ショートカット
展開のショートカットは、デフォルトでは【Ctrl+E】なので、自分の使いやすいショートカットに変更します。
私は【Ctrl+,】にしています。
DreamWeaverのメニューから、
[編集]→[キーボードショートカット]から[コマンド]→[Emmet]→[Expand Abbreviation]
で変更できます。
コメントを閉じタグの手前に変更する
コメントを閉じタグの手前にすることで、Dreamweaverの「親タグを選択」で カット&ペースト等しやすくなります。
「emmet-app.js」の12057行目あたりにある記述
node.end = node.end.replace(/>/, '>' + nodeAfter);
上記を、下記に変更します。
node.end = node.end.replace(/</, nodeAfter + '<');※上記ソースコードのみ、このブログでの表示上のバグを防ぐため「<」を「<（文字実態参照）」にしています。コピペする際はご注意ください。
コメントと閉じタグを改行させず、続けて入力させる
コメントがある場合、改行された後に、コメントと閉じタグがはいります。 好みが分かれるところかと思いますが、続けて一行で展開させる場合は以下のように変更します。
「emmet-app.js」の11988行目あたりの記述
'\n',
上記を、下記に変更します。
'',
「|c」なしでも要素に自動でコメントを追加する
デフォルトでは「div#id|c」のように「|c」をつけると、div、article、section、headerなどのタグは、 id、class属性がある場合、展開時にコメント付きになりますが、「|c」無しでも自動でコメントを追加するようにします。
「snippets.js」の597行目あたりの記述
※11行目にも同じ記述がありますので注意してください。
"filters": "html",
上記を、下記に変更します。
"filters": "html,c",
以上、「Zen-coding」の時に設定していたカスタマイズを「Emmet」でも反映する方法でした。
Zen-codingからEmmetになり、展開後のカーソル位置が、閉じタグの前になっていて、コーディングが非常にはかどりそうです！
参考にさせていただいたサイト
コメント頂けると喜びます。
この記事を論及・引用、関連記事にして頂けたらありがたき幸せ。
- トラックバック用URL(承認制：nofollow無し)
