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 I’ll also link to the specific section that corresponds to each bit of functionality.
Note about “built-in” functionality vs. packages
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 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:
border-properties separately; with Cmd+Shift+D, I could quickly make a copy of a line and then make whatever small edit was necessary.
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.
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.
The key sequence for split panes can take getting used to, but to break it down:
- Press Cmd+K
- Release the keys
- 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
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.
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.
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 ) 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 diffon 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
resetbut 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
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
I can just type
bljs and start typing in the code block itself after creating a simple snippet.
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.
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!