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.
Also read: The Top Small Business Magazines
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
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> </ul> </div>
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 Chromeinspector. 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.
