LoginSignup
2
3

More than 3 years have passed since last update.

Emmet コメントを自動挿入する方法

Posted at

階層が膨れてくると、どこまでがどこのクラスなのか、
「あれ、閉じタグが一個多くないか!?」など

いろいろとわからなくなってきますよね^^;

そこでそれを解消する為に使った
Emmetを今回記事に書きたいと思います。

それでは行きましょー!!

Emmetとは

HTML、CSSをコーディングするときに、ショートカットキーを使用すると補完してくれるツールです。

Emmetのチートシート
https://docs.emmet.io/cheat-sheet/

コメントを自動挿入する方法

今回はVSCodeを使用している設定で書き出しておりますので、ご了承下さい^^;

VSCodeを起動して、左下の設定ボタンから[設定]を開きます。
スクリーンショット 2021-02-26 17.38.02.png

右上にあるアイコンをクリックして、settings.jsonを開きます。

スクリーンショット 2021-02-26 17.44.40.png

僕の元の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"
    },
},

追加を終えたのが以下になります。

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] -->"
    },

}

div.hogeをTabキーで展開すると、以下のようになります。

ezgif.com-gif-maker.gif

emmet.preferencesをsettings.jsonに追加しなかった場合は、以下のように次の行にコメントが挿入されます。

ezgif.com-gif-maker (1).gif

以上になります
設定もすごく簡単なので是非設定してみて下さい^^

おまけ

Emmet入れてるのに全然動作がしないです!
って人がもしいたら、

スクリーンショット 2021-02-26 18.32.09.png

設定が開けたら上部にある検索蘭にemmetと入力して
以下の項目にチェックが付いているか確認して下さい!

ezgif.com-gif-maker (2).gif

これで使えるはずです!^^

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3