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.
apm install seti-ui
Package link: seti-ui on atom.io
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 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.
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.
apm install zen
Package Link: Zen on atom.io
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.
apm install vim-mode
Package Link: vim-mode on atom.io
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.
apm install minimap
Package Link: minimap on atom.io
Sometimes you just want something alphabetically sorted.
I use Sort-Lines.
Show @TODO in atom
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
apm install emmet
Package Link: emmet on atom.io
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.
apm install remote-ftp
Package link: remote-ftp on atom.io
Update: This plugin is no longer available due to a memory leak and looking for a new maintainer
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.
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!