Love Atom? Are you a
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 package. This is an absolute
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.
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.
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
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
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.
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 is a code
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.