Behind the scenes the Atom editor uses the Electron platform, which is essentially a sandboxed version of the Chrome browser along with Node.js code; however, you don't need to know that in order to use it. If you're interested in looking at the source code or even contributing to its development, you can find everything at Atom's official GitHub repo.
Note, however, that Atom is strictly an editor and should be treated as such. Most of the language support is in the form of syntax highlighting. But if you're looking for a full-featured integrated developer environment (IDE) that includes debugging capabilities, you might want to look elsewhere, such as at VS Code or Eclipse. Note also that there are extension packages that provide additional language support, including debugging, but many of these packages are no longer actively maintained. See the section below on Packages for more information and warnings.
Installing on Windows
To install Atom on Windows, head over to atom.io, where you'll find a yellow Download button. Download the file, which is likely called AtomSetup-x64.exe, and run it. There are no options; the installer simply installs Atom for the current user, closes, and launches Atom. The first time Atom runs, it adds itself to the system path for the current user. That way you can launch Atom from the command prompt.
Below is what Atom looks like the first time it launches; notice there's a prompt at the top regarding Atom being allowed to open certain URIs. We recommend clicking No, Never, and only click any other options after you've read the documentation regarding this feature. (We will not be using this feature here at ProgrammableWeb.)
Now go ahead and close Atom. In the next section, we demonstrate how to open it from the command prompt.
Testing it Out
Now you can test your installation of Atom. Open up a Windows command prompt, and simply type:
The "." tells Atom to launch in the current directory. If you like, you can omit it and Atom will launch in a default directory or the directory you last ran it in. Or you can specify a complete path, e.g.:
Atom will launch and this time will look like the following:
The area on the left is a tree view of your current project's directory; you can single-click files to open a preview in the editor (during which the file's tab on the right side will be in italics) and you can double-click to fully-open a file for editing. While in preview mode, if you begin to edit the file, it will open fully. Or if you single-click another file, the previous file you were previewing will close and this other file will open in preview mode. Whereas you can have multiple tabs open on the right side for editing multiple files simultaneously, there is only one tab for previewing. In other words, you can only preview one file at a time.
The right-hand portion of the window is the editor area, which can be divided into individual editor panes. Each pane can hold any number of files, with each one showing up as a tab at the top. In the above image, you can see the editor area is divided into two panes. You can drag the editor tabs between the panes; if you drag them all into a single pane, the empty panes close. You can close the tabs by clicking the X in the upper right of each tab. (The first time you start Atom, one tab is a window asking for Telemetry Consent, whereby you can choose whether to send debug data to the Atom team.)
You can also collapse the project tree pane; when you float your mouse over the right edge of that pane, the center of the right-edge will gain an icon that looks like this:
Click the icon, and the pane will collapse to the left. Now when you float your mouse over the left edge of the Atom window, you'll see the same icon in reverse; click it to re-open the pane. You can also move the project pane to the right side of the window by dragging its title to the middle of the right side of the Atom window. When you do so, you can now collapse the pane to the right instead of the left by hovering over the left edge of the pane. Various packages will add different panes to Atom, and you can drag and collapse them as well.
You can open additional Atom windows by clicking the File menu -> Open Folder. When you choose a folder, an entirely new Atom application window will open.
Here at ProgrammableWeb, we're building a large set of tutorials that will all use a common set of configurations. To make this as simple as possible, we're going to have a root development directory under which you can save your projects. Because of the number of projects, we suggest opening your code editor so that it points to the current project directory (whatever project you're working on at the time), rather than the root of all the projects. We're also going to use a standard set of configurations and plugins for the editors.
Atom has a huge array of options. You can access Atom's settings by any of the following methods:
- Click File Menu -> Preferences
- Press Ctrl + ,
You should see the settings open in the editor area, as shown here:
The settings page lives inside the editor area, and as such has a tab at the top. To close the settings page, simply click the close button on the tab.
You can also customize Atom through code by providing a CoffeeScript file in the .atom directory found off of your user directory, which is usually at C:\Users\<username>. In this file, you can provide custom startup code and even call customization packages that you write yourself. Here at ProgrammableWeb, we won't be doing customization through code, but you can learn more about it here. You can then learn more about what the Atom team calls "Hacking Atom." However, we will be adding some community-supplied packages, which we discuss below.
In addition to the Settings page, Atom provides access to many settings through a command palette; a small window in which you can type commands to control Atom. You can access the command palette either by:
- Click the View Menu -> Toggle Command Palette
- Press Ctrl+Shift+P
The command palette will open showing a small text area where you can type, with a list of commands in a scrolling list, as shown below. The official documentation makes use of the command palette from time to time; we don't use it much in our initial setups.
Here are some basic settings we recommend.
Tabs vs Spaces. Indenting sub-sections of code such as the internals of an if-then-else statement or a do-while loop is an important habit for ease of readability. Not just for you, but for others that may have to view your code later. Like other code editors, Atom has an indentation feature. Although this is a hotly debated topic, we're going to set our indentations to spaces instead of tabs for one simple reason: Spaces work better for copying and pasting code from our web pages into the editors. (You are welcome to reformat to tabs afterward if you prefer.) We're going to use four spaces to allow for easier reading of our code.
Language caveat: Unlike most other languages, Python relies on indentation levels and is picky about consistency between spaces and tabs. If you choose to convert any python code from spaces to tabs, you must make sure you do it for the entire file. Otherwise, you'll get errors as soon as you run the program.
To set the indentation to spaces, open the Settings page and click the Editor button, which is on the left of the Settings tab, second from the top. In the settings, scroll all the way to the bottom and near there you'll see Tab Length and Tab Type. Set Tab Length to 4. Set Tab Type to Soft (which means spaces; Hard means tab characters). Here's a screen capture:
We encourage you to scroll through the available settings to configure the editor to your liking.
Fonts and Sizes. This is up to you, as we all have a different vision and visual needs. Atom lets you choose the fonts and sizes you prefer. Unfortunately, the font family name is one area where Atom isn't particularly user-friendly because it uses HTML/ CSS syntax for font family names. HTML/CSS font families are typically lists of font names surrounded by single quotes (when the font name has spaces), with commas between the font names.
The setting is called Font Family and it's in the Editor section of the settings. There's no dropdown list or picker of any kind. You just have to know what fonts are available on your system, and you can type them in here. You can explore what fonts are installed on your system by clicking the Task Bar and in the search box type "font" and choose "Font Settings" in the suggestions; the Fonts window will open listing the fonts you have installed on your computer.
The size is more straightforward. Under Font Size simply type the size of the font you want in the editor.
You can also set a zoom level using hotkeys; this level applies only to the editor area. Try this: With a file open, hold down Ctrl and type a + key, which might require pressing Shift depending on which + key you use. You'll see the editor text increase inside. Reverse it by pressing Ctrl and the minus key.
Atom comes with a large number of extensions called packages. Beyond that, you can install any number of the 8000+ packages built by the Atom team and the community. You can see what packages you have installed by opening Settings and clicking on Packages, as shown here:
You can search for and install new packages by opening Settings and clicking the "Install" button, as shown here:
Then you can search for packages in the textbox near the top. After you search, you can install a package by clicking the "Install" package next to its name. If a package is already installed, the "Install" button will be replaced by a "Disable" button. Each package has a unique name that you can search for.
Many of the parts built into Atom are actually custom packages. For example, the Project tree view on the left is a package, and you can remove it and replace it with one from the community that might have different features you prefer. You can find these by searching the packages for "tree."
You can also search for packages on the main Atom website here. You can optionally download the code for any package and install it manually; however, we recommend installing from within the editor itself.
Below is a list of packages we recommend you use based on your preferred languages. To locate each package, simply search for the name we're including with each, shown in bold. Note, however, that many language packages are included by default when you install Atom using the processes we described above.
Important Note: We have found that there are many packages that show up in search results that are no longer maintained, and unfortunately the Atom team isn't removing these. Be careful with such packages. Always check a package's status by clicking on the " Repo" link on the package's page, which will usually take you to a GitHub page. Look at the code listed on the GitHub page and note the dates. If you see dates from a few days ago, then it's a good sign the package is maintained. If the dates are over two or three years ago, it's probably not maintained. You can also click on the Issues link on the GitHub page and see if issues are not being fixed and if users are saying the package does not Function anymore.
Here's a list of several languages that have packages already installed by default, along with the name of the package. You should not need to install these, but we're listing them here just in case. Most of these provide basic syntax highlighting:
Objective C: language-objective-c
Ruby: language-ruby and language-ruby-on-rails are both installed by default.
TypeScript: language-typescript (but see our note below; we recommend a different one).
Here are some special notes on some of these languages.
C#: Atom provides basic C# syntax highlighting through the default supplied language-csharp plugin. However, that if you're a professional C# programmer, we suggest you consider Visual Studio Code for your editor, as it supplies excellent Integration with the C# runtime, including debugging.
TypeScript: The community has built an excellent TypeScript package that is actively maintained, currently with over 1.7 million downloads. Search the packages for atom-typescript. You might consider replacing the default one, language-typescript, with atom-typescript.
Options: Running Atom from within Windows Subsystem for Linux (WSL)
When Atom is running on Windows, it does not have direct access to the files stored in your WSL directories. (This is in contrast to Visual Studio Code, which has full integration with WSL.) Therefore, you have a couple of options for editing files inside WSL:
- Switch to Visual Studio Code
- Use a different editor inside WSL
- Install Atom inside WSL
The final option, installing Atom inside WSL, works well if you're going to be working strictly within WSL. However, it requires you to install an X server. (We recommend the free version of MobaXterm, as it's fully integrated with WSL.) Then you should follow the instructions for installing Atom on Linux while working inside WSL.
After doing so, you can launch atom from inside WSL's bash shell by simply typing:
Optional: Integrating with Git
Git is by far the most used source code control software at the time this article was published. We have decided to use git for our source code control, in conjunction with the website GitHub, which hosts code that's stored in git. You are not required to use git to use our samples; you can even download the samples as .zip files from our respective GitHub project pages and not use git at all. But if you choose to use git, you can easily submit suggestions for improvements to our code.
By default, Atom comes installed with several packages that integrate with Git. One in particular is called language-git. You do not need to install any additional tools to work with Git from within Atom.
To open the language-git package, press Ctrl+9. A pane on the right hand will open listing your files with indicators of which files are modified, and what's been staged. When you click on a file, a "diff" of the file will appear on the left side as shown here:
In this example, the app.js file on the right pane has a yellow circle by it, meaning it has been modified but it's in the unstaged area. The package.json file has also been modified, and hence has a yellow circle, but has been added to the staging area. (Note that many developers who use git at the command line skip the staging area and commit their files directly, and as such would rarely see files in the staging area.)
You can move files to the staging area by right-clicking on a file in the unstaged list and choosing "stage" in the popup menu. You can move them back out of the staging area by right-clicking on the file in the staging area and in the popup choosing "unstage."
Then when you're ready to commit the staged files, fill in the message area with your commit message, and click Commit to master.
There are many other git tasks you can perform inside the editor. Note, however, that we typically do not recommend only using git from within Atom. Our reasoning is that most developer teams typically still use the command-line version of git, and many tasks are, quite frankly, a bit more intuitive to use at the command line rather than inside Atom. Therefore we're taking a two-pronged approach to git:
- When you're editing code that is inside a git repo, note the yellow circles that appear beside your files in the git window as you add and modify files.
- When you need to do any git work (e.g. create branches, add and commit files), we recommend using the command-line.
Our future projects here at ProgrammableWeb will have freely-available repos on Github. (And we welcome pull requests with suggested changes; we're making this a community-driven project.)