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 project or solution files, provide support while writing code in terms of IntelliSense, and build processes that are well integrated into the environment. They provide language-specific wizards to help in generating the project skeleton and code while providing support for Application Life Cycle Management (ALM). In summary, IDEs provide extensive productivity features but are limited to a set of languages and frameworks.

VS Code falls between the editor and IDE space. It's lightweight and fast, yet provides support for several languages through a set of easily installable VS Code extensions. It's a cross-platform editor supporting Windows, macOS, and Linux operating systems, and provides features to cover the complete development life cycle.

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 the Add Folder to Workspace… option and then use Save Workspace As… to save your workspace. This will generate a file of type .code-workspace that will contain all the folder names included in this workspace, as illustrated in the following screenshot:

Figure 1.2 – Project folders and the workspace file

Opening the workspace in the editor will open the linked project folders. The following screenshot shows how the workspace and folders are linked together in VS Code:

Figure 1.3 – Project folders part of workspace in the editor

The following code snippet shows the content of the .code-workspace file, for the preceding two projects:

{
	''folders'': [
		{
			''path'': ''Project 1''
		},
		{
			''path'': ''Project 2''
		}
	],
	''settings'': {}
}

The .code-workspace file stores the path of folders linked in the workspace.

IntelliSense

One of the most powerful features for any developer is code completion: it comes in very handy when the development environment prompts the methods or attributes of a class, or suggests a list of keywords matching with what you are typing.

VS Code provides out-of-the-box IntelliSense for JavaScript, TypeScript, Javascript Object Notation (JSON), HTML, CSS, and Sassy CSS (SCSS). If this list does not satisfy your requirements, you can add a language extension of your choice from the marketplace. Just as with any other IDE, use Ctrl + spacebar to trigger the IntelliSense for the context.

Tasks

Compared to editors, IDEs provide automated and well-integrated processes that increase the productivity of a developer. These can include build processes, linting, and deployment, among others. VS Code provides similar functionality through its Tasks framework, which is illustrated in the following screenshot:

Figure 1.4 – Command Palette showing the Tasks option

Based on the files in your projects, it can detect tasks for build tools such as gulp, grunt, jake, and npm and also provides an option to create your own task runners using predefined templates. You can also link your tasks to the overall build process, which is triggered by Ctrl + Shift + B. Have a look at the following screenshot:

Figure 1.5 – Select a task template

The preceding screenshot shows the list of task templates to choose from.

Debugging

Another important feature of VS Code is the ability to debug code. Using VS Code, you can debug Node.js, JavaScript, and TypeScript out of the box, as illustrated in the following screenshot:

Figure 1.6 – Multiplatform debugging support

Apart from the preceding code base, you can install debugger extensions from the marketplace within the tool, as illustrated in the following screenshot:

Figure 1.7 – Debugger extensions on marketplace

Chapter 6, Debugging Techniques, is dedicated to exploring debugging in detail with VS Code.

Version control

VS Code integrates Git for version control. You can quickly initialize your Git repository by calling the command palette with Ctrl + Shift + P or Command + Shift + P and selecting Git: Initialize Repository, as illustrated in the following screenshot:

Figure 1.8 – Initialize Git repository using the command palette

To clone a repository, call the command palette and select Git: Clone, VS Code will request you to enter the Uniform Resource Locator (URL). After entering the URL, you can specify the folder or directory where you want your code to be cloned. The Git: Clone functionality can be seen in the following screenshot:

Figure 1.9 – Clone Git repository using the command palette

Additionally, you can also search for your favorite source code management tool extensions, as illustrated in the following screenshot:

Figure 1.10 – Integrate other source code management extensions from marketplace

The preceding screenshot shows a list of source code management extensions available in VS Code.

Keyboard shortcuts

Keyboard shortcuts provide quick accessibility of features; using them, you can navigate to options using commands instead of menus. To view a complete list of keyboard shortcuts, you can go to Files | Preferences | Keyboard Shortcuts. You can also use the pencil icon to change the shortcut.

We have now explored some basic features of VS Code. Next, let's move toward setting up our VS Code environment.

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/Visual Studio Code.app/Contents/Resources/app/bin
   EOF

4. Close the terminal window and reopen to check whether the code . command works.

Now that your command line is set up and working, let's look at some different ways of launching VS Code.

The following command launches the code and opens the directory in VS Code where this is run:

code .

The –r variant allows you to open the specified workspace file in an already loaded VS Code instance; you can replace the workspace file with any file you would like to edit, as illustrated in the following code snippet:

code -r ''c:\My VS Code Projects\my project workspace.code-workspace'' 

The –n addition allows you to open a new instance of VS Code, as illustrated in the following code snippet:

code -n ''c:\My VS Code Projects\Project 1''

If you would like to open a particular file and go to a specific row and column, use the –g addition. The following command will launch a new instance of VS Code; open the launch.json file and place the cursor on row 5 and column 10:

code -n -g ''c:\My VS Code Projects\Project 1\.vscode\launch.json'':5:10Exploring VS Code Layout

In this section, we will explore the editor's layout and the different panes. To get you familiar with the editor, we will go through the different sections of the editor and explain their utility. The layout of the editor can be seen in the following screenshot:

Figure 1.12 – VS Code editor layout

The most prominent section of the editor is the big pane on the right. This is the place where you edit code. Files selected from the EXPLORER are opened in this pane. You can open multiple files for editing at the same time.

Activity Bar

The toolbar on the left is called the Activity Bar. The Activity Bar provides quick access to important features of the tool.

The first button, , is the explorer, where you see the folders and files loaded in VS Code, as illustrated in the following screenshot:

Figure 1.13 – Explorer

The number on the button shows the number of files changed and not saved. If Auto Save is enabled from File | Auto Save then this will not be shown, as every time a change is made, VS Code automatically saves it.

The search button allows you to search in files and folders. It searches the text inside a file. As you type, VS Code will filter the list of files containing the entered text, as illustrated in the following screenshot:

Figure 1.14 – Search text in files and folders

The next button is for version control. Git is very well integrated in the tool and provides some handy features.

If you have already initialized a Git repository or cloned an existing one, the source control button shows the changes made. We will be discussing Git in more detail in Chapter 8, Git and Azure DevOps. The button is illustrated in the following screenshot:

Figure 1.15 – Changes made to Git

To run and debug your code, use the debug button , which allows you to run the program and provides the usual debugging features. This is illustrated in the following screenshot:

Figure 1.16 – Debugger

To manage your extensions in VS Code, you can use the extension button , which is illustrated in the following screenshot:

Figure 1.17 – Extensions pane

In Chapter 2, Extensions in Visual Studio Code, we will explore extensions in more detail.

Status Bar

At the bottom is the Status Bar. It contains the Git branch you are working on and errors and warnings, with an option to directly drill down to them. On the right, VS Code will show the type of file you are working with, a feedback option, and a notification button.

Quick Links

On the top-right corner (Figure 1.12), you have an option to see the code changes by pressing the Open Changes button , and you will be able to edit two objects side by side by pressing the Split Editor button .

Panel

The panel displays errors and warnings and debug-related information, and integrates a terminal window, as illustrated in the following screenshot:

Figure 1.18 – VS Code panel

Integrated terminal

VS Code integrates a terminal window inside the editor. This is a very handy feature as you don't need to open a terminal window separately to run command-line instructions. Most of the frameworks and platforms provide command-line tooling, and this feature really comes in handy. One such example is while creating your Angular frontend using the Angular command-line interface (CLI).

VS Code provides an option to create several terminal windows for the same project. The shortcut key for creating a new terminal window is Ctrl + `; for adding a new terminal window, the shortcut key is Ctrl + Shift + `.

You can also select your default terminal window, as illustrated in the following screenshot:

Figure 1.19 – Option to select the default shell

Once you press the Select Default Shell option from the menu, VS Code will show a menu to change your default shell, as illustrated in the following screenshot:

Figure 1.20 – Command Palette with a list of options for the terminal shell

Similarly, by pressing the button in Figure 1.19, you can create a new terminal window. VS Code will list the open project folders in the command palette to let you select which project you would like to create in the terminal window.

With Ctrl/Command + Shift + 5, you can split the bottom pane to show two terminal windows side by side. The same can be achieved by pressing the button in Figure 1.19. It is possible to open several terminal windows side by side. To switch focus between the terminals, use Alt/Option + Right Arrow Key or Alt/Option + Left Arrow Key.

Split Editor

We have talked about the option to edit two documents side by side. VS Code takes this feature to the next level and allows a developer to open several windows side by side, as follows:

• Ctrl/Command + 2: This will open up the second editor.
• Ctrl/Command + 3: This opens up the third editor, all side by side.

You can go up to Ctrl/Command + 8. Each editor window is identified by the same keystroke, Ctrl/Command + <number>, which will allow you to switch between the editors.

Use Ctrl/Command + W to close the editor window; the one currently selected is closed.

Command palette

The command palette is one of the most important sections of the editor. VS Code is fast and focuses on keyboard-centric navigation; the command palette is the center piece of this editor.

You can quickly call the command palette by pressing Ctrl + Shift + P on Windows and Command + Shift + P on macOS.

On pressing this command, you will see a window pop up at the top of the editor initialized with a > sign, as illustrated in the following screenshot:

Figure 1.21 – Quick way to call a VS Code function using the command palette

This is a quick way of calling most of the editor options.

Search option: After you have opened the command palette, remove the > sign. Then, you will be able to search for files in the project. This is illustrated in the following screenshot:

Figure 1.22 – Search for files using the command palette

Help (?): After opening the command palette, type the question mark sign: you will see a list of commands you can run. This is illustrated in the following screenshot:

Figure 1.23 – List of commands

Caret (>) sign: This is the same as Ctrl/Command + Shift + P. From there, you can run any command (for example, running a task), as illustrated in the following screenshot:

Figure 1.24 – Command palette with default caret sign

debug: Use the debug command to launch the debugger or add a debug configuration, as illustrated in the following screenshot:

Figure 1.25 – Debugging options in the command palette

ext: This command helps you manage and install extensions, as illustrated in the following screenshot:

Figure 1.26 – Using the command palette to call extensions

We are almost done with the layout options in VS Code—let's explore themes before we close out this section.

Themes

Another important customization feature of the tool is the ability to set themes. Some developers like a dark colored environment, while others prefer light colors. VS Code provides you with a list of themes to choose from.

You can set your preferred theme by calling the command palette. Press Ctrl/Command + Shift + P to call the command palette, type theme, and then select Preferences: Color Theme, as illustrated in the following screenshot:

Figure 1.27 – Calling theme settings from the command palette

Here is a sample screenshot of the list of themes you will get to choose from:

Figure 1.28 – List of themes to choose from in VS Code

We are now familiar with the editor's layout. Next, let's look at some important editing features of VS Code.

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 cursor will be placed between the first <td></td> tag; use Tab to navigate to the next <td/> tags for faster editing.

Multi-cursor editing

One of the most important features of VS Code is the multi-select cursor. It has several variants, which we will explore now, as follows:

• Alt/Option + Ctrl/Command + Down Arrow Key: This option will allow you to place a cursor on multiple lines at the same place. In the following screenshot, you can notice the cursor is placed on five different lines at the same spot:

Figure 1.30 – Multi-cursor editing on the same position

• Ctrl/Command + Shift + L: This command will allow you to select multiple occurrences of the same text and edit at the same time. Pressing the arrow key will keep the cursors active and allow quick multi-cursor editing. Press Esc to remove the cursors. This is illustrated in the following screenshot:

Figure 1.31 – Multi-cursor editing of the same text

• Alt/Option + mouse click: This option will allow you to place cursors at specific points and edit at the same time. Press Esc to remove the cursor. This is illustrated in the following screenshot:

Figure 1.32 – Multi-cursor editing by placing cursor on mouse clicks

• Ctrl/Command + D: Highlight a text item and then, on each press of Ctrl/Command+D, the system will move the cursor to select the same text item. If you would like to skip a specific selection, press Ctrl/Command + K, and then continue with Ctrl/Command + D.
• Alt/Option + Shift + Down Arrow Key: Place the cursor on a particular line and press the command to duplicate the same line.
• Alt/Option + Down Arrow Key: Place the cursor on a particular line and press the command to move the line below. The same works for multiple selected lines.

Code refactoring

While writing code, there are opportunities when the code written can be further optimized to increase readability and maintainability. Readable code is easier to change. It allows other developers to easily find the required code section and make changes as required. In a software development life cycle, having to often maintain or change code is more time consuming then first writing it.

VS Code provides some nice code refactoring features. Support for JavaScript and TypeScript is built into the tool. Let's go through a few examples.

Extracting to a constant

Once you select a section of code, a light bulb appears on the left; on clicking that, you will see a context menu open up with some refactoring options. Once you select the Extract to constant in module scope option, VS Code will create a constant and replace it with the string literals—for example, 'Product List!', shown as follows:

Figure 1.33 – Extract to constant

The following screenshot shows the refactored code. Here, string literals have been replaced with a constant variable:

Figure 1.34 – Extract to constant refactored code

Apart from extract to constant, another option is extracting code to a method.

Extracting to a method

Most of the time while writing code, you come across a piece of code that can be reused. This code is extracted into a method to avoid code duplication. This enhances code maintainability, since future changes are not required to be done in several places.

VS Code provides a very easy-to-use and quick way to extract your code into reusable methods.

In the following example, the displayed success message is selected. A light bulb appears on the left and shows an Extract to method in class option:

Figure 1.35 – Reusable code can be extracted to a method

Once you select this option, VS Code will ask for a method name as an input, as illustrated in the following screenshot:

Figure 1.36 – Reusable code can be extracted to a method

On entering the method name, and as shown in preceding screenshot, the selected piece of code will be extracted into a method, and a method call will be placed in the same section.

Renaming symbols

It is often the case that while writing code, you might feel the need to rename some used variables. These variables are used in several places, and Find and Replace seems to be a hectic option.

VS Code here provides a quick Rename Symbol option.

Select the variable to be changed and press F2. VS Code will ask for the new variable, as illustrated in the following screenshot:

Figure 1.37 – Rename variable using F2

On pressing Enter, the variable name is replaced throughout the file, as illustrated in the following screenshot:

Figure 1.38 – Variable name changed to newVariableName

The preceding screenshot shows pageTitle changed to newVariableName.

Refactoring extensions

Furthermore, VS Code supports refactoring for other languages with extensions. You can search the refactoring extension for your language on the VS Code extension marketplace.

Snippets

Code snippets help you code faster—these are predefined code templates that VS Code suggests while writing code. The following is an example of a method template—on pressing Tab, the code on the right will be inserted:

Figure 1.39 – Code snippets

Apart from the predefined templates, there are several extensions available that will come with their own code snippets.

Custom snippets

Snippets help you to be quick in writing repetitive code, and in case the out-of-the-box snippets do not satisfy your requirements, VS Code provides you with an option to define your own custom snippets, called User Snippet.

Let's create a user snippet for HTML code.

Go to File | Preferences | User Snippet. The command pallet will pop up. Enter html and press Enter, as illustrated in the following screenshot:

Figure 1.40 – Create custom HTML code snippets

The html.json file contains the HTML user snippets. We will create a snippet that will generate a table. The list that follows details the different parts of a user snippet.

In our example, the following applies:

• table-snippet: This is the name of the snippet.
• prefix: The name mentioned in this section is used to call the snippet.
• description: This will be displayed in the pop-up window.
• body: This is the place where you write your code template. It's an array that will contain the line of code to be inserted when you call the snippet. \t is used for code indentation.

Copy and paste the following code into an html.json file:

    ''table-snippet'':{
        ''prefix'': ''mytable'',
        ''description'': ''Table Snippet'',
        ''body'': [
            ''<table>'',
            ''\t<tr>'',
            ''\t\t<td>Column 1</td>'',
            ''\t\t<td>Column 2</td>'',
            ''\t</tr>'',
            ''</table>'',
        ]
    }

So, our snippet is created. Next, we will call it. If the following code does not work for you, restart VS Code.

As soon as you start typing mytable, VS Code suggests the code snippet you created, as illustrated in the following screenshot:

Figure 1.41 – Calling the custom HTML code snippet created earlier

On pressing Tab, the code will be inserted, as illustrated in the following screenshot:

Figure 1.42 – Code created from the custom HTML code snippet

The preceding screenshot shows the table generated from User Snippet.

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 the following screenshot:

Figure 1.45 – Jump to code section in a JavaScript example

Using commands for navigation

Here are some useful commands for quick code navigation:

• Ctrl/Command + F12: Use this command to select an object and jump to its implementation.
• Ctrl/Command + Shift + F12: This is a quick way to peek into an implementation. The pop-up window also allows code editing. This is illustrated in the following screenshot:

Figure 1.46 – Peek into an implementation

The preceding screenshot shows an example where the ProductDetailComponent implementation is open in Quick Peek mode.

Navigating between files

VS Code provides multiple options for navigating between different files. Let's assume you have a bunch of files open in your editor. To select a particular file from currently opened files, hold Ctrl and then press Tab. VS Code will open a list of files, and you can move your selection by holding Ctrl and pressing Tab. An example list of files can be seen in the following screenshot:

Figure 1.47 – Files listed for navigation

Apart from using Ctrl (hold) + Tab, you can also sequentially switch between multiple files opened in the editor.

Use Alt/Option + Right Arrow or Alt/Option + Left Arrow to switch from one file to other opened files.

Commenting code

Last but definitely not least, how to quickly comment and uncomment code by using the following keyboard shortcuts:

• Ctrl/Command + K then C: Use this command to comment a line.
• Ctrl/Command + K then U: Use this command to uncomment a line.

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.