Blog

atom text editor

How to Get Started with the Atom Text Editor

The Atom Text Editor

When it comes to text editors, Atom is the new big thing; all the cool coders are using it. Whether you’re a total n00b wanting to learn how to code or an experienced developer looking for a new IDE, you’d be hard pressed to find a better coding tool than the free, open-source Atom text editor.

Downloading And Launching Atom

The first thing you need to do is to go to atom.io and click the download button. When it finishes downloading, launch the application. When the Atom window opens up, you’ll be greeted by a beautiful welcome screen; a useful guide that will teach you everything you need to know about getting started. Sounds great, right? Well, if you close the welcome screen, you’ll find that it never comes up again, and you’re left to figure out Atom all on your own.

Is this an annoying UX design flaw? Or an opportunity to learn something awesome? It depends on how you look at it. You’re in luck, because here at FVI, we see every obstacle as an opportunity to learn and grow. So, let’s use this opportunity to learn about one of Atom’s most amazing features — arguably its most powerful and attractive feature that has been taking the developer community by storm: its hackability.

Hacking the Atom Text Editor

Atom is built on entry-level web development technologies like HTML, CSS, and JavaScript, so you can style it and program it to look and work however you want it to. Let’s use this amazing feature to program Atom to open the welcome screen every time you launch the application.

First, close the Atom text editor, quit the application, and then reopen it. You’ll notice right away that the welcome screen is gone, and there is no apparent way to get back to it. Now comes the fun part: let’s add a line to Atom’s initializing code, to make it open the welcome screen every time we launch the application.

Click on “Atom” in the application menu (before “File”) and select “Init Script”. If you can’t find it, you can use the search feature in “Help” to look for “Init Script”. Once you’ve opened Atom’s initialization script, you can paste the following line at the end:

atom.config.set ‘welcome.showOnStartup’, true

Then click ctrl+s to save the init script. Now, every time you launch Atom, it will show you the welcome screen! If you ever want to turn off this feature, all you need to do is go back into the init script and delete this line of code.

So, after you’ve saved the init script, go ahead and close the window, and relaunch the Atom application. Viola! Your welcome screen is back, and better than ever (because now it will stay for as long as you need it, and go away when you want it to).

Starting a New Project

Now we can really get to work!

Get started by opening a project by dragging a code file (or even an entire folder!) into the Atom window. Note that if you’re opening a folder, all the files will be browsable in the left-hand sidebar.

If you’ve never created a code file before, try out our introductory HTML tutorial.

If you want to create a new HTML file from scratch, all you need to do is click “file -> new file” in the menu bar, and save your new untitled document as a .html file (test.html, for example). Once it’s saved as an HTML file, you can use “snippets” to make things much easier. For example, type “html” (without the quotation marks) and then hit “tab.” Now just sit back, relax, and marvel at the magic of the Atom text editor, as an entire HTML5 boilerplate template appears before your eyes.

The Atom text editor is an open-source program with thousands upon thousands of features, which we could never possibly get into in a single blog post. For now keep playing with the options on the welcome screen; install a package (like seti-ui for example), choose a theme, customize the styling, hack more on the init script, and play around with snippets and shortcuts. Have fun, and happy coding!