Web Development using the Sublime Text 2 code editor

I’ve recently just changed my IDE (Integrated Development Environment) for website development from Eclipse (Windows) or Coda (Mac) to Sublime Text 2 and thought I would write a post detailing why I made the switch and the features I use on a regular basis in Sublime Text 2.

What Is Sublime Text?

Sublime Text 2 is a lightweight text editor that was built for speed and ease of use. It has thousands of open source plugins that you can install and use and there is a massive community of developers all doing what they can to contribute new plugins for Sublime Text.

Sublime Text 2 can be used for multiple languages from web development to software development. I’m just using Sublime for web development so I’m going be talking about how easy it is to use for PHP development.

We all know about IDE’s and how they make it easy for development, well sublime can do everything they can do, so what makes it different?

Features of Sublime Text 2

Cross Platform support

One thing I love about Sublime Text, is its availability for Windows, Apple Mac and Linux platforms. As a developer there is nothing worse than having to use different code editors on different operating systems. I used to use Eclipse PDT on my Windows machine and Linux machines and it worked really well (it was quicker on Ubuntu Linux) but when I tried using it on my Macbook I found it to be slow and unreliable. This forced me to have to use Coda 2 on the Mac and I would always get caught out when using keyboard shortcuts in the wrong editor.

Go to anything panel

Sublime Text 2: Go to anything panelSublime text has a feature called the, ‘go to anything’ panel that allows you to search for files, file variables, functions, class methods and you can even use it to navigate to a certain line in your current file. It uses the concept of fuzzy searching which makes it easy to find what you’re looking for.

You can access the Go To Anything panel by using the keyboard shortcut Ctrl + p, this will open a textbox at the top of the screen. As you type into this textbox Sublime will search for all files for the file name you type in. This makes it so quick to find the file you are looking for, you don’t need to know the folder structure of application just the name of the file.

Create your own code snippets

This is a feature I got used to when I used Coda on the Mac. Navigate to Tools -> New Snippet, a new window is displayed with the default code snippet placeholder which you will replace with what ever you want. You write a placeholder for the snippet which means you can define where variable names are expected to be placed. The advantage of this is that once you call your snippet and press tab the cursor will move between the different variable placeholders.

You can define a name and a new keyboard shortcut for each new snippet to make it even easier for you to access from the editor. When you save a new snippet the autocomplete feature will now be populated with your snippet name, when you start typing in the name of the snippet the autocomplete will make it easy for you select your new snippet.

Packages

One of the features I like in Sublime Text is the ability to install and use additional packages to add functionality to the editor. The first package you need to install is the Sublime package control. This allows packages allows you to install/remove other packages directly inside Sublime Text.

To install new packages bring up the Command Palette (Command+Shift+P on OS X, Control+Shift+P on Linux/Windows). Select “Install Package” and press enter – this will load the latest packages that can be installed. Once the package list has loaded, simply start typing the name of the package you want to install and press enter to install. You may have to restart Sublime Text for the package to be available and some packages need to be configured before they can be used.

Keyboard Shortcuts

All of the sublime text 2 keyboard shortcuts are located in Preferences -> Key Bindings Default. Here’s an example of some of the keyboard shortcuts you can use inside sublime.

  • ctrl+k, ctrl+b – Toggle the sidebar
  • f11 – Toggle Full Screen
  • shift+f11 – Toggle Distraction Free
  • alt+. – Close Tag
  • ctrl+p – Show the go to overlay panel
  • ctrl+shift+p – Show the command overlay panel
  • ctrl+alt+p – Show the project selector panel
  • ctrl+r – Show the go to overlay panel default to method selector
  • ctrl+g – Show the go to overlay panel default to go to line selector
  • ctrl+; – Show the go to overlay panel default to variable selector
  • ctrl+shift+up – Swap with the line above
  • ctrl+shift+down – Swap with the line below
  • ctrl+/ – Toggle a comment
  • ctrl+shift+/ – Toggle a comment block
  • ctrl+shift+d – Duplicate a line
  • ctrl+` – Display console panel
  • ctrl+space – Auto complete the current selected snippet
  • ctrl+k, ctrl+u – Toggle upper case
  • ctrl+k, ctrl+l – Toggle lower case

If you want to add your own keyboard shortcuts or override the default shortcuts you should use the user specific keyboard shortcut file, which can be found in Sublime Text -> Preferences -> Key Bindings User.

Leave a Reply