Atom from Github is rapidly becoming the text editor of choice with front end developers nowadays possibly because it's been developed with technologies we are familiar with such as HTML, CSS and JS, possibly because of it's similarity to Sublime Text. But also because it's easy to develop for ad add new plugins to. Here are the top 6 plugins I believe every front end developer should have.

Sass syntax highlighting

I'm sure you've got this or an equivalent already if you're a user of the popular Sass preprocessor, but this is one of the best ones I've found out there.


This plugin greatly improves the speed at which you write html and css by typing in simple abbreviations followed by the tab key such as #page>div.logo+ul#navigation>li*5>a{Item $}. I haven't successfully got this to work with Sass, but I know there is a way.


Vanilla Atom doesn't come with a mimimap of the code on the right of the page similar to Sublime Text. This plugin does a brilliant job of replicating that.


I don't know about you but I can't look at a hexadecimal string and tell you what colour it is, that's exactly what this plugin does. Pigments is really useful when skimming through CSS to figure out that element is being styled based on it's colour.


To be honest, I don't spend the majority of my time in CSS and HTML, but whenever I do use javascript I've found this to be a great realtime linter. Not because of it's linking of ES5 and 6, but because it sticks to the Javascript code style I'm used to, and we're made to use it at work ;)

Git Plus

I've never been a fan of GUI git commends (no offence Tower) because they're unable to do everything I can do in the terminal. Git Plus is great for quick commits and pushes of code. I still fix my merge conflicts in the terminal though.

3,572 0 1