9

I want to comment out my code in this style

/**
 * This is
 * A multiline comment
 */

Is it possible to do with a shortcut?

EDIT 1:

https://github.com/Microsoft/vscode/issues/50301 Address this issue, however it does not work with a shortcut. I want to be able to select a block of code and comment it out in the style above

Mark
  • 143,421
  • 24
  • 428
  • 436
Mantas
  • 866
  • 1
  • 7
  • 10
  • Does this answer your question? [How to comment multiple lines in Visual Studio Code?](https://stackoverflow.com/questions/34316156/how-to-comment-multiple-lines-in-visual-studio-code) – Deepak Dixit Aug 23 '20 at 10:34
  • 1
    Configure the block comments: https://stackoverflow.com/questions/34822552/how-to-customize-comment-block-characters-in-visual-studio-code – quirimmo Aug 23 '20 at 10:56
  • Thanks @quirimmo, but that does not solve my issue. You can only define the start and end characters of the comment. I need to add asterisk on every line – Mantas Aug 23 '20 at 11:04

8 Answers8

9

How to comment out multiline/single line in VS Code:

  • macOS:

    Shift + Option + A

  • Windows And Linux core:

    Shift + Alt + A

How to remap/change these shortcuts?

Windows : File > Preferences > Keyboard Shortcuts.

MacOS : Code > Preferences > Keyboard Shortcuts.

You can search through the list both by keybindings (key names) and command names.

TechySharnav
  • 4,869
  • 2
  • 11
  • 29
Yaser Darzi
  • 1,480
  • 12
  • 24
2

The shortcut is shift + alt + a (windows), shift + option + a (mac)

Abin vs
  • 103
  • 5
2

I use this type of comment in VS Code but I don't think there is an shortcut for this. I usually do this by typing /**

Then JSDoc Comment is toggled and you can use that.

/**
 * This is
 * A multiline comment
 */

for more : click here

0

The shortcut is shift + alt + A.

TechySharnav
  • 4,869
  • 2
  • 11
  • 29
Brinley
  • 90
  • 6
0

This isn't a real solution, but you can make the /* ... */ style comments with Shift + Option/Alt + A, and then use the vertical cursor select to insert a space and asterisk at the beginning of each line.

Ritwin
  • 23
  • 1
  • 6
0

Select the bulk line list first, then hit below key strokes. You can reverse the operation by executing same.

Windows: Ctrl + /

Mac: Command + /
Heshan D
  • 11
  • 2
0

I made a keybinding to make these starred comment styles from a selection. You will need an extension (that I wrote, full disclosure) - Find and Transform - as it allows you to use javascript and/or the vscode extension api in the replace.

Make this keybinidng (in your keybindings.json):

{
  "key": "alt+c",                          // whatever keybinding you want
  "command": "findInCurrentFile",
  "args": {
    "description": "toggle starred block comments in selections",
    "preCommands": "expandLineSelection",
    
    "replace": [
      "$${",
        "const startRegex = /^\\s*\\/\\*\\*\\s*/m;",  // for /** start to block
        // "const startRegex = /^\\s*\\/\\*\\s*/m;",  // for /*  start to block
        "const endRegex   = /^\\s*\\*\\/\\s*?$/m;",
        
        "let lines = `${selectedText}`.split('\\n');",
        "if (lines.at(-1) === '') lines.splice(-1,1);",
        
        "const isReversed = vscode.window.activeTextEditor.selection.isReversed;",
        // isReversed =  bottom-up selection
        
        "let firstLineNumber = vscode.window.activeTextEditor.selection.active.line;",        
        "if (!isReversed) firstLineNumber = vscode.window.activeTextEditor.selection.anchor.line;",
        
        // get entire line of text - to far left
        "const firstLine = document.lineAt(firstLineNumber).text;",
        
        "const regex = /\\s*/g;",
        "const leadingSpaces = firstLine.match(regex)[0];",
        
        "if ( startRegex.test(lines[0]) && endRegex.test(lines.at(-1)) ) {",          // so have an entire block comment
          "lines.shift();",                                                           // remove first '/*'  or '/*' line
          "lines.splice(-1,1);",                                                      // remove last  ' */' line
          "return lines.flatMap(line => `${line.replace(' * ', '')}`).join('\\n') + `\\n`;",  // remove ' * ' from each line start
        "}",
        
        "else {",
          "let str = leadingSpaces + `/** \\n`;",        // for /** start to block
          // "let str = leadingSpaces + `/* \\n`;",      // for /* start to block
          
          "str += lines.flatMap(line => leadingSpaces + ` * ` + line.substring(leadingSpaces.length)).join('\\n');",
          "str += `\\n`;",
          "return str + leadingSpaces + ` */` + `\\n`;",
        "}",
          
      "}$$"
    ],
    "restrictFind": "selections",       // need this since there is no find
    "postCommands": "cancelSelection"
  }
  // can use "when" clauses to restrict to certain languages
},

It is lengthy as it operates as a toggle - adding or removing the jsdoc-like comments. And you can toggle multiple selections at the same time.

It uses the indentation of the first line within each selection. You just need to select somewhere on the start line to somewhere on the ending line - see the demos.

The demos show the /* starting block characters, but see the code comments for changing to use /**.

jsdoc starred comments toggle

multiple starred jsdoc comments toggle

Let me know if you spot any issues.

Mark
  • 143,421
  • 24
  • 428
  • 436
0

Here's a VSCode extension that appears to do what you're asking: https://marketplace.visualstudio.com/items?itemName=zachhardesty.jsdoc-comment-toggler

selecting block of text, pressing Cmd+R Cmd+/ and it turns into JSDoc style comment

mrossman
  • 561
  • 4
  • 12