When we write code we do it in something called a text editor. As the name implies, that's a piece of software meant to edit text.
Word processing programs (like Microsoft Word, Google Docs, etc.) may be the first thing that comes to mind when you think of "text editors". But these programs are not ideal for writing code because they add styles and formatting that get in the way of code. We want plain, raw text without any extras like fonts, paragraph indentation, etc.
If you have a Mac, your device comes with a text editor called TextEdit which can be found in your Applications list. If you have a PC, the default text editor is Notepad, which can be found through the Start menu. The Mac Terminal application also includes a console-based text editor called Nano. These text editors allow us to write code with plain, raw text.
At Epicodus we use a free text editor called Atom. Atom was designed with web developers and computer programmers in mind, and includes tons of handy features and customization that help write and navigate code more efficiently.
To install Atom on your device, download the appropriate installer for your operating system at the Atom website.
Let's take a quick tour of Atom. When we open the editor, we arrive on an empty file with the name "untitled". If we add content to the file, we see the
x at the top becomes a blue circle. This tells us there is content that hasn't yet been saved. We'll save this file as my-first-webpage.html using the
.html extension to indicate that this will be a document written in HTML. The blue circle returns to a grey
x and we know that our file's content has been saved.
Atom offers developers the ability to customize the editor's settings and shortcuts. We can access the Settings view on a Mac by holding down the Command key (
cmd), pressing the comma key (
,), then releasing both. On a Windows machine we can hold down the control key (
ctrl), press down the Windows key, then release both.
Sometimes you'll see instructions that include multiple keys separated by a plus sign, like this:
,. When you see this it means you should hold down the first key, press the key(s) that come next, then release them all at the same time, like we did above.
One setting that we want to make sure we have in place is the tab length. Writing good code means making a habit of using consistent indentation. The standard for indenting lines of code is 2 spaces. We have confirmed that this is set to 2. So, rather than hitting the space bar twice, we can use the tab key for indentation.
You won't need to worry too much about all of the customization possibilities now but as you start gaining coding experience, remember that you can return to the Settings view to make updates to keyboard shortcuts, themes, or packages that add other functionality to the editor.
For more details about using Atom, take a look at the Atom Flight Manual in the Documentation on the Atom website.