The Best Atom Packages for Web Developers

October 25, 2019 | by Marc Bacon

You are already using Atom as your primary text editor for development? Good. Here are the best Atom packages available.

In all of my web development education, the editor of choice was Adobe Dreamweaver. I was actually using Dreamweaver in the early 2000s when it was still owned by Macromedia. I was a loyal Dreamweaver user, up until around 5 years ago when I started looking for an alternative to the bloated software. Eventually, I stumbled upon Atom as a free text editor and have not looked back.

The experience that Atom provides is great and the extendability is even better. Users can install extensions or plugins called “packages” for Atom (for free) that extend the functionality. There are thousands to choose from, but here are my favorite Atom packages that I use every day.

My List of the Best Atom Packages

1. Emmet

Emmet is pretty much the best power tool for anyone who is developing websites. People who look over your shoulder will think that you are an actual wizard as you utilize the amazing abbreviations to write code quickly.

2. Highlight Selected

Highlight Selected will highlight all versions of any string that you have selected. It makes looking for multiple instances of a variable incredibly easy.

3. Pigments

Pigments is a package that makes it easier to manage colors in your styles. This package is that it highlights color values in your code so that you can see what each color is at a glance. It makes it really easy to parse through files.

4. Autoprefixer

Autoprefixer will (as the title implies) auto prefix your CSS and SASS files. It has an option to run on save that I use. I never have to worry about prefixing my code or forgetting to run a task runner for quick changes.

5. Filesize

Filesize is an incredibly simple package for Atom. It simply displays the size of the current file in the status bar. I like having this quick to reference.