6 Best Atom Packages for Web Developers

6 Best Atom Packages for Web Developers

September 26, 2020 | 3 min read

Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Atom is a desktop application built using web technologies.

How to Install Atom Packages

When installing your first Atom package, it’s best to read the steps carefully. You will most likely learn them by heart and won’t have to use this list each time. Once you’ve selected the best Atom packages for you, here are two ways to install them:

Click on File > Settings. This will bring up the Settings View. Here, click on Install and type the name of the package you are planning to install. A shortcut for the Settings View is ctrl + ,(ctrl and comma) on PC and cmd + , on Mac. You can use the Command Palette in the same manner. Access it by pressing ctrl+ Shift + P on PC or cmd+ Shift + P on Mac. Type “install packages” here. Then you can use the Settings View as above.

Some packages come included with Atom by default. They are called Core Packages and can be disabled. It’s recommended not to disable them, though, because they influence the overall behavior of the editor. The other packages you’ll install will be listed under Community Packages.

A List of the Best Atom Packages to Install Right Away

Atom is versatile, and it would be a shame not to expand it with new features only a few clicks away. That said, there are over 8,000 packages out there and making a decision may be very difficult if you don’t know exactly what you want. To help you in your search, see our list of the best Atom packages below:

1. atom-beautify

The atom-beautify package will clean up your code and make it more readable. It has support for a variety of programming languages, including HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, and more. It will only beautify selected text if a selection is found, otherwise the beautify command ^ + + b, or typing “Beautify” from the Command Palette will beautify the whole file.

2. autoclose-html-plus

This autoclose-html-plus package automatically closes HTML tags for you once you’ve typed the first tag. Super simple to use, and unlike a few of the other auto close packages on Atom, this one is actually maintained and works.

3. Highlight Selected

The Highlight Selected package is super simple: it highlights the current word selected on double click. This is especially useful if you’re looking for a particular method name or function within a file without having to open the find panel.

4. File Icons

The File Icons package displays specific and meaningful icons next to files in your file-tree, fuzzy-finder, and tabs. They help to visually parse file types with little effort. You can choose between colored or monochrome icons.

5. Pigments

The Pigments package displays colors in project files, wherever it parses a color to be. It’s super helpful to easily determine what a specific hex code might be, especially if the color isn’t labelled by a variable.

6. Minimap

The Minimap package displays a Minimap preview of your file on the right hand side of your editor. You can turn code highlights on and off, as well as move the preview to the left-hand side if you wish. It also has a ton of other customizations if you want to dig deeper.