Guide To Having PhpStorm Use Windows Subsystem For Linux’s Git

I’m one of the rare Windows users at Automattic but thanks to the introduction of Windows Subsystem for Linux, my life is way easier. I can now run pretty much any Bash script without having to spin up a virtual machine like I used to have to. While it’s possible to build Node.js-powered projects natively under Windows thanks to the Windows-Build-Tools package, it’s a lot easier to just do everything within Linux. This is largely because building in one environment means that you can’t run the tools in the other environment.

The main time that this bites you is when the project you’re working on has a pre-commit hook in Git. If you build your project in Linux but attempt to commit from Windows, it won’t work. IDEs such as PhpStorm do all of their Git operations from Windows. This blog post will explain how to get it to use the copy of Git within Linux.

  1. Install Pageant from PuTTY or if you’re signing your commits, then Gpg4win (its gpg-connect-agent can be set to be PuTTY compatible). Have it start with Windows in order to load your SSH keys.
  2. Verify that the agent is working by using PuTTY to connect to with the username git. GitHub won’t let you open a shell but it’ll let you know that you have successfully authenticated. Note that command line ssh won’t work because it’s not Pageant-compatible.
  3. Install weasel-pageant to allow you to use SSH keys from within Linux.
  4. Verify that the agent is working by running ssh-add -l in Linux. Your key(s) should be listed.
  5. Verify SSH is working by running ssh If it doesn’t work, append -vvv to the end of the command to enable debug output to see what’s wrong.

Now that you have Git authentication working within Linux, it’s time to get PhpStorm (or whatever IDE you use) to use Linux’s Git.

The trick here is instead of having PhpStorm use git.exe, you need to point it at a batch script. This Stack Overflow question helped me a ton, but I needed to modify it a little bit.

For whatever reason, my .bashrc file wasn’t being loaded when calling bash.exe -c which meant that agent wasn’t being loaded. So as a part of my batch script, I’m manually loading my personal file that contains my shell customizations. Here’s my full batch file:

@echo off
setlocal enabledelayedexpansion
set command=%*
set find=C:\Users\%USERNAME%\AppData\Local\Temp\git-commit-msg-.txt
set replace=/mnt/c/Users/%USERNAME%/AppData/Local/Temp/git-commit-msg-.txt
call set command=%%command:!find!=!replace!%%
    C:\Windows\sysnative\bash.exe -c 'source ~/.viper-common; git %command%'
) Else (
    bash.exe -c 'source ~/.viper-common; git %command%'

In PhpStorm, go to File → Settings (or Default Settings) → Version Control → Git and set the “Path to Git executable” to point at the batch file. Verify that it works by clicking the Test button.

With that, everything should work now!

Questions? Problems? Leave a comment below.

Ideal WordPress Plugin Development Using PhpStorm 8

The upcoming PhpStorm 8 features built-in WordPress support, as explained in this support document. However what’s the best way to set up your WordPress install in order to write plugins? Here’s my personal answer — feel free to suggest alternatives in the comments section.

When working on a WordPress plugin, you don’t want functions, classes, variables, etc. from other plugins to leak into your current plugin through auto-complete or other types of automation. For this reason, I suggest avoiding opening a whole WordPress checkout with all of your plugins inside of it using PhpStorm. At the same time, you don’t want to have a separate copy of WordPress for each plugin that you work on. This is redundant and makes keeping WordPress up to date harder.

So instead do a single checkout of WordPress to its own folder and then define WP_PLUGIN_DIR and WP_PLUGIN_URL, as described on the Codex, so that your plugins folder will live outside of your WordPress folder. This way you can open and index the WordPress folder without getting all of your plugins along with it.

Now create a new project for each individual plugin. When doing so, you’ll want to add the WordPress folder as an include path in PhpStorm, as described in their documentation.

All of this will result in only your individual plugin’s folder showing up in PhpStorm but with WordPress showing up under the “External Libraries” list. This one WordPress install can be used in your browser to test all of your plugins but the plugin codes won’t overlap.

Portable PhpStorm

I use PhpStorm to write all of my code for my job at Automattic. It’s an amazing IDE and has made me so much more productive.

However I am an outlier at my company in that I use two different computers rather than only a laptop — my powerful desktop with a big screen at home and my super portable ultrabook laptop when on the go. In order to keep my working environment identical on both machines, I install all of my work applications in portable mode. That is they store their configuration options in files alongside themselves rather than in my user directory or in the computer’s registry. This allows me to keep the applications stored on Dropbox which in turn keeps them synced between my two machines.

PhpStorm by default stores your configuration settings in files inside of your user directory. This is ideal for multi-user machines where each user should have separate settings. This however doesn’t apply to me. So how do you get PhpStorm to store those settings somewhere else?

After installing PhpStorm inside of your Dropbox directory (I have a “Programs” folder for these kinds of things), you need to go into the bin folder inside of PhpStorm’s directory and then open up the configuration file in your favorite basic text editor such as Sublime Text or even just Notepad.

EDIT: You don’t even have to install it. If you take the direct download link and swap out .exe for .zip, you’ll get a ZIP file containing all of PhpStorm. You can then extract it to your Dropbox. I’m sure the process is something similar for Mac users.

At the top of the file you’ll find some commented out that have values with ${user.home}/.WebIde/ in them. You need to uncomment these lines and then replace ${user.home}/.WebIde/ with something like ${idea.home}/prefs/ which will instead store things inside of a “prefs” folder inside of your PhpStorm folder.

Lastly you should probably copy the contents of your old .WebIde folder (instructions to locate it can be found here) into the new location so that you don’t lose your existing settings.


Google Maps For iOS Is Amazing

The new Google Maps app is simply amazing, by far the best mobile map app that I’ve used even if you take accuracy off the table. I used it this morning and its vocal driving directions are actually better than Apple’s app. They give more detail in road names and things like that and honestly I think the voice is better and more natural too. If you have an iPhone and haven’t tried it out, you really need to. The Verge has a good write-up about what’s new.

Calling iPhone App “Gas Cubby” Users — I Need Your Help!

Do you use Gas Cubby on your iPhone? If so, would you mind helping me out by sending me an export of your data?

I’m writing a new WordPress plugin that will allow you display data similar to Gas Cubby’s data on your website. You’ll have the option to manually enter gas fillups and such, but you’ll also be able to import from the Gas Cubby app. I’ve been using my data as a test and it’s working great but I’d appreciate being able to use a larger sample size.

If you’d like to help me out, here’s how:

  1. Open up Gas Cubby and press the left arrow until you get to “All Vehicles” shown at the bottom.
  2. Tab the magnifying glass in the upper-left so that it says “Search” at the top.
  3. An “Export” button will now be shown in the upper-right. Press it.
  4. An e-mail prompt will show up. Send the e-mail to “gascubby” at this domain (

While there isn’t really any personal data in the export file other than perhaps your gas station location if you fill that in, I still promise not to share this information with anyone. I’ll only be using it for testing in my local machine’s WordPress installation.


Sublime 2: Open New Tabs On The Right

One of the few things that bugged me about my favorite text editor, Sublime 2, is that new tabs would open up next to the current tab instead on the far right. Since I usually have about a half-dozen tabs open at once, this made keeping them in a sane order frustrating.

Thankfully Stylishmedia has written a simple little Sublime 2 plugin that makes new tabs open on the right side. Perfect. 🙂

Two Handy Sublime Text 2 Plugins

After using EditPlus for the better part of a decade, I made the switch to the totally awesome Sublime Text 2 text editor a few weeks back. One of the great things about Sublime is it’s support for plugins.

Two such plugins I’d like to recommend are SublimeBrackets and SublimeTagmatcher. Both improve how the highlighting of opening and closing items are handled.

By default, Sublime just underlines paired brackets. When you have a ton of code, this can be really hard to see. SublimeBrackets changes this to something more apparent:

Much better, right? I personally use the solid background green style.

SublimeTagmatcher does something similar but for HTML tags. When you have your cursor inside of an HTML tag, it will highlight both the current tag and it’s opening or closing counterpart. This is helpful for making sure you have the correct number of opening and closing tags.

Restoring “http://” To Your Firefox Address Bar

Lifehacker has a great article on how to stop Firefox from greying out everything but the domain name in your address bar. While I personally don’t mind it and infact think it’s a great anti-phishing feature for the average user, one thing I don’t like is the removal of the protocol, i.e. http://, from the beginning of the address bar. I know they’re trying to conserve space, but screen real estate is not something that I am lacking.

So here’s how to once again show the protocol in your Firefox address bar:

  1. Type about:config into your address bar to access a list of Firefox configuration options that are not exposed through a normal settings panel.
  2. Paste browser.urlbar.trimURLs into the search box to find the parameter we’re going to change.
  3. Right-click the row and select “Toggle” to change the value from true to false.
  4. Close the tab and go back to a normal tab, such as this blog post. You should now see the protocol in your address bar once again.