In this article, we dig into 12 of the best Atom packages for web developers. Atom has plenty of competition – including Visual Studio Code and Sublime Text – but it still holds its own as a popular and competent web development tool.
Why use Atom Editor?
VS Code may have won the hearts and minds of web developers over the last few years, but GitHub’s Atom editor remains one of the better and more skilled code editors on the market. Reasons to like it a lot include:
- installers are available for Windows, Mac and Linux
- it has been continuously updated over the last decade
- the speed has improved after some criticism of the first releases
- it is still free to download and use without restrictions or nag screens
Microsoft bought GitHub in 2018, so the company now has two good electron-based code editors. The long-term future of the atom is likely to be in doubt, but developments continue. If you are looking for a new code editor – perhaps after Adobe abandoned the Brackets – Atom should be at the top of your list.
Atomic packages and themes
Atom has always published itself as a “hackable text editor for the 21st century”. The basic installation has relatively few features, but you can expand it with add-ons known as packages.
How to install nuclear packages
Adding Atom packages is quite simple, as Atom comes with a built-in package manager. (Many developers are attracted to Atom, in part because it’s so easy to install Atom packages.)
Open the Atom editor, click Edit in the top navigation bar, then select Preferences. A new one Settings the tab opens. click on + Install menu item and a search box are displayed on the right. This allows you to search for new Atom packages by name. Once you have found the Atom package you want, press Install button.
Click on Packages the menu item shows you which Atom packages are currently installed. Everything you have installed is shown below Community packages menu item. You will notice that there is one too Core packages menu item. This shows the packages that are installed by default. You can disable these if you want, but it is better not to do so as this will affect the basic functionality of the editor.
Installing Atom packages from the command line
Atom also comes with a command line tool called
apm (which stands for Atom Package Manager). You can also use this tool to install packages directly from the terminal.
The syntax is as follows:
apm install <package-name>.
You can configure
apm by using
apm config command line option or by manually editing
~/.atom/.apmrc file. Writing
apm help will give you an idea of what else it can do.
And with that said, here are twelve of the best Atom packages – plus a few bonus options – which makes Atom an even better code editor …
1. File icons
Atom’s default file and folder icons are best described as “functional”. An icon set such as
file-icons improves the appearance of the editor and makes it easier to find files of a certain type.
Search for “icon” in + Install pane to find dozens of alternative options.
2. Project manager
Atom provides simple folder-based project management. It’s good enough if you switch between a few projects, but
project-manager is ideal for something more sophisticated. It offers command palette settings and an editable JSON file where you can define projects and with their own custom settings like colors, tab preferences and so on.
3. Sync settings
If you are running Atom on more than one device, it is helpful to sync the settings, keychains, and snippets across installations. You can synchronize manually by cloning files in the Config folder (Settings, then Open the Config Folder), men
sync-settings provides an easier automated option. Options are stored in a Gist, but other Atom packages allow you to select a local folder or Git repository.
4. All Show
You started Atom, opened a folder and then … what’s next? That
todo-show The Atom package reveals comments scattered throughout your project that contain keywords such as
CHANGED, but you can also add your own regular expressions.
- Get the Atom Todo Show package here: todo-show
minimap is one of the most popular Atom packages with more than seven million downloads. It displays a condensed view of your code on the right side of the code editor window, which is a great help for quick navigation. This feature enters your subconscious; you will not think you are using it, but you will miss it when it is not there.
Get the Atom Minimap package here: minimap
6. Highlight Selected
Selecting a keyword or variable in VS Code, Sublime Text, or Notepad ++ highlights all other instances.
highlight-selected brings this feature to the Atom and is even better when combined with
7. Automatically close HTML
As the name suggests, this package automatically adds a closing HTML tag when you complete the opening tag. This may be a simple package, but I can not do without automatically closing HTML tags!
autoclose-html doubles your markup creation speed. It works out of the box, but the package also allows you to define which tags to fill inline (e.g.
<li></li>) and which must create newline blocks (e.g.
<article> ... </article> or
<ol> ... <ol>).
Most editors have CSS color previews, but few match
pigments package to Atom. It analyzes colors, custom CSS properties, preprocessor variables and even performs color-changing functions such as
darken(). It scans your source files to build a palette of colors so you can refer to them anywhere.
- Get the Pigments Atom package here: pigments
The color picker package is also for anyone who would rather choose colors than remember their names or hex values.
You can run linters from the command line, but it’s not as fast or efficient as live, in-editor code validation. Linter is one of the best. It is fast and less intrusive than some competitors.
Note that Linter is the Atom core suite that provides an API for dozens of programming languages. Some, e.g. HTML and CSS, do not require additional software. Others, such as
eslint, requires node module and configuration settings (full instructions are available).
Fluffing your code will greatly improve your code quality, so I encourage you to give it a try.
10. Auto Detect Indentation
Encoders will never agree on whether to use tabs or spaces. Even when they do, they may prefer them in two, four, or eight character flavors. I usually choose the one that annoys most people (hard-tabs with three characters?) But
auto-detect-indentation find out what the project requires so you never have to worry about it.
Alternatively, you can force everyone’s code to match your preferred style using Atom Beautify:
If you’ve ever used Live Share for VS Code, you understand how it revolutionized pair programming. The extension allows two people to remotely edit code in the same workspace at the same time.
teletype is the corresponding package for Atom. It is a beta service, but looks good and seems reliable.
- Get the Atom Teletype package here: teletype
12. Several nuclear packages
I have covered what in my opinion are some of the best Atom packages. We end with some special mentions that did not reach the top list but are still really useful and worth looking at.
Emmet (formerly known as Zen Code) can extend CSS-like terms to HTML tags: emmet
If you create REST web services, the Atoms REST client offers a fast HTTP testing tool. It does not match powerful alternatives like Postman, but is great for fast and dirty testing: rest-client
Finally, there is no need to manually check for updates.
auto-update-packagesverifies your packages every six hours and does the work for you: auto-update packages
Additions after hours
If your key figure (key count) shows that you have done enough for the day, relax by reading xkcd cartoons or have a quick game of Tetris, Reversi, Pong, Snake or SimCity!
Did I miss your favorite Atom addition?