The best atom packages for front-end developers

Love Atom? Are you a front end developer? Then read on as I share the best Atom packages for front end developers (Updated November 2018).

One of Atom’s best features is the ability to extend its functionality with new packages and themes created by its awesome community of developers.

I’ve been a huge fan of Atom since it was released three years ago. Created by the team at Github (now Microsoft), Atom is a free and open source text editor with out-of-the-box Git and Github integration.

Over the years, I’ve perfected my environment as a front-end dev, and one of the most important aspects of this is my Atom setup.

HTML Autocomplete

HTML Autocomplete package. This is an absolute must have for front-end developers.

On average, a typical front-end developer will spend four days a year typing out HTML tags in full.

Ok, that last statistic was made up, but you get my point. Every saved keystroke adds up to time that could be spent posting cat gifs in your company’s Slack channel.

This package will save you time, energy, and brain power. Get this package installed ASAP.

File Icons

Although I was kidding with that last statistic, you will be spending at least a couple of hours a day in Atom. As a result, you’ll want to dress it up a little.

File Icons does just that. It gives your tree view (left panel) a splash of color with a nice looking icon based on the file type. As a result, you’ll be able to easily distinguish your CSS files from your JS files, and so on.


Before using a linter, I was an O.K developer. I’d happily write JavaScript without any type of feedback mechanism for my syntax.

That all changed after I installed a linter. I noticed a huge increase in my skill, technique, and productivity.

A linter will flag up any syntax errors, bugs, and stylistic issues with your code as you write it. It catches any syntactic issues before your browser catches and reports them, saving you time and energy.  This is an absolute must-have for JavaScript developers.

The best thing about a linter is that there is a myriad of configuration files available to download, such as the incredibly popular Airbnb ES6 config.

Although there are multiple linter packages, Linter is my choice, and one of the best Atom packages for front end developers.

React.js Support

If like me you’re obsessed with React, you’re going to love this next Atom package.

Complete with handy React code snippets, syntax highlighting and autocomplete, React.js support is an absolute must for the React enthusiasts who use Atom.

Autocomplete HTML Entities

Although Atom comes with out-of-the-box support for HTML autocomplete, the Autocomplete HTML Entities package adds syntax support expected by a developer who writes HTML all day.

Prettier for Atom

Prettier is a code formatter, plain and simple. It’s opinionated, meaning you supply it with a configuration file, much like a linter, and it’ll format your code to that defined style.

If you’re a solo developer working on a hobby project, Prettier probably isn’t going to provide you much value. However, if you’re part of a team of devs, consistency in your coding style provide a lot of value to your team when you’re working on the same codebase.

So there you have it! My best Atom packages for front end developers. I’ll be updating this list when I add another tool to my Atom tool belt. In the meantime, don’t forget to subscribe to my mailing list to get the latest articles straight to your inbox.

💻 More React Tutorials
All React Tutorials

📬 The Monthly Upmostly Newsletter

One email a month, packed with the latest React tutorials, delivered straight to your inbox.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.