Getting the most out of Sublime Text 2

Some cool tips that explain how to add in extra packages for LESS and Grunt support.

I've been using this for a few weeks now and cancelling off the nagware requesting me to purchase as to be honest I've not really felt like it will be the one for me in the long term. Coming from Visual Studio has left me with a lot bigger expectations of what my IDE should be and Sublime is only really a fancy text editor.

sublime-grunt-nagwear

Turns out the plain vanilla install is missing a lot of packages, including the package manager itself!

Mac/Non-Windows Users

You might be able to follow along with this guide if you want but it's untested. These are the experiences I have had setting up Sublime 2 on Microsoft Windows 8.1.

Package Control

The first thing you need to do is to visit the Package Control package and install it with their easy to follow guide:

You will need to restart Sublime a couple of times so that it can install each of its parts but once you're up and running you will have a new option under Preferences > Package Control.

The sexier way to use this though is through the Command Palette. If you're not using this feature regularly then you're missing out on one of the big plus points of Sublime. Press CTRL-SHIFT-P to activate it and you get a search box like this:

sublime-grunt-commandpalette

It will let you get to every facet of the editor, all the commands and screens and everything. So type:

pack

and you will see the package control options, once you have a partial match you can start typing the next thing you want to filter it down to. Finish off the command so that your Command Palette says:

pack inst

Pressing enter will flip you over to the package installation browser.

Less Syntax Highlighter

The first one I wanted to install was LESS syntax highlighting. Type LESS and press enter and it will install a LESS syntax highlighting package.

Now when you open up the files it wont use the slightly-broken css formatting which used to get confused with the variables and mixins. If your code still looks messed up then you have probably previously set that file to use the CSS syntax highlighting. In that case:

  1. Open the file in question
  2. Press CTRL-SHIFT-P (each time you see this, use Cmd+Shift+P if you're on a Mac)
  3. Type LESS
  4. Selecting enter will now update the formatting rules for that file

Grunt Support

Instead of opening your command window each time and having to CD to each project folder and execute grunt watch you can do this from within Sublime.

  1. Press CTRL-SHIFT-P
  2. Type pack inst.
  3. Press enter.
  4. Type Grunt
  5. Press enter to install the package

Now in theory you can control grunt from within sublime but it didn't work out for me. Try this:

  1. Press CTRL-SHIFT-P
  2. Type Grunt

You might see this error:

sublime-grunt-cantfindgruntfile

My gruntfile is in the theme folder but when I'm working on WordPress I add the whole WP install in to the folders view of Sublime so I can easily get to any file I need to. It says that it searches the folders for your gruntfile but it doesn't seem to. Maybe it's just nested too deep.

You're supposed to be able to configure which folders it should look in. In the settings page it explains how to set up additional search paths:

For me, it seemed no combination would work so in the end and there is an open issue addressing this on github:

I found a tip that solves this issue for the moment though. You can add in more than one root folder into the project and that folder can also already exist in the project. So in Windows Explorer just navigate down to the folder that contains your gruntfile and drag it on to the Folders panel. The gruntfile will be found then.

I actually got mega distracted by this issue trying to figure out what path I was supposed to enter that I eventually solved the bug and created a pull request. At the time of writing I'm still waiting to hear back if it will be accepted. It's the first piece of Python I've ever written so it could go either way. In the mean time you can solve this issue adding the second folder to your project as mentioned in the paragraph above.

OK, now back to using this plugin! Open the Command Palette and type grunt, if your project has more than one gruntfile it will ask you which file you want to use, pick your main one, not the ones included in various vendor packages:

  1. Press `CTRL-SHIFT-P`
  2. Type Grunt
  3. Select the gruntfile
  4. Type watch and select that job

A new panel will open along the bottom of the screen. It puts Sublime into a constant build state and that panel is the build output panel. Go ahead and change one of the LESS / JS files that your project is using and save it. As you press save keep an eye on the build panel and you will see the results of Grunt processing your gruntfile.

If you lose the window you can get it back using Tools > Build Results > Show Build Results.

For me, the first time it generated a file the results went off the bottom of the build panel and it didn't display them.

Scrolling to the bottom of the window seems to make it stick and future output was shown fully.

sublime-grunt-buildpanel

Ok so these two packages should be enough to improve your coding experience significantly. I’m going to reappraise Sublime Text now with this in mind.

Let us know in the comments below if you have any Sublime tips or if you have a recommendation for a better PHP / WordPress code editor?

No comments :