Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Learn Vscode

VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

Kyle's VSCode Tips and Tricks

VS Code Extensions

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency. 

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

Text Manipulation in VSCode

It surely depends on how verbose your programming language is, but there are always again things we have to repetitively type over and over again. As good web developers are lazy :wink: we automate our work, right? In this lesson I'm quickly showing you how easy it is to create code snippets for Visual Studio Code.

Create code snippets in Visual Studio Code

In this lesson, we're going to use Visual Studio Code's Remote Development Extensions Pack to set up a remote development environment with a server. We'll cover how to connect, how to set up an SSH alias, and how to use forwarded ports to run local servers seamlessly.

Set Up Remote Development in Visual Studio Code

As developers, we strive to be quick and productive. We love to automate things so we spend less time on daunting, manual work and more time on solving interesting problems.

In this lesson we're going to learn how to use emmet (which is built into VSCode) to quickly write HTML/JSX and how to use prettier (which we're going to install from extensions tab) to automatically format it so we may work faster and be more productive.

Use emmet and prettier in VSCode to quickly write and format JSX

Even if you are not a heavy VIM user and you are a VSCode user using the vim mode in VSCode can be very beneficial and give a productivity boost.

In this lesson, you will learn how to install a vim emulator on VSCode and get to know a few navigations tricks that will help you edit your code faster.


Use VIM mode in VSCode

Some developers prefer to use git in a terminal, some prefer more GUI-based solutions.

VSCode has both terminal and a GUI which allows you to be able to stage, diff, commit (and many more) files to a git repository without having to leave your editor. In this lesson we're going to see how to stage/unstage changes, how to create a commit message, how to revert a commit and push it again.

Stage, diff and commit changes using Source Control tab in VSCode

Numbered bookmarks will allow us to select a block of code, bookmark it and easily navigate back to it using the bookmark number.

In this lesson, you will learn how to use the `Numbered Bookmarks` extension to navigate your code faster.

### Keyboard Shortcuts

The default keyboard shortcut for adding a code bookmark is `cmd+shift+#` where `#` is a number from 0 to 9, This might interfere with other system's keyboard shortcuts like taking a screenshot `cmd+shift+4` and `cmd+shift+4`. You can change the default one to `shift+alt+#`.

To navigate bookmarks you can use `cmd+#` where `#` is your bookmark number

Navigate through code faster in VSCode using Numbered Bookmarks

In this lesson, we learn the basics of creating code snippets in VScode. 

Configure JavaScript Code Snippets in VSCode 

This lesson shows you how to debug your Node.js applications using the VS Code debugger.

Using the VS Code debugger with Node

Using multiple cursors is a fantastic way to speed up your productivity when working with and refactoring code in VSCode. Learn four different ways to use multiple cursors with VSCode.

Use Multiple Cursors with VSCode

The Turbo Console Log extension lets us quickly add console.log statements with additional data, which makes debugging your code easier.

Make Console Logging in VS Code 10x Easier with Turbo Console Log

In this video, you'll learn how to add a custom keyboard shortcut (also called "keybinding"), which will allow you to toggle between the Activity Bar including the Explorer, Search, Source Control, Debug, Extensions and any other views you might have. 

Add a Keyboard Shortcut to Toggle Between the VSCode Activity Bar Icons

If you find yourself with different needs in VSCode for different scenarios, like switching from your day-to-day coding setup to higher contrast and larger fonts for presenting at your local meetup (or recording screencasts), manually changing your configurations can be tedious and error prone. In this lesson, we'll use some CLI flags for VSCode to launch a new instance of VSCode that looks for your extensions and data in a non-default directory. Once configured, we'll setup an alias to launch your new configuration with a single word command so you don't need to use those CLI flags every time.

Maintain Multiple VSCode Configurations

VSCode gives us plenty of options for navigating and editing our code without needing to leave the keyboard. Learn these commands to speed up your day-to-day work.

Navigate Code like a Pro in VSCode

In this video, you'll learn how to add a custom keyboard shortcut (also called "keybinding"), which will allow you to switch between the Workbench window and the Integrated Terminal window.

Add a Keyboard Shortcut to Switch Between the VSCode Workbench and the Integrated Terminal

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Learn how to add a shortcut for templates of commonly reused sections of code like new files, functions, or loops.

Create a Shortcut for a New React File with Custom VSCode Snippets

Determine whether a keybinding in VS Code is duplicated and change the binding to a unique set of keys so you can use the shortcut.

Find and Fix Keybinding Clashes in VS Code

The VS Code debugger provide a rich debugging experience allowing you to step through your code line by line and view variable values. In this video you will learn how to enable source maps for TypeScript and use them with the VS Code debugger so you can write and debug code using the TypeScript source while Node executes the compiled output.

Debug TypeScript applications using the VSCode debugger

Use the Peacock extension to assign colors to the border of each VS code window or project.

Topics

Instructors

Content Type

VS Code