DreamweaverのEmmetをカスタマイズ - Kubeなどの独自タグを認識させる
DreamweaverでEmmetを使う際、HTML5準拠していないタグは認識されません。
KubeなどのHTML/CSSフレームワークの独自タグを利用するには、設定ファイルの編集が必要です。
実際の利用例
row>col
これを変換すると・・・
<row>
<column cols=""></column>
</row>
こうなるようにカスタマイズします。
カスタマイズする
設定ファイルを編集します。対象ファイルは２つです。
（ファイルを編集する際は、必ず元ファイルをバックアップしておきましょう）
1: emmet-app.js（２箇所）
＜ファイルの場所＞
/Applications/Adobe Dreamweaver CC 2015/configuration/Shared/Emmet/Emmet/emmet-app.js
まずは、12449行目あたりにある
known_html_tags =
の末尾にタグを設定します。
私は「row」と「column」を追加しました。
var known_html_tags = " html head title base link meta style script noscript body section nav article aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr pre blockquote ol ul li dl dt dd figure figcaption div a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rt rp bdi bdo span br wbr ins del img iframe embed object param video audio source track canvas map area svg math table caption colgroup col tbody thead tfoot tr td th form fieldset legend label input button select datalist optgroup option textarea keygen output progress meter details summary command menu main template row column ";
次に、11587行目あたりにある
var elementTypes =
の
blockLevel:
の末尾にタグを設定します。
同じく「row」と「column」を追加しました。
var elementTypes = {
〜中略〜
blockLevel: 'address, applet, blockquote, button, center, dd, del, dir, div, dl, dt, fieldset, form, frameset, hr, iframe, ins, isindex, li, link, map, menu, noframes, noscript, object, ol, p, pre, script, table, tbody, td, tfoot, th, thead, tr, ul, h1, h2, h3, h4, h5, h6, row, column'.split(', '),
これでタグの認識は完了です。
2: snippets.js
次に、実際に変換されるタグの内容を設定します。
＜ファイルの場所＞
/Applications/Adobe Dreamweaver CC 2015/configuration/Shared/Emmet/Emmet/snippets.js
596行目あたりにある、
"html":
の「abbreviations」にショートカットとタグの一覧がズラーッと並んでいると思います。ここに「"ショートカットの文字": "出力されるタグ"」の形式で記述します。
場所はお好みのところで大丈夫です。
私は上記と同じく「row」と「column」の２行を追加しました。
"html": {
〜中略〜
"abbreviations": {
"!": "html:5",
"a": "<a href=\"\">",〜中略〜
"row": "<row>",
"column": "<column cols=\"\">",
これで設定は完了です。
Dreamweaverを再起動すると、設定が反映されているはずです。
さらにカスタマイズ
これで十分便利になったのですが、いちいち「column」と打つのが大変なことに気づきます。ですので「col」で変換されるように設定しなおしました。
"html": {
〜中略〜
"row": "<row>",
"col": "<column cols=\"\">",
なお、もともと「col」には「<col>」というタグが設定されています。
あまり利用することのないタグなのでこちらは消してしまいましょう。
（利用される方はこちらの編集は割愛してください）
以上でカスタマイズは完了です！
よいコーディング生活を！
