Sublime Text Editor Review with HTML Coding Tips

Posted on October 31, 2013 in Resources Category

As a  Web Designer, you know that time is very important. You always need to deliver your projects on the deadline specified by your client. Your code should be clean and fast written. We already tested some of the best editors such as Notepad++, PHP Storm, Dreamweaver, NetBeans, Microsoft Visual Studio and many others, but there is only one which complete all of these editors - Sublime Text.

What Sublime Text can do is amazing. This editor free to use, easy to use and comes in a very small size. Besides of this, he has a lot of features while others don't. Below we will review all the important functions and at the end you will know why to use Sublime Text as your main editor for HTML, CSS, PHP, JavaScript/jQuery.

Fast Coding & Editing

Sublime offers a large number of plugins, which you can install them fast and easy. By pressing CTRL+SHIFT+P you can type and search in real time what Sublime can offer.


By installing the Emmet Plugin (a new improved Zen Coding) you will dramatically save time when writing your code. With this plugin you can expand the name of a tag to a full syntax. There are available a lot of built in snippets for some languages.

For example if you'll write "div" and press Tab Key, the code will be expanded to:


If you want a much more complex syntax, you can add inside that div, an unordered list with 5 list items and some links with a demo text. Check below:


Another cool feature is the image tag. Just write "img", press Tab and the full code will appear. If you work local, you can select your image and navigate through folders, from a small popup window when you try to write the image source. If you are using a XHTML Doctype, image tag will be closed automatically and also image size attributes will be added. Check sample below:


If you want to know more and how does the Emmet Plugin works you can follow the links below. Documentation is well written and explained with example, so you can understand better what every option does.

Split Screen Up to 4 Windows

With Sublime Text you can have up to 4 screens to work simultaneously. You can either split screens vertically or 4 custom boxes. This is a great feature when you work together on HTML and CSS files.


Powerful Editing Options

Sublime has a lot of powerful editing features such as expand selection to line, to tag, to scope, to brackets. You can move and duplicate lines, indentation and more.


Toggle Comment to a selection.


Close opened tags and wrap selection with tag.



Multiple Cursors while Editing

The most awesome feature in Sublime Text is the multiple cursors. You can add another cursor by holding CTRL + Left Click. You can edit very fast multiple tags, classes or every word you want - possibilities are endless. Below you have an example:


Fast Encoding for Special Characters

If you have special characters such as "&" you can simply select the desired text to encode these characters. Just open the command palette by pressing CTRL+SHIFT+P, type Encode Special Characters and press ENTER. Check the sample below:


CSS Abbreviations

In Sublime there are available a lot of snippets. You can use text shortcuts also for CSS. For example if you type "w100" will convert to "width: 100px;".


Set Coding Syntax Super Fast

If somehow Sublime does not detect the coding syntax automatically, you can set it manually very fast using the command palette (CTRL+SHIFT+P):


And this is not all. There are still a lot of things that Sublime offers. You can download it, use it, make it your default editor as we did. First is hard to get used with another editor. Just try to use it every time on every project and you will see a lot of improvements.

For this tutorial we used the following plugins which are a must for every web developer:

  • Package Control
  • Emmet
  • All Autocomplete
  • AutoFileName
  • Color Highlighter
  • Show Encoding

Download Sublime Text

Related Articles
  1. Sean says:

    Nice article, thank you for the tips.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

− 4 = one

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.