Our focus in is this book is to explore and learn VS Code, but before we do that, let's discuss the difference between an editor and IDE and try to understand where and how VS Code is positioned for developers.

Over time, several languages and frameworks have become available for developers to work with. Along with these languages, a considerable amount of effort has been put in place to create the right tool to increase developer productivity and support the complete development life cycle.

These tools can be categorized into editors and IDEs.

Editors support a variety of languages, work around files and folders, and they are limited in terms of projects or solutions. They are lightweight and predominantly keyboard-centric, which allows developers to work faster.

IDEs support code editing, compiling, and debugging, as well as code execution. They are mainly specific to a particular language or a few selective languages. They usually work...

With a brief introduction to development tools, we will now start off our learning journey by exploring some basic features of VS Code.

Files and folders

Unlike an IDE, VS Code does not depend on creating a solution or a project file. Your project is your folder, with subfolders and files in it. You can use the File menu and Open File... or Open Folder to start editing, as illustrated in the following screenshot:

Figure 1.1 – File menu in VS Code editor

Opening the folder will load all the files of the folder in VS Code. You can open multiple folders at a time. These folders will be available in the left pane of the editor.

Workspace

Often, your product will be organized into multiple interlinked projects. In this case, VS Code provides an option to combine these folders in a workspace. This way, when you open a workspace, it will open all the related project folders.

To do this, you can simply select...

VS Code is a cross-platform editor and supports Windows, macOS, and Linux OS. You can start by visiting https://code.visualstudio.com.

Based on the operating system (OS) you are using, the website will prompt you to download for your OS. If you would like to download for another OS, you can click on other platforms or press the down arrow button that shows next to the OS name, as illustrated in the following screenshot:

Figure 1.11 – Different versions of VS Code for different OSes

There are two versions available for download. The stable version is updated every month with new features, whereas the insiders version is a nightly build that provides an early peak into the upcoming features. Both versions can run side by side on the same machine.

By now, you should have downloaded your copy of VS Code and followed the guided installation wizard to set up your environment. Next, let's start off by looking into different ways of launching VS Code and explore some command-line options.

The simplest way of starting VS Code is by running the code . command.

This will open up a new instance of VS Code. If this command does not work in your macOS installation, you can follow the next steps. For Linux, you can visit https://code.visualstudio.com and look for Setup | Linux.

Setting up the command line for macOS

If you already have a Bash profile, please skip Steps 1 and 2. Otherwise, proceed as follows:

1. Write the cd ~/ command to go to your home folder.
2. Write the touch .bash_profile command to create a new file.
3. Then, on the terminal window, write the following commands:

   cat << EOF >> ~/.bash_profile
   #Add Visual Studio Code (code)
   Export PATH=''\$PATH:/Applications...

VS Code comes with some great options, which will enable you to code faster. Let's look at some of the options.

Generating HTML

The Emmet 2.0 extension is built into the editor, and helps you to quickly write HTML code.

Here are some examples.

To create a table with five rows having two columns in each row, you can use the following statement:

table>tr*5>td*3 

This is what the table looks like:

Figure 1.29 – Generate HTML using the Emmet extension

As shown in the preceding screenshot, you will notice that VS Code starts showing you the HTML it will generate. Press Enter to generate the HTML.

In case you want to add a class attribute to the tag, use a dot (.) after the tag name. An example of this can be seen in the following code snippet:

table>tr*5.myclass>td*2

This will generate the same table as in Figure 1.29, with myclass placed as a class attribute for the <tr/> tag. The...

While writing code, developers are often working with several files at the same time. Quickly navigating between files or within the same file is an important feature.

VS Code offers multiple options for code navigation—let's explore them one by one.

Go to line

To move the cursor to a particular line and column, use the Goto (:) Line command, as illustrated in the following screenshot:

Figure 1.43 – Using the command palette to move cursor to a line and column

Go to symbol

To show the symbols used in your code and to navigate directly to a selected symbol, you can use Go to Symbol (@) in a File.

Also, while you are traversing, VS Code will highlight the code section, as illustrated in the following screenshot:

Figure 1.44 – Using the command palette to jump to a section of code

In the case of JavaScript, the command palette will show methods, as illustrated...

In this chapter, we started by looking at the editor and IDE space, and where VS Code falls. Then, we looked at the basic features of VS Code and moved on to setting up our environment. With VS Code being a multiplatform editor, we explained some steps related to macOS, and also provided guidance in case you are using a Linux OS. Next, we explored multiple ways of launching VS Code and also looked at several command-line options. Explaining the overall layout, we then moved on to showcasing some editing and code refactoring features. Finally, we closed out the chapter by looking at quick code navigation features.

By the end of this chapter, you should now have a basic background about development tools and a more detailed knowledge of VS Code as an editor. We learned about the basic features, layout, editing, and code navigation options.

Next, we will look in further detail at the VS Code extensions framework and how it can help you in enhancing your development experience...