Supercharge JavaScript development in Atom
I know, editors are just tools, and the real power is within the programmer. The editor still plays a major role in writing good code. I don't know about you, but even though I can probably write a small program using nano, it'll be damn difficult to get it right the first time. Yeah, the good ol' typos, missing parentheses and all. And it'll probably be much slower than having the luxury of autocomplete provided in the editor.
So, how do we choose a good code editor which doesn't get in our way and help us write code faster? Well, I'd say it doesn't really matter which editor you choose, just make sure that it's good enough to have all the tools you need. After all, it's supposed to help you code faster. And how'll you code faster if you waste too much time pondering about which editor to choose :D
I was a long time user of Adobe Brackets and Sublime Text 3 (I still love Sublime), and occasionally tried Atom. I wasn't impressed back then when it first came out. But has come a long way since then, and it's getting better every day. While I never had any problem with Sublime, the temptation to switch to Atom was because of the plugins available for it. I'm a front-end guy and been doing development in React recently. The plugins available for Sublime were really good for React development, but Atom had even more to offer, mostly a better plugin for React and several plugins which provide Flow autocomplete (there are none for Sublime). With Facebook using Atom-based Nuclide editor, we can only expect better in the future.
Most of the posts I've seen about Atom plugins covered many useful and cool plugins and themes, but missed some really awesome plugins which let you code faster. This post is meant to cover those awesome plugins and make your editor easier to use, turning Atom into more like an IDE rather than just an Editor.
Atom Beautify
There are many scenarios where you will want to beautify the code for better readability, maybe when you're looking at someone else's code, or trying to make sense of some minified code. It supports a large number of languages including JavaScript.
apm install atom-beautify
Atom TernJS
TernJS provides code intelligence for Atom, with intelligent autocomplete with type information.
apm install atom-ternjs
Auto-detect Indentation
When you're working with different projects with different indentation styles, this plugin comes really handy.
apm install auto-detect-indentation
Auto-update packages
Why spend time manually updating packages when you can have them auto-update?
apm install auto-update-packages
Autocomplete Modules
This plugin auto-completes node modules as well as file paths, and works with both Node's `require` and ES2015's `import` syntaxes. Really neat.
apm install autocomplete-modules
DocBlockr
If you write comments and documentation, this plugin automates many of the things you need to do, like placing a comment line automatically in next line, automatically pre-filling function parameters when you're writing DocBlock comments, and much more.
apm install docblockr
Editor Config
Editor Config helps maintain consistent code style across different editors. Really useful if you happen to work with developers using different editors, so that you don't have to add configuration for all editors.
apm install editorconfig
GIT Projects
It's really easy to open up your GIT projects with this plugin. This will scan directories with GIT projects, and allow you to open them quickly with a keyboard shortcut.
apm install git-projects
Language Babel
Babel provides support for ES201x syntaxes, JSX and Flow syntax support for Atom. Also allows you to transpile these files to ES2015 files on save, handy for quick testing without having to set up a build system.
apm install language-babel
Linter ESLint
Linting can catch programmer errors really early before you even run your program. ESLint is a fully customizable linter which can provide linting for code as well as style. This is a plugin for Atom Linter.
apm install linter-eslint
Linter Flow
A plugin for Atom Linter, which shows Flow errors inline. Handy, and you don’t have to run flow check manually every time.
apm install linter-flow
Nuclide
Nuclide provides handy IDE-like features using Flow, like type aware autocomplete, Ctrl+Click to go to definition, a better linter, and much more. It is part of the Nuclide Editor by Facebook (which is based on Atom).
apm install nuclide
Open Recent
It’s easy to open recent files and folders from the “File” menu with this plugin, something that should be in Atom core.
apm install open-recent
React
If you work with React, this is a must have. It provides various snippets, autocomplete, JSX formatting and much more.
apm install react
Sync Settings
You spent lots of time customizing Atom. What if you want to do the same on a new machine? Or reinstall your system may be? This plugin saves your customizations in a Github Gist so that you don’t have to do it all over again.
apm install sync-settings
Term3
It’s much easier to have a Terminal directly as another tab in the editor window for quick actions rather than having to open a new window. This plugin does exactly that.
apm install term3
TODO Show
Most of the times I’ve several TODO comments scattered across a project. This awesome plugin can find all of them and show it in a nice list.
apm install todo-show
Pigments
Color previews for color strings in any file? Hell yeah.
apm install pigments
Toolbar
I’m not a keyboard ninja, and can’t possibly remember all those multitude of keyboard shortcuts different plugins provide. Sure, there is the command palette, but it requires many steps.
This plugin adds a handy customizable toolbar in the UI (like in Brackets where you can add some shortcuts if you’re like me. There is flex-tool-bar which makes it easy to add shortcuts via a config file.
apm install tool-bar
As a JavaScript programmer, I am obviously not a big fan of Java. But I envy the awesome features of Java IDEs which can provide accurate autocomplete and refactoring, and various other nifty little features. We can’t really have all, but we can easily get several IDE like features with the plugins available for Atom. And I hope that the future holds better.
These are not all of the plugins I use, but these are the ones which I can’t live without. What about you? I would love to hear about the plugins you really love. I’m sure I missed a lot of awesome plugins.
