Use single-line comments for HTML & CSS

When commenting ctrl+/ in VSCode, it does block-comments normally for css & html, which can be bothersome when you end up with nested comments that don't actually nest. This will add a cursor to every line that's higlighted & do a single-line comment on every-single line. HTML & CSS don't have single-line comments like php (//comment), but at least the block comments won't wrap & nest & make everything hinky.

Install multi-command extension

1. install the multi-command extension
   • F1 -> type ?ext -> search multi-command -> install package by ryuta46
2. Add the below code to your settings.json
   • F1 -> type >Preferences: Open Settings (JSON)
3. Add the below code to your keybindings.json
   • F1 -> type >Preferences: Open Keyboard Shortcuts (JSON)

settings.json code

"multiCommand.commands": [
    {
        "command": "multiCommand.LineByLineComment",
        "sequence": [
            "editor.action.insertCursorAtEndOfEachLineSelected",
            "editor.action.addCommentLine",
        ]
    }
]

keybindings.json code

You can change that html|css|... bit to whatever file extensions you want to use this on. There are some funky results when using this, but I find it super helpful for html and css where all comments are /* block */ or <-- block --> comments.

{
    "key": "ctrl+/",
    "command": "extension.multiCommand.execute",
    "args": {
        "command": "multiCommand.LineByLineComment"
    },
    "when": "editorTextFocus && editorHasSelection && resourceExtname =~ /\\.(html|css|scss)/"
    // "when": "editorTextFocus && editorHasSelection && resourceExtname =~ /\\.html/"
}