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.
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.
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.
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.
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:
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:
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;".
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:
If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).