Top 5 packages to add to your Atom.io Editor

Developing a web application can be a daunting task to most beginning developers. How can we make sure that our code editor is helping us keep our syntax in check so we don’t forget a comma or semi-colon?

In my new favorite editor of choice, atom.io, there are packages(extensions) that we can install to make our developer life a whole lot easier. In this article I’m going to cover my top five packages that i use in atom.io.

  1. Emmet

Emmet is awesome. Writing html hasn’t been easier. Before emmet we were stuck with writing every less-than, forword-slash, and greater-than sign for every tag we needed.

<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>

Now that we have emmet, all the above code comes down to one line.

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

Simply amazing. Abbreviation use like the one above is just a fraction of what emmet can do. Check out their documentation for a full list of all its capabilities.

2. Browser Refresh

How can i make my development environment even faster? It’s a thing a beauty. Browser Refresh. If you work with a dual or monitor setup like me, you know the pains of taking those few seconds to mouse over and hit the refresh button on your browser to see the changes you just made. Today, that is all gone. With browser refresh you can set a key binding to a key on your keyboard so that when ever you push it your current browsers page will reset. I’m pretty sure this only works with chrome, firefox and safari but why would you want to develop in any other browser anyways. On Mac OSX, Chrome and Chrome Canary can refresh without stealing focus (optional). Firefox and Safari will steal the focus. For best results, just use chrome.

3. Pigments

Working in css, you have probably typed hundreds or thousands of hex color code. #ffffff for white, #121212 for dark grey and so on. With pigment we can now see a color circle next to the hex value to give us a representation of what hex color we just typed in our editor. If you have typed a few color codes in your css but just can’t remember which one was which, Pigments is here to save your day.

4. Eslint

For junior javascript writers like myself, it is easy to overlook some simple mistakes in our javascript code. Eslint helps us validate our JS code in realtime. No more pesky bugs in our code.

5. React

If your thinking about building your web app with react, grab the react package for atom.io. It will give you language support, indentation help, snippets, and auto completion.

I hope you enjoy my top 5 atom.io packages. If you know someone that can use these, feel free to share this article around. Have questions? Leave me a message on twitter. @FSDevNinja