Emmet コメントを自動挿入する方法
階層が膨れてくると、どこまでがどこのクラスなのか、
「あれ、閉じタグが一個多くないか!?」など
いろいろとわからなくなってきますよね^^;
そこでそれを解消する為に使った
Emmetを今回記事に書きたいと思います。
それでは行きましょー!!
Emmetとは
HTML、CSSをコーディングするときに、ショートカットキーを使用すると補完してくれるツールです。
Emmetのチートシート
https://docs.emmet.io/cheat-sheet/
コメントを自動挿入する方法
今回はVSCodeを使用している設定で書き出しておりますので、ご了承下さい^^;
VSCodeを起動して、左下の設定ボタンから[設定]を開きます。
右上にあるアイコンをクリックして、settings.json
を開きます。
僕の元のsettings.json
は以下の設定でした。
{
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"files.autoSave": "afterDelay",
"window.zoomLevel": 0,
"explorer.confirmDragAndDrop": false,
"terminal.integrated.shell.osx": "/bin/zsh",
"workbench.colorTheme": "Visual Studio Dark",
"workbench.iconTheme": "material-icon-theme",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"emmet.triggerExpansionOnTab": true
}
ここに以下を追加します。
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
},
},
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},
上記を追加すると、閉じタグのすぐ後ろ(同じ行)にコメントが自動挿入されます。
同じ行ではなく、次の行にコメントを挿入したい場合は、emmet.preferences
の部分は削除して、emmet.syntaxProfiles
だけを追加すればOKです。
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},
----------------------------------------------------
↓↓こちらのみ
----------------------------------------------------
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
},
},
追加を終えたのが以下になります。
{
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"files.autoSave": "afterDelay",
"window.zoomLevel": 0,
"explorer.confirmDragAndDrop": false,
"terminal.integrated.shell.osx": "/bin/zsh",
"workbench.colorTheme": "Visual Studio Dark",
"workbench.iconTheme": "material-icon-theme",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"emmet.triggerExpansionOnTab": true, ⇦カンマ忘れずに
--------------- 以下追加 ------------------
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
},
},
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},
}
div.hoge
をTabキーで展開すると、以下のようになります。
emmet.preferences
をsettings.jsonに追加しなかった場合は、以下のように次の行にコメントが挿入されます。
以上になります
設定もすごく簡単なので是非設定してみて下さい^^
おまけ
Emmet入れてるのに全然動作がしないです!
って人がもしいたら、
設定が開けたら上部にある検索蘭にemmet
と入力して
以下の項目にチェックが付いているか確認して下さい!
これで使えるはずです!^^
Author And Source
この問題について(Emmet コメントを自動挿入する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/chokichoki_gm/items/6e3a3b7e886409d103c3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .