skip to Main Content

I am coding in VS Code. You can press ‘Shift + Alt + A’ to make block comments. If I have the lines of code:

console.log("...");
console.log("...");
console.log("...");

and press the block comment keyboard shortcut, they show up like this:

/* console.log("...");
console.log("...");
console.log("..."); */

However, I want them to be formatted with a newline after and before the beginning and end of the text portion of the block comment like this:

/*
console.log("...");
console.log("...");
console.log("..."); 
*/

Is there any setting you know of to format the comments this way?

I have been looking for settings and searching on other forums to find ways to do this, but it must be either an uncommon question, or I am wording it incorrectly.

2

Answers


  1. As far as I can tell from reading https://github.com/microsoft/vscode/issues/48074, this should already be supported by putting newline characters in the delimiter definitions in the language configuration (but (at the time of this writing) has issues with removing the code block using the same keyboard shortcut).

    I’m not aware of a way to do it aside from it being configured at the language-extension level. I’m not aware of there being a feature-request issue ticket tracking doing it at a user-configuration (settings) level. You could create one. If you do, please comment here with a link to your issue ticket, or edit the link into this answer post.

    Login or Signup to reply.
  2. Unfortunately as mentioned there is a bug in vscode which prevents this from easily being customized.

    Here is a workaround using an extension I wrote,
    Find and Transform. It allows you run vscode api’s in a keybinding (or setting) Make this keybinding (in your keybindings.json):

      {
        "key": "alt+c",                          // whatever keybinding you want
        "command": "findInCurrentFile",
        "args": {
          "description": "toggle surrounding block comments in selections",
          "preCommands": "expandLineSelection",
          
          "replace": [
            "$${",
              "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;",
              
              "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);", 
                "return lines.join('\n') + '\n';",                                                     // remove last  ' */' line
              "}",
              
              "else {",
                "let str = `/* \n`;",      // for /* start to block
                "str += lines.join('\n');",
                "return str + `\n` + `*/` + `\n`;",
              "}",
                
            "}$$"
          ],
          "restrictFind": "selections",       // need this since there is no find
          "postCommands": "cancelSelection"
        }
        // can use "when" clauses to restrict to certain languages
      }
    

    demo of toggling block comments with extension


    Alternatively, you can try another extension I wrote, Custom Language Properties. With it, you could make a setting like this (assuming javascript in this case – but it works for other languages too.

    "custom-language-properties": {
    
      "javascript.comments.blockComment": ["/*n","n*/"]
    }
    

    You see I just added newlines after and before the block comment characters.

    And that works perfectly to add block comments as you want to a selection. But due to the vscode bug it won’t toggle the comments off properly.

    You could either live with manually deleting the comment characters yourself or use the keybinding shown above.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search