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