In VSCode, how can I add comment characters spanning the length to the end of my vertical ruler? Is this possible?

Question

I often separate blocks of code using comment characters spanning a specified distance horizontally. The character depends on the language, but for the sake of this example I'm using JavaScript and the "/" character.

Here is some sample code:

// const / start 

        settings_init = {

            // extension.js
            'p_path': '',

            // main.js
            'mode_current': 'insert-listview',
            'c_cid': -1,                        
            'filter_open': false,               
            'filter_val': '',                   
            'picker_open': false,               
            'picker_color': '',                 
            'picker_color_init': '',            
            'scroll_pos': -1,                   
            'cm_width': 380,                    
        };

What I'd like to do is this:

// const / start ///////////////////////////////////////////////////////////////////////////////////////////

        settings_init = {

            // extension.js
            'p_path': '',

            // main.js
            'mode_current': 'insert-listview',
            'c_cid': -1,                        
            'filter_open': false,               
            'filter_val': '',                   
            'picker_open': false,               
            'picker_color': '',                 
            'picker_color_init': '',            
            'scroll_pos': -1,                   
            'cm_width': 380,                    
        };

Or even this:

// const / start ///////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////

        settings_init = {

            // extension.js
            'p_path': '',

            // main.js
            'mode_current': 'insert-listview',
            'c_cid': -1,                        
            'filter_open': false,               
            'filter_val': '',                   
            'picker_open': false,               
            'picker_color': '',                 
            'picker_color_init': '',            
            'scroll_pos': -1,                   
            'cm_width': 380,                    
        };

An image as an example so you can see the ruler position:

Before

---

After 1

---

After 2

---

Is there a plugin, hack, or other method I can utilize in VSCode that will do this for me without having to type each character by hand or copy paste blocks of characters?

Answer 1

Using an extension I wrote this is quite easy, Find and Transform.

After installing the extension, make the following keybinding:

{
  "key": "alt+c",               // whatever keybinding you want
  "command": "findInCurrentFile",
  "args": {
    "description": "whatever you want",
    "preCommands": "cursorHomeSelect",
    "replace": [
      "$${",
        "return '${selectedText} '.padEnd(80, '${LINE_COMMENT}');",
      "}$$",
    ],
    "restrictFind": "selections",
    "postCommands": "cancelSelection",  // to remove the resulting selection
  }
}

You can see that it uses 80 as your ruler length - change that if you use something different.

Start with the cursor at the end of the line and then trigger your chosen keybinding.

For this case:

// const / start ///////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

use a replace that looks like:

    "replace": [
      "$${",
        "let str = '${selectedText} '.padEnd(80, '${LINE_COMMENT}');",
        "return str + '\n' + ''.padEnd(80, '${LINE_COMMENT}');",
      "}$$",
    ],

It just adds a newline and then pads an empty line with a total of 80 comment characters. So it would be easy to extend that to another line if you wanted.