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/"  
}