Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align inline comments to a certain column in VSCode

I'd like to organize the inline comments in VSCode so that they are all positioned in the same column. From this:

int a = 0; //comment 1
int b = 0;       //comment 2
int c = a*b;                    //comment 3

To this:

int a = 0;                      //comment 1
int b = 0;                      //comment 2
int c = a*b;                    //comment 3

Tried using Better Align Extension but that didn't really work, as it only formats correctly lines that have an equal sign, like something = something. Is there any other way to do this? Thanks in advance.

like image 880
Daniel Avatar asked Oct 01 '19 13:10

Daniel


People also ask

How do you select text vertically in VS Code?

Keyboard shortcut for vertical block selection: To select code block vertically in your visual studio code, use Shift + Alt and then use the mouse to select lines vertically, from top-left to bottom-right.

How do I use align better?

How to use. Place your cursor at where you want your code to be aligned, and invoke the Align command via Command Palette or customized shortcut. Then the code will be automatically aligned.


2 Answers

You can do it with a macro extension like multi-command. You do have to hard-code a rough guess as to how far to the right you want to align the comments. You can't simply measure the furthest and use that - you would need a more involved extension to do that. However, you will have multi-cursors at the end and it is easy to adjust all the comments at once if you don't like where they ended up as in the demo where backspacing and tabbing moves all the comments in alignment.

Demo:

align comments

Use some keybinding to trigger the macro:

{
  "key": "alt+w",                // whatever keybinding you choose
  "command": "extension.multiCommand.execute",
  "args": { "command": "multiCommand.alignComments" },
  "when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.js/"
},

I made that for .js files but you can modify that for other extensions, like

resourceExtname =~ /\\.(js$|php)/ for .js and .php files.

And in your settings.json the actual macro:

"multiCommand.commands": [

  {
      "command": "multiCommand.alignComments",
      // "interval": 3000,
      "sequence": [
        "editor.action.insertCursorAtEndOfEachLineSelected",
         "cursorHomeSelect",
        {
          "command": "editor.action.insertSnippet",  // pad with lots of spaces's'
          "args": {
            // so capture group 1 is before the comment, add spaces after it
            "snippet": "${TM_SELECTED_TEXT/^([^;]+;)(\\s*)(?=\\/\\/.*)/$1                      /g}",
          }
        },

        "cursorHomeSelect",
        {
          "command": "editor.action.insertSnippet",
          "args": {
                   // keep first 25 characters or wherever you want to align
                   //   and then add the comments
            "snippet": "${TM_SELECTED_TEXT/(.{25})(\\s*)(.*)/$1$3/g}",  
          }
        },
        // "removeSecondaryCursors"  // to exit multi-cursor mode
      ]
    }
]

Just hit Escape to exit multi-cursor mode (or add that command to the end of the macro).

like image 81
Mark Avatar answered Oct 01 '22 08:10

Mark


comment-aligner extension does this nicely

to setup a keyboard shortcut add the following to

Preferences: Open Keyboard Shortcuts (JSON)

{   "key": "ctrl+cmd+]",
    "command": "extension.commentaligner" }
like image 43
Machan Avatar answered Oct 01 '22 07:10

Machan