Comparing the New Atom-IDE to Visual Studio Code for Web Development

GitHub recently launched Atom-IDE, bringing the following in-depth development features to its Atom text editor:

• Auto completion
• Diagnostics (errors & warnings)
• Document outline
• Find references
• Go to definition
• Hover

Atom has been around for three years now. In terms of JavaScript open source projects, that’s a millennium. I’ve used it since it was introduced, but in the past few months, I’ve moved to Visual Studio Code for its ease of use and its IDE-like support for TypeScript out of the box. So the launch of Atom-IDE is exciting, giving me the opportunity to compare two free text editors.

Atom-IDE vs. Visual Studio Code

Auto completion

TypeScript JSX in VS Code has been improved to include imports. For instance, typing a React component will trigger a suggestion to import a React component. This functionality has not yet been added to Atom’s ide-typescript, so copy-pasting paths is still necessary.

Elsewhere, autocomplete recognized parameters from a Prop Type in a React component and suggested them automatically. Further autocomplete can be manually triggered by ctrl-space. An example of this was searching lodash functions. A search for “is” returned the package lodash, but not individual functions. This is a feature that is automatic in VS Code.

Diagnostics

Atom provides diagnostics in the form of errors and warnings in a traditional linter pane. In order for an error to be recognized in a TypeScript file, I had to first save the file, which then ran the linter. In contrast, VS Code underlines errors automatically, without requiring a file to save.

The killer for Atom-IDE is its incompatibility with existing linters. To trigger ide-typescript linting, I had to first disable my Ruby linter. Unless this is changed in the future, Atom-IDE can’t be a polyglot editing solution.

Find references

Atom did a good job of finding references in a TypeScript React file. It can be triggered by hitting alt-shift-cmd-F. This seems like a clunky shortcut as a headlining feature, but it can be remapped through the “find-references:activate” command in Preferences. This is a feature that VS Code includes subtly: hovering over a reference will highlight all other references in a file.

Go to definition and hover

Hover only works some of the time. React components in a project are not recognized at all, but React props will point to their definitions. Unfortunately, clicking through to go to definition only puts the cursor over the import statement, which requires another click to go to the definition itself.

This is an issue in debugging or stepping through code. However, the first-party support is encouraging and will probably improve with time.

Conclusion

So, should you download Atom Beta and enable Atom-IDE? I would recommend it for the brave and curious at this point. It is no different than other non-stable software in that regard, and it installs alongside your current Atom installation and uses the same packages. It’s fun to see this direction for Atom, GitHub, and Facebook in a unified effort.

On the other hand, my day-to-day development is still much quicker in VS Code, with first-party support for the editor and TypeScript language from Microsoft.

You can download the packages yourself through Atom with update 1.21 and above. As of writing this, the IDE features could be downloaded from the Atom Beta channel.