12 Essential Atom Packages for Web Development

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.

At the time of writing, more than 3,000 Atom themes and 9,000 Atom packages are available. Part of the reason for this is that Atom can be expanded using web technologies. If you are a Node.js or client-side JavaScript developer, you know enough to create your own Atom packages and enhance Atom in any way you want.

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.

Installed Atom packages

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.

file icons

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.

Addition to Atom Project Manager Package

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 TODO, FIXME and CHANGED, but you can also add your own regular expressions.

todo-show

  • Get the Atom Todo Show package here: todo-show

5. Minimap

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.

minimap

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 minimap-highlight-selected:

marked

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. <p></p> or <li></li>) and which must create newline blocks (e.g. <article> ... </article> or <ol> ... <ol>).

8. Pigments

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 lighten() and darken(). It scans your source files to build a palette of colors so you can refer to them anywhere.

pigments

  • 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.

9. Linter

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:

11. Teletype

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

    rest client

  • Finally, there is no need to manually check for updates. auto-update-packages verifies 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!

tetromino

Did I miss your favorite Atom addition?

Leave a Comment