» All Posts «

Developer Thoughts: Atom

Chris Kirk December 23, 2016 Web Design & Development, Technology

Share Comment 0

One of the biggest controversies in the web development community is which text editor is best.

I’ve used dozens of editors in the past, including Coda, Notepad++, Sublime Text, and more recently, Visual Studio Code and WebStorm. While these are all utilized and respected by developers, my top choice for a text editor is Atom.


 Atom was created by the folks at GitHub using a framework called Electron (also made by GitHub) allowing developers to create cross-platform, full-scale applications using modern web technologies like HTML, CSS, and JavaScript. Their philosophy for this technology is, basically, that if you can build a website, you can build an app.

An outstanding benefit of Atom is the extensibility that’s allowed in the editor. The amount of customization and plugins in Atom is truly mind-boggling. At the time of publication, there are over 7,200 packages and themes available to download and use. Here are some of my favorites:


Often when I’m developing, I’ll have to change my HTML structure for various reasons. Normally, if I have an HTML tag such as <span></span>, and need to update that tag to a div instead, I’d need to update both instances of the string “span” to “div”. Not with double-tag! Updating the opening tag will also update the closing tag. A great time saver!



I’m not going to pretend that this editor isn’t available in almost any respected text editor, but it still deserves a mention. Creating HTML structures is an absolute breeze with emmet.


emmet also offers many shortcuts, snippets, and so much more. Read about all it offers at emmet.io.

linter (combined with linter-jshint and linter-php)

Many developers might be familiar with the concept of a linter. It’s basically a technology that lets developers debug their code on the fly before any testing happens. If a syntax is incorrect, you’re missing a bracket, and so on, linter will let you know what is wrong and where.


A good to do list for coders is vital. Some keep pen-and-paper lists, and others use suites like Wunderlist. However, imdone-atom lets you keep a to do list right in your editor, with references to the document and line that needs work.

There are also a handful of plugins I use for quality-of-life and aesthetic purposes:



With over 2.7 million downloads, this has become a staple to Atom users. It adds a Sublime-style preview of your code in the editor’s sidebar. It highlights where exactly you are on a page and acts like a scrollbar so you can quickly jump from place to place. minimap offers its own plugins (pluginception!) for further extensibility, adding linter markers, viewing a preview popup of your code, and more.



This little plugin adds matching colors to your brackets. Great for Sass/SCSS, Javascript, and PHP!



Okay, so I don’t really use this often, but it’s a really fun plugin. It does a great job to add a bit of excitement to the coding process!

Obviously, there are dozens of plugins that I haven’t mentioned, and thousands more that I haven’t downloaded. I recommend that you try these out for yourself and experiment with which plugins (and text editors) work best for you. Happy coding!


There aren't currently any comments for this entry.

Leave a Comment