» All Posts «

Developer Thoughts: Atom

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

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.

ck-minimap

 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:

double-tag

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!

ck-doubletag

emmet

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.

ck-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.

imdone-atom

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:

 

minimap

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.

swackets

ck-swackets

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

activate-power-mode

screencast-2016-12-23-10-34-54

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!

0 Comments

There aren't currently any comments for this entry.

Leave a Comment