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 ⌨️
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:
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 📂
Split panes 🍌 🍨
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:
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.
Multiple cursors 🖱🖱
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 📦
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 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 🚗
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.
I can just type bljs and start typing in the code block itself after creating a simple snippet.
Markdown preview 👓
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!
... View more
Sorry for the confusion here - this part of the API changed when we moved "watching" to mean "starring" and is explained in this post from the API blog: http://developer.github.com/changes/2012-9-5-watcher-api/ `watchers` corresponds to the number of users that have starred a repository, while `subscribers_count` corresponds to the number of watchers. For example, looking at the Atom repository: https://api.github.com/repos/atom/atom Right now it has: "subscribers_count": 2468 "stargazers_count": 48009 This is because there are 2468 watchers (= subscribers) and 48009 stargazers. I hope that clears things up but if you have more questions, please let us know!
... View more
Looks like this is a known issue that was fixed: https://github.com/github/linguist/issues/4422 But the Linguist maintainers still need to make a release /cc https://github.com/github/linguist/pull/3973#issuecomment-465589926 Once that's done though, things should start working again but it looks like there's nothing that you need to do on your end.
... View more
No problem - it depends on what operating system you're running but from Windows you can do it from cmd.exe or PowerShell, and on macOS you can use Terminal. In either case, start Atom with the "--safe" flag like this: atom --safe And that will run Atom in safe mode as described in the link I shared. You can also run this command to get the Atom version: atom -v
... View more
In addtion to @that-pat's questions, can you also confirm if you have the same problem in safe mode? https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode And it would also be helpful to know what version of Atom you're running (`atom -v`).
... View more