Atom, a lightweight code editor created by GitHub is a powerful tool, but needs the right plugins to really unlock its potential.
There is nothing more liable to produce impassioned debate between software engineers that which editor is best. I came to JavaScript from the world of enterprise Java development, where the heavyweight IDE is king, with three main contenders, Eclipse, IntelliJ and NetBeans. When switching over to work on JavaScript, I lumped for the only respectable IDE for frontend development, JetBrains' WebStorm and was fortunate enough to have NCR Edinburgh pay for a licence. However as time went on I looked with envy at the speed and simplicity of more lightweight editors such as the ubiquitous SublimeText. Being a fan of all things free and open source I went hunting for a modern, light weight editor that could offer a comparable experience to Sublime, and it was then that I stumbled across a pre-1.0 Atom.
Atom has come a long way since then but one thing remains true, it's the ecosystem of user contributed plugins that really make the editor shine. With such a volume of plugins available however it can sometimes be difficult to tell which ones will help and which will hinder, so with that in mind I've decided to list the key plugins that keep me productive with JavaScript.
Tab-completion is an essential feature of a modern editor however with JavaScript's lack of a static type system actually-useful tab completion can be hard to achieve. In my experience Tern is the best available for the language, superior even to that of WebStorm.
Being able to ctrl-click my way through source code was a feature I thought I had lost forever when I left my heavyweight IDE behind, but fortunately not so. js-hyperclick is fantastic for navigating through large codebases. For visual navigation I also find hightlight-line and highlight-selected invaluable for getting my bearings on the screen.
JavaScript can be ugly at times and a linter is essential to making sure you don't end up shooting yourself in the foot. My linter of choice is ESLint however atom plugins are available for the various JavaScript linters out there. Atom's linter framework provides error and warning reporting as you type, giving you instant feedback,
A simple plugin to aide the visual grepping of your folder tree, this plugin replaces Atom's generic file icon with a different icon depending on the file's type.
Hopefully this quick rundown of essential plugins will prove useful to JavaScript developers looking to get productive with Atom. The beauty of a fully pluggable editor is that if you want a feature there's bound to already be a plugin to provide you with it, and if not, why not write your own!
Keir Lawson
Tags: javascript atom editors
June 2nd 2016