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 + ;).

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

Goto Anything A feature you will love: Goto Anything.

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

  • 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.

Page 1 Page 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.

Newsletter

20 Comments
  1. Valeriu May 1, 2:59 pm

    Great article Christian. I’ve been using ST2 for almost a year and I’s the most complete and powerful editor I’ve ever used.

    Reply
    +2
  2. William May 1, 6:12 pm

    Reading your article gave me the itch to try this editor. I’ve used a few, but never found one that I was really set on. I’ll take a look and hope it works as well for me as it has for you.

    Reply
    +1
  3. Vasi May 2, 12:17 am

    Update: Writing div.error for example gets you .

    Reply
    0
  4. Saya May 2, 3:39 am

    I didn’t know about it and downloaded the free version first

    Reply
    0
  5. john May 2, 5:21 am

    The Bad: :
    Auto complete/ intellisense — horrid
    The find in file (crtrl f) — sub par.
    Code folding — bad
    Bracket highlighter – bad
    Multi-syntax support – horrid (open some JavaScript inside a php file lol)

    Pretty much everything besides the mini-map, multi-select, and sheer crispy speed is done better , it’s a decent text editor don’t get me wrong, but an ide, not even close.

    Reply
    0
    • Valeriu May 2, 2:43 pm

      It’s still beta, is normal to have bugs.

      Reply
      0
    • at Oct 22, 8:04 am

      ctrl f? sub par? it allows you to search by regex! and you can do some amazing stuff with ctrl+d, ctrl+shift+l, etc. — its multiselection is quite powerful.

      Reply
      0
  6. Vadim May 2, 11:55 am

    Preview files without opening – it’s great!

    Reply
    0
  7. Bradley May 2, 3:22 pm

    Just started using Sublime 2 so this good timing to add a few extra add ons. Thanks

    Reply
    0
  8. Nelson May 4, 12:05 pm

    Things I like on sublime text 2:

    – Opens faster than my current editor (Komodo Edit)
    – Smooth scroll
    – Nice UI

    Things I don’t like:

    – No file / ftp explorer (serious backdown)
    – Doesn’t run on a single instance (Windows)
    – Every configuration setting is in a text file (horrible imo)
    – Paid-to-use beta

    Reply
    0
    • Christian Krammer May 7, 3:48 pm

      - No file / ftp explorer (serious backdown)
      The package “SideBarEnhancements” from Package Control gives you a fully-fledged file explorer.

      – Doesn’t run on a single instance (Windows)
      That Sublime Text 2 runs a single instance for every window is an advantage for me, so that I can easily switch between the windows in den taskbar.

      – Every configuration setting is in a text file (horrible imo)
      Yes, that every configuration needs to be done in a txt file is a bit inconvenient, but as soon as you have tailored it to your needs you presumably won`t need it anymore.

      – Paid-to-use beta
      Well, so far I didn’t notice that Sublime text 2 is actually a beta. Everything runs smooth and perfect for me. But that’s a point, right.

      Reply
      0
    • Sridhar Aug 28, 8:48 am

      “- Doesn’t run on a single instance (Windows)”

      Add

      “open_files_in_new_window”: false,

      in your user prefs file.

      Reply
      0
  9. cythux May 6, 9:17 pm

    http://www.sublimetext.com/dev is a higher Version and i like it to, when i use it not – I use Aptana Studio 3

    Very nice to is the plugin yui-compressor for compress js and css files

    Reply
    0
  10. david Aug 20, 4:16 pm

    Very useful article, thanks for sharing :) gotta say i loved it (st2) from the start, it’s really cool.

    Reply
    0
  11. saurabh Aug 22, 4:13 pm

    NIce article but it’s not clearly written which can be understood by newbie.

    Reply
    0
  12. n@ser Oct 2, 1:26 am

    Very useful article!

    I just install the pro version without any plugins yet and everything recommended works GREAT in mac!

    Thank You for your advice!

    Reply
    0
  13. danny Oct 13, 6:17 pm

    Hi, thanks for the article.
    I testing ST2 since one week now and i would like to buy it. Regrettably i was not able to find an Code-formatting-function like in Aptana Studio or Dreamweaver for example. Is there perhaps an extension for that?

    Reply
    0
  14. dave Dec 28, 2:15 am

    I love sublime text 2, best editor so far.

    Reply
    0
  15. Todd Dickerson Dec 28, 6:21 pm

    ZenCoding:
    ———

    This Zen Coding plugin is outdated and will never receive
    any updates in future. In two weeks the repo will be unpublished.

    Consider switching to Emmet — a re-branded Zen Coding project
    packed with new awesome features:

    Reply
    +1
  16. Gagan Janjua Jan 17, 1:35 am

    What is the color theme that you are using here ?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters