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.
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 + ;).
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 asto 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.
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
<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
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
line-height, to name a few.
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
F2to 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 > Layoutfrom the menu and move it to the desired division.
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
+the number of the corresponding tab (with 1 for the first tab, 2 for the second, …) or
PageDownto 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
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
Command + Option + G) afterwards to jump between them.
For even more key combinations visit this Github site. You can find an extensive collection there.
When you select a portion of text all the same occurrences are automatically highlighted.