facebook instagrammenu-icon twitter

Essential Plugins for Atom

Published September 2, 2016

We’ve put together a list of the most essential Atom plugins to make sure you’re getting the most out of your code editor.

Emmet

Emmet is the cream of the crop, taking out all of the tediousness of writing HTML and CSS and making it super fast. You already know how to use Emmet abbreviations: its syntax is inspired by CSS selectors.

atom.io/packages/emmet

Git-Plus

git-plus

Git-Plus makes committing, adding, branching, pulling and pushing to you git repository just that much more easy. You can do everything you want with git right in Atom so you’ll never have to tab to your terminal again to push your latest code.

atom.io/packages/git-plus

Git Status

gitstatus

Git Status is great for keeping an eye on which files have been edited, added or removed since your last commit. It makes each file that’s changed a different colour according to whether it’s a new file or has simply just been edited. It also has indications to which lines inside your file have been changed, too.

atom.io/packages/git-status

Minimap

minimap

Minimap is great when in a larger file and needing to find and get to a certain part of a file quickly.

atom.io/packages/minimap

Tabs to Spaces

Tabs to Spaces converts leading whitespace to either all spaces or all tabs.

atom.io/packages/tabs-to-spaces

Colour Picker

colour-picker

Colour Picker is a very handy tool for selecting a colour on the fly – maybe you need a darker shade of blue all you have to do is CMD-SHIFT-C / CTRL-ALT-C and find the colour you need.

atom.io/packages/color-picker

Pigments

pigments-gif

Pigments displays colours in your project. It scans source files in your project directories looking for colours and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given colour. This is great when you’re using a variable colour naming system that doesn’t specify the colour.

atom.io/packages/pigments

You can also enable pigments in the minimap plugin with this: https://atom.io/packages/minimap-pigments

Seti Icons

seti-icons

Seti Icons adds beautiful icons to your files making it easier to find which file you’re looking for.

atom.io/packages/seti-icons

Sync Settings

This plugin is essential if you have two set-ups, or are transferring to a new machine. This backs up all of the settings and plugins in Atom to a gist which you can restore from and backup to.

atom.io/packages/sync-settings