Become a Faster Coder with Emmet and Snippets

Before we get into snippets, we need to download the emmet packages first; this allows the installation of snippets, text editor theme, spell check, or many more features, which enhance the coding experience greatly.

To download emmet packages,

simply open Sublime Text → Tools → Command Palette → type in Install Package and click → type in emmet, then let it load.

Or if you’re a Mac user, try [Command + Shift+ p], the install window will pop up.

Below are some useful emmet packages that developers often load onto their Sublime Text. These will be ready for download once you’ve load the Install Package first (follow the steps above), then type in the file names that you’d like to load in the search bar and they will show up for download.

  • emmet (for shortcuts like [ ! + tab ] in html, etc.)
  • Autofilename — Completion of image paths and urls
  • ColorHighlighter — For CSS colour previews.
  • Sidebar Enhancements — Better options when right clicking on a file in the sidebar

Here are some examples of the shortcuts from emmet:

Check out the emmet cheat sheet for more shortcuts!

After loading emmet packages, we can start to set up for our super handy snippets!

Download snippets such as:

  1. A compressed version of normalize
  2. A border-box snippet
  3. clearfix snippet
  4. setup snippet that includes all of the above
  5. jQuery CDN snippet

then place them into a specific folder;

go to Preference in Sublime Text → Browse Packages → Drag the snippet downloads into the User folder, then voila! We can start using our shortcuts now!

1. .normalize + tab

2. .bor-box + tab

3. .clearfix + tab

4. .setup + tab

5. .jquerycdn + tab

Show your support

Clapping shows how much you appreciated Tina Chang’s story.