Blog _

Improving Coding Efficiency Using Sublime Text and Emmet


Posted at 6:08 pm on November 19, 2016 by Cesar

When I first started coding websites, being the purist that I am, I thought that the best way to learn and practise HTML and CSS was to hand type every single line of code without any auto-complete functionality on my text editor. However, I discovered pretty quickly that coding up a website involved typing and retyping the similar boilerplate code and efficiency became my priority.

At this point I was using Notepadd++ for windows, and I still do occasionally find myself using it for quick changes to code. It is lightweight (opens fast without using up ram the way an IDE like Netbeans might) with syntax highlighting and auto-complete with many skins/themes available. I was happy, but I still felt that there must be a way to produce the necessary HTML and CSS code without having to type so much…..yep, I’m lazy.

…then I discovered Sublime Text and the Emmet abbreviation engine.

So lets begin with Sublime Text.

Like Notepad++, it is lightweight, with syntax highlighting, auto complete and many themes to choose from. It is also available for Windows, OS x, and Linux and although it isn’t technically free, it is free to download and try for as long as you like – occasionally, when you save a file, it will ask if you would like to purchase the licence but there appear to be no restrictions and the prompts are very few and far between (if you like the product, then buy the licence! ). You can learn about all its cool features from the website, It also has a HUGE number of useful plugins that you can install to help create an enjoyable coding experience.

The plugin that really has been a game changer for me is the Emmet plugin.

Prepare to be amazed…..

Once installed, if you wanted to add the basic starting boilerplate code for a new HTML project you literally type:

! followed by the tab key

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Document</title>
  </head>
  <body>

  </body>
</html>

and this is the result, as if by magic!

Now lets say you wanted a <div> tag with a class of “container” a nested <p> tag,

you simply type: div.container>p and hit the tab key like a maniacal wizard….

<div class="container">
 <p></p>
</div>

The plugin uses CSS like abbreviations to output the code you want but with MUCH less typing.

attaching a class to an element is done with a full stop like so : div.class

As you would expect, you can attach an id to an element with the #: div#id

use > to nest an element inside of another : div>p

use + to add multiple elements at the same level: div>p+a+img

use * to add multiples of the same statement: div>p*3 (this also works for phrases encased in ())

 

lets look at one more example – a navigator menu:

div.container>nav>ul>(li>a)*4

<div class="container">
 <nav>
  <ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </nav>
</div>

…And everything is perfectly indented.
And, as if that wasn’t enough – It also works on your CSS files!!

With CSS it is extremely intuitive, for example:

typing bg and tab:

background: #000;

…and the cursor will be left at the correct point for you to change the hex value.

There are no fixed abbreviations, I usually guess correctly. It really is that simple.

say you wanted to add 20px of top padding, try p-tp:20 or pad-t:20 or p-tp:20 or any similar combinations followed by tab

  padding-top: 20px;

And there it is – the single most useful Sublime Text plugin to speed up your coding!
If you found this useful, or you have other useful plugins that you would like to mention,
please leave a comment below.



Comments

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *