This article was published 6 years ago, therefore the contents of this post may be out of date.

Atom is one of the most current and feature-rich source code editors for web developers. Formerly, Atom was GitHub’s internal tool, but later, they decided to open-source it for the general public, after which it quickly gained traction in the developer community. Atom is an incredibly versatile and customisable code editor with more than 8,000 packages to choose from.

Today’s post, we will have a look at the 12 Atom Packages you can use in your web development work.

1. File-Split for Atom

An Atom package that allows you to separate your file at cursors into multiple files.

Price: Free

2. Simple Block Cursor

Add a classic terminal style block cursor cursor to your workspace.

Price: Free

3. Highlight Colors

Simple and fast color highlighting. This package will display a color preview at the end of a line where a css-compatible color is found. That’s it.

It also integrates with the color-picker package. If this package is installed, clicking on the color preview will bring up the color picker for that color.

Price: Free

4. Helicopter

Helicopter is a keymap system with composability and ergonomics in mind. It provides a scalable way to define keybindgs, making them easy to remember and easy to use.

Price: Free

5. File Icons Logo

Add some nice logo icons to your files in Atom. Logos were taken from SVGPORN

Price: Free

6. Commit Book

Atom plugin to list your commits with handy features like search, sort, filter.

Price: Free

7. FTP Remote Edit Plus

Editing files on your server without the need for creating a local project. It is not necessary to download all files of your project. Simply connect and edit your remote files. The files will be automatically updated to the server on saving.

Price: Free

8. Mojave Dark Mode

This package adds dark mode support for Atom on macOS 10.10+ with automatic theme switching based on the system appearance setting.

Price: Free

9. Change Line Length

An Atom text editor package that lets you cycle through different user-defined Preferred Line Length settings

Price: Free

10. Accessible Snippets

Snippets that include all WAI-ARIA attributes and descriptions, for ease of use in building more accessible web content.

Price: Free

11. Atom Change Case Menu

An atom wrapper for node-change-case featuring a configurable selection dialogue with live preview, quick style cycle, and menu-based case changing. This package is inspired by atom-change-case, which I thought needed a faster way of accessing and previewing case styles. The quick style cycle emulates MSO case change functionality (hotkey defaults to shift+F3).

Price: Free

12. Atom OpenSSL Details

Allows you to take the certificate data and either decode it to check its details or generate the bundle chain using Cloudflare’s PKI and TLS toolkit.

Price: Free


12 Atom Packages for Web Developers