11 minutes

The Definitive Guide: Sublime Text 2, a Code Editor to Love


You know, old habits die hard. Therefore I got stuck to the HTML editor Homesite ever since I started to design websites more than a century ago. I took a look at other editors here and there but always returned to my good ol’ buddy. It had almost everything I needed on my daily business. Okay, it lacked movable tabs, the file browser was pretty sluggish and some other minor glitches bugged me from time to time.

But I loved it wholeheartedly. Then, suddenly, things changed when I stumbled over an editor with great fame amongst developers: Sublime Text 2. First it was a big changeover from Homesite, but the more I customized it, the more I loved it. And what can I say, the affection has grown even more by now, and – sorry, Homesite – I have a new buddy now, and I won’t miss you too much.

Sublime Text Working with Sublime Text 2.

Getting to know each other

Sublime Text 2 is available for Windows, OS X and Linux at www.sublimetext.com/2 for free and can be evaluated as long as desired. If you fall in love with it just like me – and I bet you will, at least after reading this article – a relatively small fee of $59, – has to be paid to use Sublime Text 2 on as many computers as you want. And of course as long as you want, including unlimited updates.

Sublime Text 2 can be heavily customized and a multitude of plugins just wait for you to be used. But even in its basic form it is a very strong and well-provided programme. The first thing you notice when opening the editor will be its minimalistic interface. The code plays the lead role and almost the whole screen is devoted to it. But another important area on the right side should get some attention: the so called minimap which allows you to literally see your code from 10,000 feed away. You will never ever need the scrollbar again and can instantly browse through the currently opened file with ease.

Side by side

Another important area can be found at the left-most position, namely the sidebar, which is hidden by default (to show it press Ctrl + K, Ctrl + B / Command + K, Command + B). In its default state it only shows the currently opened files, but can be extended to a fully-fledged file browser (of which more later). But even without that Sublime Text 2 makes it a breeze to find and open files. Just hit Ctrl + P (Command + P), type a few characters and magically a list of all matching files gets displayed, even when not entered in sequence. Better recall its name: “Goto Anything”, which is incredibly useful and will be your single best companion. No more searching for that single file you can’t remember the exact name in a long, long list of other files. Even subdirectories are considered. But “Goto Anything” even offers more. Enter a colon (:) to jump to a line (shortcut: Ctrl + G / Control + G), with an @ all previously used methods are shown (Ctrl + R / Command + R) and entering a # allows you to search inside the document (CTRL + ; / Control + ;).

Goto Anything A feature you will love: Goto Anything.

However to even better work with projects in Sublime Text 2 there are two ways:

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website
  • File > Open Folder, which starts with the chosen folder as the basis for your work. All file operations relate to this directory, like “Goto Anything” and the Advanced Search.
  • Projects: Apart from the above-noted approach, there is also the neat possibility to combine your files and directories into projects. Just go to a folder like noted above, open some files and choose Project > Save project as to save the project file onto your hard drive. To switch between them just hit Ctrl + Alt + P (Control + Command + P). Previous projects can also be found under Project > Recent projects. As soon a file or folder within the project is changed or added, these changes are preserved when you close the project. Even the position of the caret gets saved.

Tag management

Another strength of Sublime Text 2 is its built-in, extra powerful auto-complete engine for HTML tags and CSS properties (and a ton of other languages), which will massively boost the speed of website development. Write a tag without brackets, hit Enter and it gets automatically completed, including the closing tag. For most of the tags, including the longer ones like <fieldset> or <textarea>, it suffices to type only a few characters. But things get even better. To get a tag with an attached class you only need to add dot (.) and the desired class-name. Writing div.error for example gets you <div class="error"></div>.

The same goes for IDs and the # sign. If you prefer to enter tags as normal with brackets, don’t matter about the closing one. Hit Alt + . (Command + Option + . ) and the programme adds it for you. At CSS things are similar: enter a few characters (even not in sequence) and Sublime text 2 shows a list of the suggested properties to choose from. Just like at “Goto Anything” you don’t have to enter all characters (even not in sequence): mt suffices to get margin-top, lh generates line-height, to name a few.

Auto Completition The auto-completiton of tags is very powerful.

Some other handy features:

Note: The first occurrence of the key sequence is for Windows/Linux, the second respectively the one inside the brackets is for OS X. Be kind with me, if the latter contain some errors, since I couldn’t test them (I run Windows 7).

  • Brackets: When entered they are auto-closed and the brackets of the current code block get highlighted (which also goes for the tag where the cursor currently is placed at). To jump to the matching bracket with in a block hit Ctrl + M (Control + M).
  • Indentation guides: The different levels of indentation are displayed using guides.
  • Commenting: Hitting Ctrl + / (Command + /) comments the currently selected line (with the right comment style for every language) and pressing it again removes the comment. For a whole block the key combination Ctrl+ Shift + / (Command + Option + /) does the trick.
  • Distraction free mode: The window goes into full screen and the code is centered in the middle (Shift + F11 / Control + Shift + Command + F). Everything else vanishes for a better focus.
  • Bookmarks: With Ctrl + F2 (Command + F2) you can add bookmarks and use F2 to jump to the next one.
  • Language support: Sublime Text 2 has built-in color coding and auto-completition for a wealth of different languages. The currently used one can be changed at the bottom right corner.
  • Different views: You can change the coding area so that it gets divided into columns (up to 4), rows (up to 3) or a four-part grid. That’s a very handy feature to edit a HTML file in one column/row and the related CSS file in another. It’s even possible to add an additional view of the same file in two different columns/rows to compare something or work parallel on two different parts. Select View > Layout from the menu and move it to the desired division.

Layout Sublime Text 2 changed to a layout with three rows.

  • Selections: There are shortcuts to select the current line (Ctrl + L / Command + L), word (Ctrl + D / Command + D), surrounding brackets (Ctrl + Shift + M / Control + Command + Shift M) and the whole tag (Ctrl + Shift + A / Command + Shift + A).
  • Encode special characters: That’s especially important for the non-english people with their, ös, üs and ás. Mark a code block, type Ctrl + Alt + P (Command + Shift + P), enter “encode”, select “HTML: Encode Special Characters” and the magic happens.
  • Tab switching: To switch between the open files (respectively the corresponding tabs) either press Alt (Command) + the number of the corresponding tab (with 1 for the first tab, 2 for the second, …) or Ctrl (Command) + PageUp or PageDown to toggle between them.
  • Paste and indent: To automatically indent the pasted code to the right indentation press CTRL + Shift + V (Command + Shift + V).
  • Multiple selections: Have you ever dreamed of having multiple cursors on the page to edit different parts of a file at the same time? Well, then you dream comes true in Sublime Text 2. Hold down Ctrl (Command) and click as many times as you want into the file. Now if you enter something the characters get entered multiple times.
  • Quick find/replace: This falls pretty much in the same category as above. If you want to quickly change all the instances of the same word/part in a file at the same time, mark the desired area, press Alt + F3 (Command + Control + G) and all of its occurrences get selected for parallel editing. That’s kind of a quick search & replace (which of course is also possible by pressing CTRL + H/Command + Option + F). By the way: Selecting a word automatically marks all of the same in the whole document. Press F3 (Command + Option + G) afterwards to jump between them.

For even more key combinations visit this Github site. You can find an extensive collection there.

Multiple When you select a portion of text all the same occurrences are automatically highlighted.

1 2
Christian Krammer

Christian Krammer is web designer at one of Austria's biggest Newspaper called "Kleine Zeitung" where he works for over ten years. He also is the proud owner of css3files.com, a comprehensive guide about CSS3. A large range of properties is explained there for you to learn and look up. Besides that he is married, the proud father of a 5 years old boy and passionate about movies and videogames.

Posts by Christian Krammer

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree