how to make a custom comment style in vscode - visual-studio-code

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).

Answer 2

You can use the extension HyperSnips
Define the following snippet in the all.hsnips file
snippet comment "Comment Section"
// //------------------------------------------------------------------------------
// //``s = '='.repeat((78-(t[0].length + 2))/2); rv = s;`` $1 ``rv = '='.repeat(78-(t[0].length + 2 + s.length));``
endsnippet
If you type comment and select the snippet with Tab you can type the text and the === strings adjust to keep the text centered.
You can also cut some text - start the snippet - and paste the text.