Tag: Code

Using Alignment Package in Sublime Text 3

It is nice to see the code if it is aligned well. Check out below example of aligning and misaligned code.

Mis Aligned Code

$data = array(
    'one' => 'One',
    'two' => 'two',
    'three' => 'Three',
    'four' => 'Four',
    'five' => 'Five',
);

Aligned Code

$data = array(
    'one'   => 'One',
    'two'   => 'two',
    'three' => 'Three',
    'four'  => 'Four',
    'five'  => 'Five',
);

I’m using the Sublime Text 3 (Unregistered). IMO it is best for the development. It has a lot of awesome features.

In this article, I’m explaining the Alignment package (It is in TOP 25 today).

Alignment Git Repo – https://github.com/wbond/sublime_alignment/

How to Install Alignment Package?

Just follow below simple steps:

  1. Press Command+Shift+P to open Command Palette.
  2. Type Install Package until you see Package Control: Install Package.
  3. When the list of packages appears, type Alignment until you find it.
  4. Press Enter to install Sublime Alignment.

Check out below GIF for reference to know How to Install the alignment package.

Now, Open the preferences file for Sublime Alignment:

Windows: Preferences > Package Settings > Alignment > Settings-User
Linux: Preferences > Package Settings > Alignment > Settings-User
Mac OS X: Sublime Text 2 > Preferences > Package Settings > Alignment > Settings-User

{
    // The mid-line characters to align in a multi-line selection, changing
    // this to an empty array will disable mid-line alignment
    "alignment_chars": [
        "=", ":"
    ]
}

Here, We have added the = and : So, When you select the code which include the = or : then it aligns with these characters.

How to Use Alignment Package?

Select the lines you wish to align. Press Ctrl+Alt+A (Windows & Linux) or Command+Ctrl+A (Mac OS X)

Check out below example to align the code.

BEFORE

$data = array(
    'one' => 'One',
    'two' => 'two',
    'three' => 'Three',
    'four' => 'Four',
    'five' => 'Five',
);

AFTER

$data = array(
    'one'   => 'One',
    'two'   => 'two',
    'three' => 'Three',
    'four'  => 'Four',
    'five'  => 'Five',
);

Check out the below GIF example for reference.