Atom 101 (for JavaScript development)

I’ve been using Atom editor since the day it was released back in 2014. The main reasons I became an early adopter are the team behind it (GitHub), and the fact that it’s written using web technologies. In the beginning I wasn’t comfortable with it, but web development has improved impressively thanks to Chrome’s V8 Javascript engine and Node.js. This means that if you’re a web developer you can hack your editor to fit your workflow. Another thing that has massively improved since its launch is the community: now it’s really big, and it’s always an assurance of good support and community-created content.

An important thing to have in mind when start working with this editor is that it’s totally bare. This means that atom is basically an editor with few built-in features. This might seem bad when you are familiarized with that IDEs like XCode, IntelliJ, … In those cases, you can start programming powerfully once you have installed them. The problem with them is that they are very technologically oriented, this means that working with an IDE, you have to adapt your workflow to it. Instead, working with Atom you’re supposed to adapt the editor to fit your workflow, this way you can be always improving it and expect your editor to follow your way of working.

So let’s take a look at the built-in features first, and then we’ll take a look on my favorite atom packages for Javascript development.

Built-in features

Tree view

Ok, this is a simple one. When you’re working on a project sometimes you have to look at its file tree, but keep in mind that at least the 95% of the time you don’t. When you’re coding it can be distracting, so it’s good to know a fast way to show and hide it, “⌘ + \” or “Ctrl + \” will do the trick.

Quick Open

It lets you search for a file in your project. Simply type ⌘+T (on Mac) or Ctrl+T (Linux/Windows) and start typing, then a list of files that match your query will appear.

Auto Indent

It’s very important to write good, clean and structured code. Atom is so good indenting new lines when you’re typing them, but in case you did a mess somehow or you copied a bunch of code from StackOverflow 🙈, select the code you want to structure and then on the app menu choose “Edit > Lines > Auto Indent”. It’s always better to do it with the keyboard, so at the end of this section I’ll explain you how to bind this action to a custom shortcut.

Auto fold

Once you have a well structured code, it’s time to take a little perspective. On the line number view, at the left of the definition of a function (or any scope) will appear an arrow. If you click it, it will hide the content inside that scope.

Imagine that you have a class with a lot of methods, with this feature you can take a look on them as an index of functions instead of all the content in them. You can do this by pressing “⌘+k” (on Mac) or “Ctrl+k” (on Linux/Windows) then the number at which level you will to fold.

In this example I pressed ⌘+k and then the key 2. You can do the same with the key zero to unfold all.

Multiple cursors

Sometimes you can speed up your coding by typing on several positions. For this, atom lets you define multiple cursors doing a click while pressing the ⌘ key (on Mac) or Ctrl (on Windows/Linux).

Duplicate line

Count the number of lines you duplicate and the end of the day, lots. Now take a look on your process:

  1. Select the line desired
  2. Copy it (will not exaggerate, hope you’re doing it with the keyboard already)
  3. Set the cursor on a new line below
  4. Paste it

Even if you’re already doing it with the keyboard you have to do several actions. Do it in one keyboard shortcut: Set the cursor anywhere on the line you want to duplicate and hit ⌘ + shift + d (on Mac) or Ctrl + shift + d (on Linux/Windows).

Select following/all matching strings

What? Why not ⌘ + d? It’s simpler.

Great idea, but ⌘ + d (or Ctrl + d) is reserved for nicer action: selecting following matching characters in the file. If your cursor is on a word or you’re selecting several characters, with this command you will be selecting the next portion of the file that matches that characters.

If you want to select all the matching characters in the file, then press ⌘ + ctrl + G (on Mac) or Alt + F3 (on Linux/Windows) (yeah, this makes you feel like a piano player 😅).

Toggle comments

Sometimes you want to get rid of a bunch of code for a moment. Even if your cursor is in a line of you’re selecting several lines, you can comment it/them by pressing “⌘+/” (on Mac) or “Ctrl+/” (on Linux/Windows).

Hey, but don’t commit that commented lines to git!

Keymaps

Whatever you want to code, code it with the heart… I mean with the keyboard. Nah, seriously, there’s nothing as fast as the keyboard. If you want to be blazing fast in your coding, your workmates have to think that you are playing the piano instead of coding.

If you don’t link the way a command I said or another one is binded to the keyboard, even if you miss some command to be binded already (only accessible from the menu) you can do it editing the key map.

With the key map you can bind any atom command to the keyboard. To do so, read the official manual here.

My favorite packages

You can easily install all this packages from the “+ Install” options in the settings.

Theme

This is totally personal, but in case you want to start from something my favorite theme is composed by One Dark as UI Theme & Peackock as Syntax Theme.

Beautiful, isn’t it?

Linter + ESLint

It will test your code looking for syntax or style guide violations. It will remember you every time what are your preferences on code styling 😉

Script

This package lets you run scripts based on file name, a selection of code, or by line number. This becomes so useful when you want to debug a piece of code you just created. Install it and press ⌘+i (on Mac) or ctrl + i (on Linux/Windows)

Minimap

Is a little representation of the whole structure of a file. It helps your brain make a picture of the current file improving your organization. If you look at the picture in the Theme section, it appears on the right side of the screenshot.

Todo-show

Never miss a thing to be completed before you commit that code. List all your pragma annotations (Todo, Fixme or whatever you want…). This way you can maintain a low level to do list in order to get your job done.

File icons

As simple as this. It assigns beautiful and distinguible file icons to all your files in the project. This way you can find what you’re searching on at first sight.

That’s it

That was my list of must-know & must-have features about my Atom editor. Of course, I use a lot more of packages and commands that define better my workflow, but from now you have to analyze how you work and then adapt this to yours. If you think that I missed a super-cool package or command that you think that must be in that list, share it in the comments!

Hope you find it useful!