Visual Studio Code or, as it is mostly called, VS Code, is one of the most popular coding tools today. It focuses on being fast and extendible, and can build up to the needs of a wider developer community.
Earlier, the focus was on providing developers with an extensive development environment that could integrate the complete software development life cycle, from writing code to deploying the solution. To increase productivity, several in-built features were provided to automate repetitive tasks. Most of the environments supported a particular language and an abundance of prebuilt features for that language.
Discussing editors and IDEs
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.
Discussing 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:
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.
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...
Setting up VS Code
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:
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.
Launching VS Code
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
- Write the
cd ~/command to go to your home folder.
- Write the
touch .bash_profilecommand to create a new file.
- Then, on the terminal window, write the following commands:
cat << EOF >> ~/.bash_profile #Add Visual Studio Code (code) Export PATH=''\$PATH:/Applications...
Basic editing in VS Code
Here are some examples.
To create a table with five rows having two columns in each row, you can use the following statement:
This is what the table looks like:
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:
This will generate the same table as in Figure 1.29, with
myclass placed as a class attribute for the
<tr/> tag. The...
Editing and code navigation in VS Code
Go to line
Go to symbol
Also, while you are traversing, VS Code will highlight the code section, as illustrated in the following screenshot:
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...