how to make a custom comment style in vscode

Question

I got a source code commented like below.

// //------------------------------------------------------------------------------
// //======================= Variable Declaration =================================

Is there any way to make a comment like the above in vs code.

I only got single and multiline comments.

But I want the above custom style.

Answer 1

You can make a snippet to do that. In one of your snippets files:

"Variable Declaration Comment": {
    "prefix": "_gc",          // whatever trigger you want
    "body": [
      "$LINE_COMMENT $LINE_COMMENT------------------------------------------------------------------------------",
      "$LINE_COMMENT $LINE_COMMENT======================= ${TM_SELECTED_TEXT} =================================$0",
    ],
    "description": "Insert a Variable Declaration comment header"
}

That will use whatever the line comment style is for the type of file you are in: $LINE_COMMENT.

You could set that to a keybinding like this (in your keybindings.json file):

{
  "key": "alt+q",    // whatever keybinding you want 
  "command": "editor.action.insertSnippet",
  "args": {
    "name": "Variable Declaration Comment"
  },
  "when": "editorTextFocus"
}

---

If you want to get fancy and see how to build other custom comment blocks, you can do this with an extension I wrote, Find and Transform. Use this keybinding in your keybindings.json:

{
  "key": "alt+f",                  // whatever keybinding you want
  "command": "findInCurrentFile",
  "args": {
    
    "replace": [
      "$${",
      
        "const lineLength = 80;",    // how long you want the block
        // what is the length of the comment characters in this language
        "const commentCharsLength = 2 * (`${LINE_COMMENT}`.length) + 1;", // + 1 for the space between comment markers

        // select the text you want to wrap first
        "const selectionLength = `${selectedText}`.length;",
        "const gapLength = 1;",  // the spaces around the text
        
        "let str = `${LINE_COMMENT} ${LINE_COMMENT}` + '-'.padEnd(lineLength - commentCharsLength, '-') + `\n`;",

        "const totalSpacers = lineLength - commentCharsLength - selectionLength - (2 * gapLength);",
        "const beforeSelectionLength = totalSpacers/2 - commentCharsLength/2;",
        "const afterSelectionLength = totalSpacers/2 +  commentCharsLength/2;",

        // ${LINE_COMMENT} in backticks to treat as a string
        "str += `${LINE_COMMENT} ${LINE_COMMENT}` + '='.padEnd(beforeSelectionLength, '=') + ` `;",

        "if (selectionLength %2 === 0) str +=  `${selectedText} ` + '='.padEnd(afterSelectionLength, '=');",
        "if (selectionLength %2 === 1) str +=  `${selectedText} ` + '='.padEnd(afterSelectionLength+1, '=');",

        "return str;",
      
      "}$$"
    ],
    
    "restrictFind": "line",
    // "postCommands": "cancelSelection"
  },
  // "when": "editorLangId == javascript"
}

As you can see, you can write javascript in a keybinding (or setting).