1

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.

Mark
  • 143,421
  • 24
  • 428
  • 436
Mahi
  • 1,297
  • 1
  • 14
  • 28
  • Go to keyboard shortcuts and type "add line comment" and change the keyboard shortcut. There is another shortcut called 'remove line comment.' with which you can remove comments. :) I have it as CTRL + Q and CTRL + Shift + Q respectively. – LJD Jan 28 '22 at 02:38

2 Answers2

3

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

demo creating a custom comment block with javascript in a keybinding

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Yes, this is working. but a simple problem is that, when I select a sentence and press alt + q, it shows variable declaration. I just need to replace it with what I selected. how to do that? – Mahi Jan 28 '22 at 16:48
  • for example, if I select "controller" text, it should replaced with "variable declaration". – Mahi Jan 28 '22 at 16:48
  • 1
    If you select "controller" that should appear where the "Variable Declaration" text is? And "controller" is the only thing on that line? I edited the answer is what you select is put in the middle - you'll have to pad the lines with `=`'s to match the upper line - no big deal. – Mark Jan 28 '22 at 17:22
  • yep...its working. thanks. – Mahi Jan 29 '22 at 02:33
0

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.

rioV8
  • 24,506
  • 3
  • 32
  • 49