visual studio code - How to pad out line to certain length using regex replace and snippets

Question

// My Section -----------------------------------------------------------------

The above is the desired result.

---

Imagine this scenario

// ----------------------------------------------------------------------------
// firebase

// ----------------------------------------------------------------------------
// utils

It is possible to trim lines to a certain length using for example this regex /(^.{20}).*$/$1/, which will give

// -----------------
// firebase

// -----------------
// utils

But what if I want to fill the other lines instead up to the set length like this in one run? Is that possible?

• one regex for only the right fill, not the trim

// -----------------
// firebase --------

// -----------------
// utils -----------

Ages ago, I was doing some regex ninja challenges and we were supposed to do math, so.... regex is magical.

---

What I am ultimately trying to achieve is a VSCode snippet that allows me to write: My Section --
then trigger a snippet that transforms the inserted text into an 80 character wide comment containing

// My Section -----------------------------------------------------------------

https://code.visualstudio.com/docs/editor/userdefinedsnippets

Answer 1

I doubt you can do what you want in one step, without running some code. But you can do it with a macro so you can have multiple steps fired at once. In this example I am using the macro extension multi-command, but there are other macro extensions out there.

In your settings.json:

"multiCommand.commands": [

 {
   "command": "multiCommand.commentSection",
   // "interval": 750,  // you don't need this, just for illustration

   "sequence": [  
     "cursorEnd",            
     {
       "command": "type",  // add 75 -'s'
       "args": {
         "text": " ---------------------------------------------------------------------------"
       }
     },

     "editor.action.addCommentLine",

     // select this wrapped line so the next snippet can use TM_SELECTED_TEXT
     "cursorHomeSelect",
     "cursorHomeSelect",

     {
       "command": "editor.action.insertSnippet",  // trim to first 80 characters
       "args": {
         "snippet": "${TM_SELECTED_TEXT/(.{80}).*/$1/g}",
       }
     }
   ]
 }
],

And then whatever keybinding you choose in keybindings.json

{
  "key": "ctrl+alt+-",
  "command": "extension.multiCommand.execute",
  "args": { "command": "multiCommand.commentSection" }
},

The basic idea is to add too many hyphens - say 75 - and then select the entire wrapped line and keep only the first 80 characters, thus trimming the trailing hyphens to fill out to 80 total characters on the line.

It works on blank lines too as the end of the demo demonstrates.