Visual Studio Code Introduction

Visual Studio Code is a very powerful and easy-to-use code editor. It comes with broad programming language support, is highly customizable with various extensions and it is for free - a great package for beginners and more advanced programmers in my opinion.

Visual Studio Code (VS Code) is available for free and can be downloaded here.

After the installation, you can open VS Code and select a project folder in the "File" => "Open" menu at the top of the window:

You should see your project files now, in case of the video at the top of the page - you shouldn't miss that! - we only got an empty project. Files and folders can be added with these two icons:

That's the basic setup already, but how can we work with VS Code?

The Activity Bar allows you to navigate between the core features of VS Code:

1. The Explorer contains your project data, that's the menu where you'll spend most of your time ;)

2. Search allows you to look for or replace specific code in your project files

3. Source Control Management provides support for integrated source control tools like Git

4. As the name indicates, VS Code also comes with integrated Debugging tools

5. Extensions allow you to add additional features to VS Code, for example improved support for languages like Python or frameworks like Angular, React or Vue

As we just get started, your main focus should be on the Explorer and the Extensions menus, feel free to dive deeper into the other menus too though!

VS Code comes with an integrated terminal, it can be displayed in the "View" => "Terminal" menu or via SHIFT + CTRL + ´. The terminal automatically navigates to your current project folder, you can also run multiple terminals simultaneously by clicking onto the plus symbol - a very convenient feature in case you need a development server running in the background for example:

Navigating in VS Code can be done via the menu at the top of VS Code:

A faster and more convenient way is the Command Palette which can be opened via SHIFT + CMD + P. The Command Palette let's you search for any kind of information and navigate to any menu in VS Code. This includes navigating to the settings menu, selecting a menu in the Activity Bar or changing the color theme, just to name some.

As an example the latter can be done by entering "Color Theme" in the Command Palette:

We always use the Dark+ theme in our videos and courses by the way, here is our complete VS Code setup.

Extensions add additional features to VS Code. Although VS Code ships with strong support for languages like JavaScript out of the box, frameworks like Angular are not supported prefectly by default.

With Extensions this can be changed easily, the Angular Essentials extension by John Papa for example makes working with Angular in VS Code a breeze.

Just search for an extension of your choice and install it, after a quick reload the new features should be available.

VS Code works great by default, therefore we don't use a lot of additional extensions:

• Dark+ theme, it can be selected as shown here

• Material Icon Theme

• Angular Essentials extension by John Papa

• Vetur by Pine Wu for VueJS

• Python

Writing Code is a lot of fun in VS Code, but knowing some shortcuts definitely improves our coding experience. Let’s have a look at some common features we regularly use and their corresponding shortcuts.

You can search for the commands listed in this article in the Keyboard Shortcuts menu in VS Code. To enter this, simply press and hold CMD and enter K + S on the keyboard.

• SHIFT + CMD + P (opens the command palette, "Show All Commands")

• SHIFT + CTRL + ´ (opens the integrated terminal, "Toggle Integrated Terminal")

• CMD + D (select next matching code, "Add Selection to Next Find Match")

• ALT + CMD + Up Arrow Key (adds the cursor at the same position in the prior line, "Add Cursor Above")

• ALT + CMD + Down Arrow Key (adds the cursor at the same position in the next line, "Add Cursor Below")

• SHIFT + ALT + F (format the entire code page => Depending on the programming language, you might have to install an extension to activate this feature, "Format Document")

• SHIFT + CMD + 7 (comment out the selected code lines, "Toggle Line Comment")

• CMD + ALT + A (comment out the selected code block, "Toggle Block Comment")

• CTRL + TAB (switch between open files in current project, "Open Next Recently Used Editor in Group")

• CMD + P (switch between recently opened files, "Open Recent...")

• CTRL + R (switch between projects, Open Recent...)

Another big help is the Keyboard Shortcut Reference. Just open the Command Palette and enter "Keyboard Shortcuts Reference" to open the corresponding .pdf file.

These were just the very basics of course, make sure to also watch the video at the top of the page where we dive even deeper into VS Code.