Web Dev 101: Make Your Code Editor a Productivity Powerhouse

In my very first post in the Web Dev 101 series I foreshadowed a post with tips on making the most of your text-editing software. Welcome to that post. Let’s take a look at how beefing up your text editor with useful plugins can make your job as a developer easier and more intuitive.

What are Plugins?

Plugins—also known as “packages”—are additional code files that can be added to your text editor (i.e. they don’t come pre-installed) to add some new feature or functionality. Plugins are usually developed by particularly dedicated users of the application (a.k.a. the community).

From the list of text editors I provided in the original post, both Sublime Text and Atom support plugins. Sublime is my code editor of choice, so that’s the application we’ll look at as an example in this post.

Why Should I Use Plugins?

Simply put, you should use plugins because they make your life a whole lot easier. Plugins can do everything from reducing the amount of code you have to type to providing the functionality of other applications right from within your text editor. And, in the case of Sublime and Atom, most of the plugins are free. So a better question might be, “Why shouldn’t you use plugins?”

Sounds good. Now How Do I Install Plugins?

Good question. For Sublime, installing a plugin is as simple as downloading a file into the appropriate folder. But why manually copy files when there’s a plugin for that? It’s called Package Control and it makes searching for and installing plugins a cinch.

Of course, Package Control must also be installed first. To do that, head to the handy installation instructions provided by Package Control. On that screen, choose your version of Sublime and copy the code provided.

Then, inside Sublime, press  + ` (Windows: ctrl + ` ) to open the Console. Paste the copied code inside the text box and press enter. Package Control will be installed. When finished, restart Sublime.

To install a plugin, simply press  + P (Windows: shiftctrl + P) inside Sublime to open the Command Palette. Start typing “Package Control: Install Package” and press enter. A new dialog will appear with a search bar and an alphabetized list of all available plugins. Choose the plugin you want to install and press enter.

For Atom users, Atom provides a very thorough guide to installing plugins in their application.

What Plugins Should I Install?

I’m so glad you asked. As with many topics in web development, the plugins you “need” to install will vary depending on the project you are working on, the coding languages you use, and your preferences as coder. You can search all plugins available for Sublime on the Package Control website.

Below is a list of the plugins I personally use when working inside Sublime.

PHP Completions Kit

This plugin provides auto-complete capabilities for PHP syntax, saving you time and keystrokes.

SCSS

This plugin provides syntax highlighting functionality for SCSS files inside Sublime. It’s a must for developers who frequently code in SCSS like I do.

View in Browser

This handy plugin allows users to create a keyboard shortcut that opens the current file in the web browser of your choice. This saves from having to locate the file on your system and then manually opening it to see how your code renders. You can also set a specific key combination for each browser installed on your machine.

Emmet

Emmet is possibly my favorite plugin that I have found so far for Sublime. It lets you type simplified code similar to CSS syntax that can then be expanded into full, well-formed HTML. It can also be used to shorthand CSS rules. It even has a lorem ipsum dummy text generator built in. It’s a powerful little plugin that has already saved me so much development time. Learn more about everything Emmet can do to save you keystrokes with their documentation or the (admittedly overwhelming) cheat sheet.


Plugins are a quick and easy way to expand the core functionality of your text editor and customize it to fit your needs as a developer. Leverage a combination of the countless plugins available to shave precious time off your next web project.

Experienced coders: What plugins have you found that you use to make your development job easier? Comment below to share your insight.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s