Useful Built-in Atom Functionality for Beginning Web Developers

There are a number of great blog posts and articles about the best Atom packages for web development. So if you’re just starting out and you’ve decided to use Atom as your editor, it can be tempting to look at what packages people are recommending so you can install them yourself. But if Atom is your first editor beyond using something like Notepad on Windows or TextEdit on macOS, I think some of Atom’s built-in functionality can get you really far when you’re just starting out. I recently started a front-end development course to get back into programming and I’ve personally found Atom’s built-in functionality to be super helpful for the smaller projects that you tend to work on at first and I think it might be valuable to call out some of this functionality so you can get a feel for what Atom can do out of the box.

Feel free to follow along in the Atom Flight Manual, Atom’s official documentation :newspaper: I’ll also link to the specific section that corresponds to each bit of functionality.

Note about “built-in” functionality vs. packages :package:

When I refer to “built-in” functionality of Atom, I’m referring to what Atom can do when you first install it. You can extend what Atom can do by installing community packages, but we’re going to cover some of the many useful things that Atom can do by default.

Keyboard shortcuts :keyboard:

Keyboard shortcuts are key sequences or combinations that perform some function. You’re probably most familiar with copy and paste which is Cmd+C/Cmd+V on macOS and Ctrl+C/Ctrl+V on Windows and Linux. Atom comes with a number of useful keyboard shortcuts, many of them mentioned throughout the Flight Manual.

The great thing about keyboard shortcuts is that they help you work much faster than pointing and clicking or using menus. Maybe not at first, but over time as you use them more and more they’ll become second nature to you.

For my course, I found a number of the built-in shortcuts super helpful, just a couple of examples are:

  • Duplicate a line: I often had some line of code that I needed almost an exact duplicate of right after it. In JavaScript I might declare some sequence of variables or in CSS I would be setting different border- properties separately; with Cmd+Shift+D, I could quickly make a copy of a line and then make whatever small edit was necessary.
  • Join lines: this is one of those functions that you’ll randomly find useful. One example is if you have a short JavaScript function that you typed out as a block, but realize it’s more readable on a single line. Just use Cmd+J a few times and you can quickly make that adjustment:


There are a ton more keyboard shortcuts for moving around and editing text in the references below. Note that I’m on macOS so will show macOS-specific shortcuts, but the Flight Manual will show you the keyboard shortcut for your platform.



Code folding :open_file_folder:

Code folding lets you hide (or fold) chunks of your program so you can get a higher level view of your code. An example where I found this useful was when looking at JavaScript and a particular function was getting a bit long. If I wanted to get a bit of an overview of what was going on in the function, I can fold different blocks in the function to make scanning it a bit more manageable:



Split panes :banana: :ice_cream:

Splitting panes might literally be one of the most helpful built-in functions that I’ve used. In Atom, you can split your view so that you have multiple files open at once. It’s something that you may not be used to if you used only basic editors before, but I think you’ll find it super useful.

Since I’m in a frontend development course, we’re working with HTML, CSS, and JavaScript all the time. And right away I noticed that I was pretty much automatically using split panes since the different files are so tied together.

For example, if I was working on some JavaScript code that was manipulating the DOM or hooking into classes or IDs, I would have the JavaScript side-by-side with the HTML or one on top of the other with a vertical split:


So with this vertical split, it’s easy to see what ID I want to select from the HTML in the JavaScript, and I can just copy it over into the .querySelector() call.

The key sequence for split panes can take getting used to, but to break it down:

  1. Press Cmd+K
  2. Release the keys
  3. Press one of the up/down/left/right arrow keys to direct the split (e.g. using the down arrow key at this point will split down)

See the Flight Manual definition of a key sequence for more details.

I also found it helpful sometimes to split the same file as a debugging tool. So if I was trying to figure out why a particular function wasn’t doing what I thought it should do, it was helpful to have a vertical split where the function implementation was on top and the code that invoked the function was below.



Find and replace :mag_right:

Find and replace is probably something you’re familiar with but I’ll mention it anyways since I definitely found it useful. The best example is when I changed a class name in an HTML file, which I had to followup with the same rename in the CSS and JavaScript. With Atom, you can do a typical find and replace but you can also do it across all files in your project which comes in useful here.

For example, for this game project I wanted to change “wins” to “points” and with project find and replace, it was super easy. Cmd+Shift+F brings up the project find and replace box:


Then after clicking Find All, you have a chance to scan the results before doing the replace to make sure the changes make sense. And as you can see in the GIF and there are even extra controls that lets you expand the number of context lines before and after a result in case you need to see more of the code before you’re confident in doing the replace.

Find and replace in a project is also helpful just using the “find” part because the search results give you an easy way to scan through your files to look at how a function or variable is used across a project.



Multiple cursors :computer_mouse::computer_mouse:

Though I don’t use them too often, I found multiple cursors pretty handy when I wanted to make a similar change across multiple lines in the code that I could currently see on my screen. Hold down Cmd and then click to place another cursor.

A simple example could be if you accidentally used let instead of const for a handful of variable declarations; with multiple cursors, you basically only have to make the change once.

A more interesting use of multiple cursors goes along with the keyboard shortcut for selecting the next word that’s the same as the currently selected word (Cmd+D in macOS). With this shortcut you get multiple cursors for your selections so you can rename things at the same time:


So in this example, I could have used find and replace, there are often multiple ways to do the same thing. But I found the multiple cursors method easier when making a change within a single file.



GitHub package :package:

My course requires you to use Git for your projects and while I’m pretty comfortable with the basics from the command line, I like being able to stay in Atom and use the GitHub package. You can toggle the Git tab of the GitHub package with Ctrl+Shift+9.

Some things I found super useful:

  • Staging and unstaging changes is super simple. Though it’s not so bad on the command line, the UI really encouraged me to be a bit more selective about staging files. From the command line it’s always really tempting (for me at least :slight_smile: ) to just git add . but selectively staging files led to more specific (and better I think) commits.
  • Because the diff view is so accessible, I reviewed my changes way more than specifically deciding to run git diff on the command line. This made it a lot easier for me to clean something up before committing and to decide what files to commit during those times where I probably should have committed earlier.
  • Related to diffs and making more self-contained commits, the diff view also made it super easy to stage particular changes in a file rather than the just defaulting to staging the whole file. For example, let’s say I renamed a method name from resetState to reset but I also fixed a bug, all in the same file. If I want to revert the rename, I would also revert the bug fix if I staged and committed the whole file. Using the GitHub package, I can super easily selectively stage and commit just the bug fix which is at the bottom of the diff:


  • Lastly, I loved the ability to undo a commit with the click of a button.

As a beginner, some might find it useful to learn Git concepts by using Git from the command line first and then use a Git client next. You never know what Git client you’ll use in the future and Git clients can sometimes provide a really useful UI for Git at the expense of not really translating to another tool. But I find the GitHub package super intuitive and a tool that enhances my use of Git functionality rather than feeling like something that’s hiding Git from me. At the same time, I’m not brand new to Git so your mileage may vary :red_car:



Snippets :scissors:

Snippets let you type some short string of text that will then expand to some (usually) larger string of text. For my course, I haven’t used snippets much because for me, it’s useful to type things out at first to become more familiar with syntax and function names for example. But I can definitely see over time how snippets could be another timesaver like keyboard shortcuts.

The one exception was the log JavaScript snippet which I used constantly. It’s not a huge thing but if you’re logging things all the time, the time savings can add up over time.

And not code-related per se, but I did create custom snippets for Markdown code blocks. I take Markdown notes for this course, and I find them helpful to review periodically. The notes often contain code examples and using code blocks makes them render nicely in Markdown Preview (see next section). So instead of having to type this out for JavaScript code blocks:

I can just type bljs and start typing in the code block itself after creating a simple snippet.



Markdown preview :eyeglasses:

One more bit of built-in functionality I want to quickly mention that isn’t strictly code related is Markdown Preview. Like I noted above, I periodically look at my notes for the course and while Markdown files are pretty readable as is, Markdown Preview adds a bit more readability. Just use Ctrl+Shift+M while in a Markdown file and the preview pane will activate.



Recap :newspaper:

Hopefully this walkthrough gives you an idea of what core Atom can do. There are definitely some really neat community packages out there, but if you’re just learning to program, I’d encourage you to play with some of this built-in functionality to start. And there’s a lot more useful built-in functionality than what we covered here, so you can scan through the Flight Manual to see what else you might find helpful. As you practice more and more, I think you’ll find Atom to be a super useful tool where you can pick and choose the functionality that improves your personal workflow while learning and writing code.

If you have comments, questions, or your own tips, please share them below!


Thanks for this @rsese!  Showing how Atom is super approachable and beginner friendly.