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.

Advertisements

Author: Mahesh Waghmare

I'm a professional WordPress theme/plugin developer since 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.