Let’s have a look at some common features we regularly use and their corresponding shortcuts.
Writing Code is a lot of fun in VS Code, but knowing some shortcuts definitely improves our coding experience. #Selected Shortcuts & Where to Configure Them Angular Essentials extension by John Papa.Dark+ theme, it can be selected as shown here.VS Code works great by default, therefore we don't use a lot of additional extensions:
Just search for an extension of your choice and install it, after a quick reload the new features should be available.
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. Although VS Code ships with strong support for languages like JavaScript out of the box, frameworks like Angular are not supported prefectly by default. #ExtensionsĮxtensions add additional features to VS Code. We always use the Dark+ theme in our videos and courses by the way, here is our complete VS Code setup. This includes navigating to the settings menu, selecting a menu in the Activity Bar or changing the color theme, just to name some.Īs an example the latter can be done by entering "Color Theme" in the Command Palette: The Command Palette let's you search for any kind of information and navigate to any menu in VS Code. Navigating in VS Code can be done via the menu at the top of VS Code:Ī faster and more convenient way is the Command Palette which can be opened via SHIFT + CMD + P. 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 VS Code comes with an integrated terminal, it can be displayed in the "View" => "Terminal" menu or via SHIFT + CTRL + ´. The Activity Bar allows you to navigate between the core features of VS Code:ġ) The Explorer contains your project data, that's the menu where you'll spend most of your time )Ģ) Search allows you to look for or replace specific code in your project filesģ) Source Control Management provides support for integrated source control tools like GitĤ) As the name indicates, VS Code also comes with integrated Debugging toolsĥ) 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Īs 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 That's the basic setup already, but how can we work with VS Code? #The Activity Bar Files and folders can be added with these two icons: 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.
Visual Studio Code (VS Code) is available for free and can be downloaded here.Īfter the installation, you can open VS Code and select a project folder in the "File" => "Open" menu at the top of the window: And then even further - including React Hooks, Redux & more! In this course, you'll learn React from scratch.