Lesson Weekend

We will write and save our code in a text editor. As the name implies, it's a piece of software meant to edit text.

Word processing programs like Microsoft Word and Google Docs may be the first thing that comes to mind when you think of "text editors." However, 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, and so on.

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.

Visual Studio Code

At Epicodus, we use a free text editor called Visual Studio Code. Visual Studio Code, also known as VS Code, was designed with web developers and computer programmers in mind. It includes many useful features that help write and navigate code more efficiently.

Installation

To install Visual Studio Code on your device, download the appropriate installer for your operating system at the Visual Studio website.

Overview

Let's take a quick tour of Visual Studio Code. When we open the editor, VS Code will open a "Welcome" page that offers options such as "New file," "Open folder..." and so on. We will usually be creating new files and opening folders through the command line.

For now, click on "New file." This will open a blank screen where we can type. If we add content to the file, we see the x at the top becomes a black circle. Go to the "File" menu and click "Save As." 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 black circle returns to a grey x and we know that our file's content has been saved.

Visual Studio Code 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. For the keyboards at Epicodus, you will likely have to press Alt and ,.

Sometimes you'll see instructions that include multiple keys separated by a plus sign like this: cmd + ,. 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. Scroll down to "Editor: Tab Size" in the settings and confirm that the indentation is set for 2 spaces. This way, we can use the tab key for indentation instead of hitting the space bar twice.

We won't cover more advanced customization in this lesson. However, there are many things you can do to customize VS Code on your own machine, including adding keyboard shortcuts, themes, and packages that add other functionality to the editor.

Visual Studio Code Live Share Extension

Students of the online class should also download the Visual Studio Live Share Extension. This extension allows users to live share their code. We recommend downloading it even if you aren't a member of the online class. It is a great way to communicate with others about code.

Visual Studio Code Editor Versus Atom Code Editor

The videos in Introduction to Programming use the Atom code editor. Fortunately, the basic functionality in both VS Code and Atom are very similar. You may occasionally hear mention of Atom in these videos but they won't affect your ability to run the same code in VS Code.

Additional Resources

For more details about using Visual Studio Code, take a look at the Visual Studio documentation.