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

Keyboard shortcut/aliases for the WP CLI, Git, Grunt & PHPCS commands for windows

In development, We spend a lot of time on the command line. We type a lot of commands on regularly.

I have created a shortcut for the most of the commands which I use on a daily basis some of them are below:

WP CLI

Command Keyboard Shortcut/Aliases
wp theme list wpthl
wp plugin list wppll

Check all the available WP CLI commands etc. (all WP CLI commands list)

Example 1. Using shortcut wpthl instead of wp theme list

Example 2. Using shortcut wppll instead of wp plugin list

Some more commands with keyboard shortcuts/aliases are below:

Grunt

Command Keyboard Shortcut/Aliases
grunt release grr
grunt minify grm

PHPCS

Command Keyboard Shortcut/Aliases
phpcs pb
phpcbf pbf

Git

Command Keyboard Shortcut/Aliases
git add . gaa
git commit –message gcm
git checkout gco
git pull origin gpu
git push origin gpp
git status gs

To create keyboard shortcuts using aliases is very simple. We can create any command shortcut/aliases.

Follow below simple steps:

  1. Open the file .bashrc which is found in location  C:\Users\USERNAME\.bashrc and
  2. Add below sample commands of Git & Grunt.

I found the article Terminal/Bash Command-Line Shortcuts with Aliases written by @jonsuh to create keyboard shortcuts for the Terminal/Git Bash.

I have added some more commands of Grunt, WP CLI & PHPCS on my local environment.