WEBとSEO

Dreamweaver CC 2020の純正Emmetのスニペットを編集・カスタマイズ設定。snippets.jsonファイルの場所

comm_web

Dreamweaver CC 2020では最初から使える便利なEmmet。でもどこで編集・カスタムしたらいいんだ・・・途方にくれた結果、解決策はこちら。

Dreamweaver CC 2020 Emmetのスニペットを編集・カスタマイズ設定

コードヒントの編集もしたくていろいろ調べましたが、結果的にEmmetのカスタマイズに落ち着きました。

まずはsnippets.jsonファイルの場所。

Dreamweaver CC 2020の場合のEmmetの設定ファイルの場所は下記です。Macです。

Applications/Adob​​e Dreamweaver CC 2020/Adob​​e Dreamweaver 2020.app/Contents/www/extensions/default/brackets-emmet/node_modules/emmet/lib/snippets.json

アプリケーション自体の中なので、「パッケージの内容を表示」を使って入ります。

ものすごく奥深くて、絶対に見つからないわコレ・・ってなります。URLは見失いましたが海外のフォーラムで教えてもらいました。

2015年以降のDreamweaverは同じくAdobeファミリーのBracketsが基本のコードエンジンになっているらしいです。

公式関連の話題にも一切あがりませんが、スニペットの基本部分はこんな深いところに隠されていたんですね。。

カスタマイズの覚え書き

atomとかと一緒です。

"html": {
"abbreviations": {
"img": "<img src=\"img/|\" alt=\"\" />",
}
}

 

デフォルトの状態に上書きしてもいいですが、上記のように最後に追記すると管理が楽だと思います。

最後に追加する時は最後の項目からのカンマの有無にお気をつけください。

単純に挿入だけなら純正のスニペット機能で十分です。しかし、カーソル位置の指定や、特定文字を選択状態にできるなど、Dreamweaverのスニペットではできない便利な技が使えます！

No tags for this post.

-WEBとSEO