Possible to create a VS Code Keyboard Shortcut for Comment at End of Line?

Question

Is there a way to create a keyboard shortcut in VS Code where I can begin a comment ( creating opening and closing comment brackets if applicable ) at the end of a line of code? - like so:

<h3>Example</h3>
<div class="keyboard-shortcut"></div> <!-- comment here -->
<h3>Example</h3>

I know to use Ctrl+/ or Ctrl+K Ctrl+C ( I am using Ubuntu Linux ) - in order to comment out the entire line or selection like this:

<h3>Example</h3>
<!--  <div class="keyboard-shortcut"></div> -->
<h3>End of Line</h3>

An HTML example is used here but I would like to use a keyboard shortcut to begin a comment at the end of a line in any common programming language - as if I were beginning a comment on a blank line.

I know how to create custom key mappings. I am wondering if the above described operation is possible - or if an extension might exist for accomplishing this task.

Or would one have to create their own extension to achieve this?

Answer 1

To do this as a simple snippet, your cursor would have to be at the end of the line already:

{
  "key": "alt+-",                                // choose your own keybinding

    "command": "editor.action.insertSnippet",

    // delete next line if using block comment form for all filetypes
    "when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(html|scss|css)/"

    "args": {
      "snippet": "  $BLOCK_COMMENT_START $1 $BLOCK_COMMENT_END"

      // "snippet": "  $LINE_COMMENT $1 "
  }
},

There are two versions of snippet variables available for this: $BLOCK_COMMENT_START and $LINE_COMMENT. You may prefer one over the other but $BLOCK_COMMENT_START appears to work for more languages, like html where the $LINE_COMMENT version doesn't do anything when triggered at the end of a line.

You could make two versions of this snippet: one with $BLOCK_COMMENT_START languages and for the $LINE_COMMENT languages just by modifying the resourceExtname clause as shown above.

---

Alternatively, to get more functionality you could make a macro. You could then trigger an EOL comment from anywhere in the line. Using the multi-command extension, put this in your settings.json:

"multiCommand.commands": [

  {
    "command": "multiCommand.insertBlockCommentEOL",
    "sequence": [
      "cursorLineEnd",
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "  $BLOCK_COMMENT_START $1 $BLOCK_COMMENT_END"
        }
      }
    ]
  }
],

Then some keybinding:

{
  "key": "alt+-",
  "command": "multiCommand.insertBlockCommentEOL",

  // remove below if using block comment form for all languages
  "when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(html|scss|css)/"
}

Same comment as above about the form of the comments: block or line comments. You could make a copy of the macro named slightly different and then another keybinding (using the same trigger) but with a different when clause for different languages that would trigger the other macro that uses line comments.

I'll show the other forms here (but you may not need them if using the block comment form is okay for you, in which case just remove the && resourceExtname =~ /\\.(html|scss|css)/ from the end of the first when clause above).

{
  "command": "multiCommand.insertLineCommentEOL",
  "sequence": [
    "cursorLineEnd",
    {
      "command": "editor.action.insertSnippet",
      "args": {
        "snippet": "  $LINE_COMMENT $1"
      }
    }
  ]
}

and

{
  "key": "alt+-",
  "command": "multiCommand.insertLineCommentEOL",
  "when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js|ts|php)/"
}

If all this isn't clear, let me know. Here is a demo on different files using both comment forms (as demonstrated, if you trigger the macro with a mulit-line selection, the comment will be aded to the end of the line with the cursor only - although it could probably be modified to put a comment at the end of all lines selected):