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.
Make sure to also watch the video at the top of the page!
Angular - The Complete Guide
Learn Angular from A - Z with this best-selling, 5* rated complete course!
React - The Complete Guide
In this course, you'll learn React from scratch. And then even further - including React Hooks, Redux & more!
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
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
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!
# The Integrated Terminal
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:
# The Command Palette
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.
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.
# Our Visual Studio Code Setup
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
# Selected Shortcuts & Where to Configure Them
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.
Note for Windows users
This article will list the shortcuts for macOS. I always added the corresponding command name in quotation marks. To find the shortcut on Windows machines, just open the Keyboard Shortcuts menu (hold
CTRL and enter
K + S) and search for the command name.
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.