If you're unfamiliar with Atom, it's an open source IDE developed by GitHub which I currently use for front-end development.

When initially installed Atom isn't very rich in features, however it's heavily customisable through packages. At the time of writing there are over 6000 packages available to install.

How to install atom packages

Atom packages can either be installed using a CLI or through Atom itself.

To install through Atom go to Settings → Install and search for the package which you wish to install.

File Icons

Alternatively installing via a CLI is much quicker and requires only the following command:

apm install <package name>

Recommended Packages

File Icons

https://github.com/file-icons/atom

File Icons

Settings → Install → file-icons | apm install file-icons

File Icons updates the tree-view and tab icons within Atom to show an icon which represents the file type. This is very handy when quickly trying to find a particular file.

File Icons Example

Minimap

https://github.com/atom-minimap/minimap

Minimap Example

Settings → Install → minimap | apm install minimap

Minimap adds a small preview of the contents of the file alongside the scrollbar. This is helpful for quick navigation, and also gives a perspective of whereabouts in the file you're at.

Pigments

https://github.com/abe33/atom-pigments

Settings → Install → pigments | apm install pigments

Atom Pigments visualises CSS colours such as Hex and RGB. But it also parses css-preprocessor variables as well as functions. One feature that the below animation doesn't represent which I find helpful is that it will also pick up the value of the preprocessor variables, even when they're declared in different files.

Atom Pigments

Highlight Selected

https://atom.io/packages/highlight-selected

Highlight Selected

Settings → Install → pigments | apm install pigments

The Highlight Selected package is simple, but very useful. When you select a word in the document, all other instances of this word are highlighted.

Todo Show

https://atom.io/packages/todo-show

Todo Show

Settings → Install → todo show | apm install todo-show

Todo Show will collate all the TODO comments throughout your code and display them in a quick table. Each record will also have a quick link through to the file and line of code containing the TODO.

Emmet

https://atom.io/packages/emmet

Settings → Install → emmet

The Emmet package is a plugin for the original emmit toolkit. Basically this allows you to write CSS selectors in HTML which by pressing tab will parse into a HTML structure.

Here's a simple example:

html>head+body>div.container

Pressing tab this would then become:

<html>
<head></head>
<body>
  <div class="container"></div>
</body>
</html>

However emmet also has the ability for more complex syntax, such as loops. For example:

html>head+body>div.container>p.item$*2>a[href='item$']{Link $}

Becomes:

<html>
<head></head>
<body>
  <div class="container">
    <p class="item1"><a href="item1">Link 1</a></p>
    <p class="item2"><a href="item2">Link 2</a></p>
  </div>
</body>
</html>

Great when you're trying to put a quick bit of HTML together.

EditorConfig

https://atom.io/packages/editorconfig

Settings → Install → editorconfig | apm install editorconfig

EditorConfig is a universal file format which helps developers define and maintain consistent coding styles between different editors and IDEs.

This package will override Atom's default text editor behaviour with the preset configuration in the .editorconfig file.

More information about the EditorConfig syntax can be found at editorconfig.org.

drag-relative-path

Todo Show

Settings → Install → drag-relative-path | apm install drag-relative-path

Coming from a Visual Studio IDE in the past I'm used to being able to drag and drop JS/CSS files from the tree-view into a HTML file and have this automatically convert into a script or link references.

This package emulates this ability as well as allowing you to copy from desktop too.

I hope you find these suggestions useful. If you have any Atom Packages which you particularly like to use please comment below!

🔖 packages

8 Useful Atom Packages