Atom shows promise

Update: My efforts have switched to Brackets, another open source text editor that is much faster.  I recommend this font fix, the Tomorrow Night theme, and the following extensions:

• Autobabel
• Brackets Beautify
• Brackets Snippets (by edc)
• Brackets TSLint
• Brackets TypeScript
• brackets-eslint
• Brackets-Gulp
• CloseAllOpenFiles
• CSSLint
• Open project in terminal
• Proper Indent
• Tabs - Custom Working

Also, if you want to assign a custom extension (like AWS' CloudFormation *.template) to a syntax highlighting language (like JSON), use this method.

_______________________________


This article assumes you don't hate JavaScript.  Let's face it, JavaScript in some form or fashion is here to stay.

If you want to be a JavaScript/HTML5/Hybrid/Node developer, you'll need to pick an editor/IDE.  Although heavyweight options exist (Eclipse, NetBeans, Visual Studio, etc), most agile developers prefer a more nimble tool, like Sublime Text, Komodo IDE, or WebStorm.  A relative newcomer to the crowd is Atom from GitHub (the company).

Unlike many tools in this genre, Atom is free.  In addition, it is cross-platform and there are lots of plugin packages and themes that allow you to extensively customize it.  That said, at times it can be woefully slow, even on a powerful 8 core/8 GB memory laptop:

That said, the brilliant engineers at GitHub and the passionate Atom community continue to make improvements and I anticipate the experience will only improve with time.

If you're not ready to shell out hard cash for another tool or you'd prefer to support Open Source, here are a few steps that worked well for me:

1. Install Git

2. Install Node 4 (this incorporates many improvements from the io.js fork)

3. Install Atom

At this point, you could theoretically create a Hello World! app, but in reality you're going to need a ton more tools and libraries.  That's because the good ol' days of creating websites in Notepad are long gone.

More surprisingly, the good recent days of creating websites in JavaScript and CSS are gone.  That's because most modern development shops use transpilers to create cleaner, more robust code, whether it's transforming LESS or SASS into CSS, ES6 or TypeScript into JavaScript, etc.

This reality has some drawbacks as a barrier to entry for new or casual developers:

There's another hidden downside: performance.  Even cutting-edge frameworks and toolsets suffer from the inherent modularity of Node:

Another sad truth: Windows stinks when it comes to development.

node-gyp alone adds an appalling 8+ GB to your setup process.  The idea that I have to install Visual Studio Express and an old version of Python just to have a compiler for Node to work is ridiculous.  And the bad news just gets worse.

There are many, many hacks you could apply to bandage over this reality but it will eventually dawn on you that you need an OS from a Unix/Linux pedigree to be a truly effective developer.

Okay, enough of the rant tangent.  Let's get back to Atom!

Assuming you're still reading this lengthy post (congrats!), here are a few configuration tips:

1. First, you'll want to install some useful global Node packages.  Open a terminal/command prompt and enter:

npm install -g babel babel-core babel-eslint babelify eslint gulp gulp-less jspm less napa node-gyp yo

2. Now, you'll want to install some useful Atom packages:

apm install atom-terminal atom-typescript cssfmt gulp-watcher es-identifier-highlight jsfmt language-babel linter linter-eslint linter-stylelint linter-tslint project-jump project-view turbo-javascript

3. You can also optionally install an Atom theme.  I personally like Outlander:

apm install outlander-syntax outlander-ui file-type-icons

4. In addition, choose and install a monospace font that fits your style.  I like DejaVu Sans Mono.

5. Now, open Atom, go to File > Settings and set the desired font family and increase the font size to 15 (your eyes will thank me a decade from now)

P.S. While you're in this screen, feel free to set your Project Home to match your GitHub Desktop projects location.

6. Next, click on Themes in the left-column menu and set your desired theme:

7. Finally, you'll want to set a keyboard shortcut for opening projects.

Note: If you're having issues with creating a custom ESLint ruleset, check out https://github.com/AtomLinter/linter-stylelint/issues/10

~~~~~~

There you have it!  A powerful, free code editor that looks and acts like all the other cool kids' screens at tech conferences  :)