December 12, 2013

Top 3 Sublime Text Plugins

If you’re a developer, I don’t need to tell you about the importance of taking steps to maximize the efficiency of your workflow. And if you’re anything like me, your always looking out for the next best thing to come along and do just that. Luckily for you, you’ve stumbled on a small gold mine here, if you’re not familiar with Sublime Text.

If you haven’t already tried Sublime text, you can do so by downloading it now. It’s free to use for as long as you want, but well worth the price tag if you plan on using it regularly and want to block the pop-up notifications. It is a feature rich editor that plays host to many third-party plugins, making it a popular editor of choice for seasoned and new developers alike. Today, we’ll focus on 3 great packages that will help speed up your workflow and allow you to get more done in less time.

You’ll need to install Sublime Text’s Package Control in order to gain access to the plugin repository for Sublime Text. Once package control is installed, you’ll have access to all the available plugins for Sublime Text. To Access them, press (Command-Shift-P) and type in “Package” on “install” until you see the “Package Control: Install Package” option, click it and begin to type the name of the plugin you’re looking for. That’s it.

Top 3 Packages for Speedy Development

SFTP Access

Accessing the files stored on your server doesn’t have to be a chore. Whether you use access them directly by logging into the server, use an FTP program to download / upload the files or some other method, you must have thought to yourself at some point “There must be a better way”. Well, let me introduce you to the SFTP package offered in Sublime Text 2 or 3.

The SFTP package allows you to work off of a server directly or you can map a local folder to a remote folder. You have the ability to open, edit, create or rename files from right within the code editor interface and see the changes reflected on your server instantly. Using SFTP through Sublime Text has increased the speed and efficiency of my day to day workflow significantly and I bet it would do the same for you too.

Setting Up Sublime Text SFTP

To get started with Sublime Text SFTP, you’ll need to make sure you have SSH enabled on your hosting account. You can install the SFTP package through Package Control by typing: ‘Commaind-Shift-P’ and type in “install” or “package” until you see “Package Control: Install Package”, click it and search for “SFTP”. Once installed, you’ll need to plugin your server information into the configuration file, you can set up a new server by typing ‘command-control-r + b’ (This is also how you access the files on your server from within Sublime Text). If you need help setting up the SFTP package, you can follow the instrucitons provided here.

You’ll immediately notice an increase of speed in your workflow by using SFTP for Sublime Text. It may take a few minutes to catch on to how it works, and the keyboard shortcuts, but in the end it is well worth it. Now that you’re editing, creating and saving files from the Sublime Text interface, why not harness even more of the power within Sublime Text?


Emmet is a useful package that makes writing code a breeze. Let me demonstrate. The snippet of code:

	<div id="page">
	    <div class="logo"></div>
	    <ul id="navigation">
	        <li><a href="">Item 1</a></li>
	        <li><a href="">Item 2</a></li>
	        <li><a href="">Item 3</a></li>
	        <li><a href="">Item 4</a></li>
	        <li><a href="">Item 5</a></li>

The snippet of code above would take a little time to write out manually, but with Emmet, you could get the same result by just typing:

	#page>div.logo+ul#navigation>li*5>a{Item $}

Press ‘tab’ and that one line of code transforms into the block above. Pretty cool right?

Emmet also works with CSS, making it quite a handy and time saving tool in any developers arsenal. For a full list of the features Emmet provides, check out the website.

Emmet LiveStyle

If you’re anything like me, writing css usually involves a lot of copy and pasting from the Google Chrome inspector into a .css file. This is because it is a great way to see how the changes will look before you actually save them in the stylesheet. However, it takes up a lot of extra time and is unnecessary thanks to Emmet LiveStyle. With Emmet LiveStyle, you can actually save the changes you make in the Chrome inspector to your stylesheet without copying the new styles. How does it work? Emmet LiveStyle requires a Chrome extension, which allows you to pair the style sheets loaded in the browser with those you have opened in Sublime Text through a new tab in the Chrome inspector. It then updates the files in Sublime Text in real time as you edit the css properties in the Chrome inspector. All you need to do is press “Command+S” to save the changes in Sublime Text SFTP once you’re satisfied with how it’s looking in the browser.

A few things to note when working with Emmet LiveStyle:

  • You need to keep the inspector open in the browser while working on the .css file.
  • If you type a css property in the inspector, you’ll need to delete it (not un-check it) so that it is also removed from the .css file that you have opened in Sublime Text.

Hopefully you can benefit from these Sublime Text packages and take your productivity to new heights.

Do you care to share some of your favourite Sublime Text packages with us? Post them in the comments below.

Filed under:  Tutorials Web Development

Dylan Dunlop

When he isn’t honing in on his coding skills, Dylan’s either mastering various styles of guitar playing or bird watching.
Leave a comment
comments powered by Disqus

Base Terminology

SEO is the process of affecting the visibility of a website or a web page in a search engine's un-paid ("organic") search results.
The semantic web refers to the next stage of the world wide web and aims to ascribe semantic meaning to all web content through a collection of systems of classification. This means that, in the future, machines will be able to better understand the content we produce, resulting in better search results, new applications and an Internet that is fundamentally different from the one we use today!
What if each of the objects around you had a unique identifier that can be connected to the Internet? The goal of the Internet of things is to equip all objects in the world with tags that allow them to be digitally organized or manipulated. The implications? Less theft, less waste and the ability to control your surroundings in a manner never before possible.
Conversion optimization is the practice of modifying the parameters of a lead-generating system to stimulate a higher success rate as defined by goals. Most conversion optimization is structured to create an increase in ROI (return on investment). We frequently use multivariate and A/B split testing when optimizing conversion, wherein we test two or more systems at the same time, analyze their performance and deduce precisely what action items will bring us closest to the set goals in the least amount of time.
Market diagnostics or analytics is the process of collecting and analyzing business data — especially consumer data. This allows us to assess and improve the effectiveness of a marketing campaign.
In many applications today, there is such a phenomenal quantity of data available that it's difficult to collect and process with traditional database tools. The field of collecting, manipulating and drawing conclusions from massive quantities of data from a particular source is known as big data.
What started as a CMS (content management system) that was only meant to create and edit blog content has grown at a tremendous rate to become the most ubiquitous system for developing websites on the internet. WordPress accounts for an incredible 15% of all sites on the web.

RT @RikerGoogling: galaxy class starship keeps rebooting

1 day ago

RT @AWWWARDS: The DOs and DONT's of SVG for Designers #SVG #WebDesign #WebTips

1 day ago

RT @PicardTips: Picard management tip: Do your best to learn about and comprehend the experiences of people who look very different from yo…

2 weeks ago

Request Our Portfolio

  1. Which option best describes you? *

  2. Are you a key decision maker in the business you represent? *