My 7+ favourite atom editor plugins

My favourite plugins for atom are both targeted towards developers and also writers. Atom has become my default source code editor, I also use it for a book I’m working on and most of my blog posts. Last update: 2016-10-24.

Atom Theme: Seti/Monokai

First of all I want to promote the SETI-UI and Monokai packages, since they just make Atom look great. If I stare at something for hours a day, it might as well be pretty. If you’re looking for more atom syntax themes, check out my post about them: Best (dark) Atom Editor Themes.

Install command: apm install seti-ui

Package link: seti-ui on atom.io

Pigments

pigments-atom-color-inline-css-sass

Pigments is really handy when you write a lot of CSS and you don’t want to copy & paste hex or rgba codes of colours to know what they look like. It even works with SASS variables, so the variable name will be coloured if you have defined a color in another SASS file.

Package Link: https://atom.io/packages/pigments

Multi Cursor Plus

Multi Cursor Plus adds Sublime like behavior where you can match the next occurrence of a variable or selection by hitting CTRL/CMD + D.

Package Link: https://atom.io/packages/multi-cursor-plus

Tabs to Spaces

Tabs to spaces provides commands through CTRL+SHIFT+P so you easily can convert files between tabs and spaces.

Package Link: https://atom.io/packages/tabs-to-spaces

Editorconfig

Editorconfig is the package for the equally named project at editorconfig.org, that has the purpose of assuring all developers on a project stick to using the right indentation and a couple of other settings. Very useful in a shared programming environment.

Package link: https://atom.io/packages/editorconfig

Document Statistics / WordCount

For bloggers or writers this is is a very nice plugin that keeps a small indicator in your status bar at the bottom of the window that shows you how many words and characters you have written in the current file. This is quite practical if you have a minimum threshold for blog posts or articles that you aim for.

Zen mode

The Zen plugin is by default toggled by pressing SHFIT + F11 and hides all unnecessary interface elements, fullscreens atom and centers the text you’re writing. This is pretty handy for cutting out distractions while writing and focus exclusively on your text. By default you can do that after installing zen and pressing Shift + F11. For coding I’ve really never used it, because I have browsers and terminals running aside.

Install command: apm install zen

Package Link: Zen on atom.io

Vim Mode

This one isn’t for everyone and vim users will probably be frustrated by the limitations compared to actual vim, but you can still move around with j,k,l,h,e,b and so forth, which is important to me. Actually, it drives me semi-nuts not being able to do that.

The vim mode plugin for atom has good support for moving around in a file without using the mouse and that’s what I use it for. You can’t really use all the : commands that vim has to offer, but just the modal functionality that separates between insert and view are a great contribution to my workflow.

Install command: apm install vim-mode

Package Link: vim-mode on atom.io

Document Minimap

atom-document-mini-map-package-plugin
The minimap, that first became popular in Sublime Text has been implemented as a package for Atom that dedicates a small portion of the window for a zoomed out version of the file to make it easier to visualise and remember where things are in long files of code. It also highlights which version of the file is visible right now.

I find this feature great when dealing with files that are 500 lines or the like, since there is no way that fits on my screen in 2-3 scrolls.

Install command: apm install minimap

Package Link: minimap on atom.io

Sort Lines

sort-lines-atom-editor

Sometimes you just want something alphabetically sorted.

I use Sort-Lines.

Show @TODO in atom

atom-show-todo-fixme

Todo-Show shows all occurrences of @TODO or @FIXME in your project in a neat list, including filename. If you click the row, you’ll automatically be taken to the right file and line number.

Emmet (former Zen Coding)

When I teach I often have to bring up examples to get my points through in a good way, so I love Emmet for letting me prototype and throw out boilerplate HTML code so easily. Let’s say I want to explain lists in HTML and I start a new file that I put on the projector, I can just type the following:

html:5->EXPAND
// move to the body
ul*li>a->EXPAND

That creates an HTML file with a list, including five points and links, without me having to save 50 different snippets or example files that I have to look for, so I can quickly get to the point.

The hotkey for EXPAND is usually CTRL + E

Install command: apm install emmet

Package Link: emmet on atom.io

Remote FTP

With remote-ftp you can connect to a server through FTP or SFTP to upload or edit files. Atom will open up another file tree for the remote connection and gives you access to the remote files.

The connection data are stored in a .ftpconfig file, be careful not to upload it, if you chose to put your password in it.

Install command: apm install remote-ftp

Package link: remote-ftp on atom.io

Color Gutter

Update: This plugin is no longer available due to a memory leak and looking for a new maintainer
atom-color-swatch-gutter-plugin-package
The Color Gutter plugin shows the actual color at the side of a CSS document, so you don’t have to switch back to the browser to see a colour or open a color picker.

Install command: apm install color-gutter

Package link: color-gutter on atom.io

What are yours “best” atom packages?

If you disagree with this list or just have something to add, I’d love to hear your feedback! Comment below or catch me on twitter!

Leave a Reply

Your email address will not be published. Required fields are marked *