vscode preserve indentation when commenting out lines

Question

In vscode (or most other editors I tried for that matter) when I have a block of code like this:

function() {
    if(test1) {
        doThis();
        andThenDoThat();
    }
}

And I try to comment out the line andThenDoThat() e.g. by pressing Ctrl+/, I will get this:

function() {
    if(test1) {
        doThis();
        // andThenDoThat();
    }
}

What I would like to get is this:

function() {
    if(test1) {
        doThis();
//      andThenDoThat();
    }
}

In other words, I want the comment to preserve the original indentation of the code, and start from the beginning of the line instead, because this is not a generic human-readable comment, it's code, and I think it's far more readable when the indentation is preserved.

Is this possible? With a plug-in maybe?

Answer 1

I think this works, modifying my answer from Make comments of VSCode start at column position 0

You need the multi-command extension.

In your settings:

"multiCommand.commands": [

    {
      "command": "multiCommand.insertCommentColumn0",
      "sequence": [
        "cursorLineStart",
        {
          "command": "type",
          "args": {
            "text": "//"
          }
        },
        "deleteRight",
        "deleteRight"
      ]
    },
    {
      "command": "multiCommand.AddCommentColumn0MultipleLines",
      "sequence": [
        "editor.action.insertCursorAtEndOfEachLineSelected",
        "cursorLineStart",
        {
          "command": "type",
          "args": {
            "text": "//"
          }
        },
        "deleteRight",
        "deleteRight",
        "removeSecondaryCursors"
      ]
    },
    {
      "command": "multiCommand.removeCommentsSingleLine",
      "sequence": [
        "editor.action.removeCommentLine",
        "cursorLineStart",
        {
          "command": "type",
          "args": {
            "text": "   "
          }
        },
        "removeSecondaryCursors"
      ]
    },
    {
      "command": "multiCommand.removeCommentsMultipleLines",
      "sequence": [
        "editor.action.insertCursorAtEndOfEachLineSelected",
        "cursorLineStart",
        "editor.action.removeCommentLine",
        {
          "command": "type",
          "args": {
            "text": "   "
          }
        },
        "removeSecondaryCursors"
      ]
    }
  ]

In your keybindings.json:

 {                   // disable ctrl+/ for js/php files only
    "key": "ctrl+/",
    "command": "-editor.action.commentLine",
    "when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js$|php)/"
  },

 {                   // call the macro multiCommand.insertCommentColumn0 when
                      // commenting a single line
   "key": "ctrl+/",
   "command": "extension.multiCommand.execute",
   "args": { "command": "multiCommand.insertCommentColumn0" },
   "when": "!editorHasSelection && editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js$|php)/" 
 },      

 {                    // call the macro multiCommand.AddCommentColumn0MultipleLines when
                      // commenting more than one line
   "key": "ctrl+/",
   "command": "extension.multiCommand.execute",
   "args": { "command": "multiCommand.AddCommentColumn0MultipleLines" },
   "when": "editorHasSelection && editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js$|php)/" 
 },

 {                   // call the macro multiCommand.removeCommentsSingleLine when
                     // uncommenting a single line
   "key": "ctrl+shift+/",
   "command": "extension.multiCommand.execute",
   "args": { "command": "multiCommand.removeCommentsSingleLine" },
   "when": "!editorHasSelection && editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js$|php)/"
 },
 {                   // call the macro multiCommand.removeCommentsMultipleLines when
                     // uncommenting multiple lines
  "key": "ctrl+shift+/",
  "command": "extension.multiCommand.execute",
  "args": { "command": "multiCommand.removeCommentsMultipleLines" },
  "when": "editorHasSelection && editorTextFocus && !editorReadonly && resourceExtname =~ /\\.(js$|php)/"
},

Same caveats as in the other linked answer, so read that. I made the above for js/php files only, obviously it wouldn't work for html/css/scss, etc. files with different comment markers than javascript.

Ctrl+Shift+/ to remove comments (you can choose whichever keybindings you like). Ctrl+/ to comment.

---