Learn Visual Studio Code (2020)
4.6 (926 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,321 students enrolled

Learn Visual Studio Code (2020)

Everything you need to know about Visual Studio Code, the most popular editor in Web Development!
Bestseller
4.6 (926 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,321 students enrolled
Created by James Quick
Last updated 2/2020
English
Current price: $62.99 Original price: $89.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Time-saving tips on how to efficiently navigate Visual Studio Code
  • Customize Visual Studio Code with shortcuts, themes, extensions, snippets, and more
  • Effectively debug JavaScript with Node, React, Angular, and Vue.
  • Integrate source control with Git/Github into Visual Studio Code
  • Generate code faster and more efficiently
Course content
Expand all 41 lectures 03:45:21
+ Introduction
3 lectures 11:01

Thank you so much for taking the course! I'm excited to share with you everything you need to know about the most popular editor in Web Development.


You can find additional show notes in the Github repo.

https://github.com/jamesqquick/Learn-VS-Code


In the majority of the demos, I will use the repository from my FREE course on Udemy, "Build a Quiz App with HTML, CSS, and JavaScript".

https://github.com/jamesqquick/Build-A-Quiz-App-With-HTML-CSS-and-JavaScript

Preview 02:21

What We'll Cover

  1. What VS Code is and why you care

  2. Language Support

  3. VS Code Features

Preview 05:42
  1. What We'll Cover

    1. Stable Build vs. Insider's Build

    2. Installing VS Code


Stable Build Download - https://code.visualstudio.com/download

Insider's Build Download - https://code.visualstudio.com/insiders/

Proxy Documentation (if necessary) - https://code.visualstudio.com/docs/setup/network

Preview 02:58
+ The User Interface
8 lectures 41:33

What We'll Cover

  1. Explore VS Code layout

  2. Discuss Activity Bar, Side Bar, Status Bar, Panels, and MiniMap

Preview 05:18
  1. What We'll Cover

    1. Shortcuts for opening/closing panels

    2. Zen Mode for optimal development

    3. the command palette

  2. Pro Tips

    1. ctrlCmd + Shift + B - toggle side bar

    2. ctrlCmd + Shift + D - toggle debug panel

    3. ctrlCmd + Shift + E - toggle file explorer panel

    4. ctrlCmd + Shift + X - toggle extensions panel

    5. ctrlCmd + Shift + G - toggle git panel

    6. ctrlCmd + Shift + F - toggle search panel

    7. ctrlCmd + Shift + P - open Command Palette

    8. ctrlCmd + Shift + K – delete line

    9. ctrlCmd + Shift + \ - jump to matching bracket

    10. Command + Ctrl + Shift + Left/Right (Mac) | Shift + Alt + Left/Right (Windows) - expand/shrink selection

    11. ctrlCmd K Z – toggle Zen Mode

Preview 04:38
  1. What We'll Cover

    1. Opening multiple files side by side

    2. Displaying multiple files in Grid Tab system

  2. Pro Tips

    1. Working on a monitor can provide extra editing space and improve efficiency!

    2. Drag files around to display side by side or in grid

    3. ctrlCmd + number - switch to Nth editor group

    4. ctrlCmd + \ - move file to split editor

Preview 03:38
  1. What we’ll cover

    1. Creating files in the Explorer and via Shortcuts

    2. Tabbing through open files

    3. Creating Multiple Workspaces

    4. Shortcut for quickly opening files

  2. Pro Tips

    1. Ctrl + Tab (Mac) | Alt + Tab (Windows) – tab to next file

    2. Ctrl + Shift + Tab (Mac) | Alt + Shift + Tab (Windows) - tab to previous file

    3. ctrlCmd + P to quick open files

    4. ctrlCmd + N to create new file

    5. ctrlCmd + W to close file

    6. ctrlCmd + S to save file

    7. Creating a file and defining the directory path will create any missing directories automatically

Preview 06:42
  1. What we’ll cover

    1. Shortcuts for navigating, copying, pasting, and moving text

    2. Multiline edits with multiple cursors

  2. Pro Tips

    1. Speed up key repeat and key delay to fly through code

    2. To perform a shortcut on an entire line, you do not need to select the line itself. Most shortcuts will be applied to the entire line by default.

    3. Option + Arrow Left/Right – Navigate word by word

    4. Cmd + Left/Right (Mac) | Home/End (Windows) – Go to beginning/end of line

    5. Cmd + Up/Down (Mac) | Ctrl + Home/End (Windows) – Go to beginning/end of file

    6. ctrlCmd + D – select current word

    7. ctrlCmd + Shift +Ctrl + Left/Right - expand/shrink selection

    8. Alt + Up/Down - move line

    9. Shift + Alt + Up/Down – Duplicate line

    10. ctrlCmd + Option + Shift + Arrow Up/Down - Multiple Cursors]

Navigating and Manipulating Text
04:52
  1. What we’ll cover

    1. Search and replace within a file

    2. Search and replace within a workspace

    3. Replace one at a time or all at once

  2. Pro Tips

    1. Selecting a piece of text and then searching (and replacing) will auto populate the search field with the copied text

    2. ctrlCmd + F – Search in current file

    3. Alt + Cmd + F (Mac) | Ctrl + H (Windows) – Search and replace in current file

    4. ctrlCmd + Shift + F – Search in workspace

    5. ctrlCmd + Shift + H – Search and replace in workspace

    6. ctrlCmd + Alt + Enter – replace all

    7. ctrlCmd + Shift + L – select all occurrences of current selection

    8. ctrlCmd + F2 – select all occurrences of current selection

Search and Replace Like a Ninja
03:50
  1. What we’ll cover

    1. What intellisense is and how it can increase efficiency and speed of development

    2. Explore built in intellisense functionality in VS Code

  2. Pro Tips

    1. Thanks to TypeScript typings, VS Code can provide intellisense for basic JavaScript objects like DOM elements with types parameters, valid parameter inputs options, etc.

Preview 05:43
  1. What we’ll cover

    1. What Emmet is and how it can speed up HTML and CSS development

    2. Basic Emmet snippets

  2. Pro Tips

    1. ! – Emmet shortcut to generate HTML5 boilerplate

Preview 06:52
+ Customization
9 lectures 50:22
  1. What we’ll cover

    1. Explore how shortcuts are managed by VS Code and customized by the developer

    2. Creating a few custom shortcuts

  2. Pro Tips

    1. ctrlCmd - Command on Mac and Control on Windows. This way, you can share many of the same key bindings across Mac and Windows

    2. ctrlCmd + K ctrlCmd + S – to open up Shortcuts page

Customizing Shortcuts
07:24
  1. What we’ll cover

    1. How settings are managed by VS Code and customized by the developer

    2. Tweaking settings to customize the editor

  2. Pro Tips

    1. Settings are incredibly easy and fast to customize. Spend some time trying out new settings and customizing them to fit you as a developer.

User and Workspace Settings
08:00
  1. What we’ll cover

    1. How to take advantage of Font Ligatures in VS Code

  2. Pro Tips

    1. Font Ligatures can provide increased readability in your code, not to mention give you a little flare!

    2. Set editor.fontLigatures to true and editor.fontFamily to “Fira Code” to take advantage of Font Ligatures

Using Font Ligatures
03:27
  1. What we’ll cover

    1. How extensions can add functionality and customization to VS Code

    2. Where to find and install extensions

    3. How to enable/disable installed extensions

Installing Your First Extension
03:45

Popular Extensions Part 1

  1. What we’ll cover

    1. First set of extremely popular and useful extensions

  2. Extensions

    1. VS Code Extensions

    2. Quokka

    3. Polacode

    4. Bracket pair Colorizer

    5. Rainbow Brackets

    6. Advanced New File

    7. Auto Close Tag

    8. Auto import (built in now?)

    9. Auto Rename Tag

    10. Html Tag Wrapper

    11. Live server

    12. Open in Browser

    13. Vs code icons

Popular Extensions Part 1
08:36

Popular Extensions Part 2

  1. What we’ll cover

    1. Second set of extremely popular and useful extensions

  2. Extensions

    1. Better comments

    2. JavaScript ES6 Snippets

    3. Import cost

    4. Dotenv

    5. Intellisense for css classnames

    6. Todo

    7. Bookmarks

Popular Extensions Part 2
06:08
  1. What we’ll cover

    1. Third set of extremely popular and useful extensions

  2. Extensions

    1. React Redux Snippets

    2. Vetur

    3. Project Manager

    4. Angular Extension Pack

    5. Editor config

    6. ES Lint

    7. Settings Sync

    8. Git Lens

    9. Prettier Code Formatter

Popular Extensions Part 3
02:52

What we’ll cover

  1. How you can synchronize your VS Code settings with the Settings Sync extensions

Settings Sync Extension
06:07
  1. What we’ll cover

    1. How to install themes to customize the look and feel of VS Code

    2. Popular themes to choose from

  2. Themes

    1. Night Owl

    2. Winter is Coming

    3. Shades of Purple

    4. Rainglow

    5. One Dark Pro

    6. Dracula

    7. Cobalt 2

    8. Material Theme

Themes
04:03
+ Writing and Formatting Code
7 lectures 47:07
  1. What we’ll cover

    1. How code snippets are manage by VS Code

    2. How to create and use custom snippets

  2. Pro Tips

    1. Create snippets for the code that you write often, using tab stops to dynamically fill in segments.

Snippets
09:52

Working with Markdown

  1. What we’ll cover

    1. How to write and preview Markdown in VS Code

    2. Markdown extension with extra shortcuts for working with Markdown

  2. Pro Tips

    1. The best Github repositories contain a detailed ReadMe.md file. Use VS Code to create your ReadMe files along with development.

    2. ctrlCmd+ Shift + V – open markdown preview

    3. Cmd + Shift + K V | Ctrl + K + V – open markdown preview side by side

Working With Markdown
05:22
  1. What we’ll cover

    1. Recognizing and removing unused variables

    2. Organizing import statements

    3. Refactoring code to a new file

    4. Using the highlighted indent guide

    5. Code folding

    6. Renaming variables

  2. Pro Tips

    1. Shift + Alt + F – format document

    2. ctrlCmd + . – to show available code actions

    3. Command Palette -> Organize Imports – organize imports

    4. ctrlCmd + K cntrl + C – comment current line

    5. ctrlCmd + K cntrl + U – uncomment current line

    6. ctrlCmd + Option [ - minimize coding folding region

    7. ctrlCmd + Option ] - maximize coding folding region

    8. ctrlCmd + K ctrlCmd + 0 – minimize all code folding regions

    9. ctrlCmd + K ctrlCmd + J – maximize all code folding regions

Organizing Your Code
04:48
  1. What we’ll cover

    1. How editor config files can be used to establish standard editor settings across multiple editors

    2. The Editor Config for VS Code extension for VS Code to recognize and respect editor config files

    3. Creating an editor config file to override VS Code settings and automatically format code on save

  2. Pro Tips

    1. Tabs vs Spaces (and so on and so on)… just pick what works for you and your team

Creating Standard Settings With Editor Config
03:16
  1. What we’ll cover

    1. How to install Prettier extension for VS Code

    2. Creating a Prettier config or customizing Prettier settings for formatting code

    3. Manually and automatically format code

  2. Pro Tips

    1. Find a configuration that works you and stick with it

Formatting Code with Prettier
04:47
  1. What we’ll cover

    1. How to install the ESLint package

    2. How to create an ESLint configuration file and/or the install and customize ESLint extension

    3. Manually and automatically format code

  2. Pro Tips

    1. Find a configuration that works you and stick with it

Formatting and Linting Code With ESLint
09:45

TSLint is now DEPRECATED.

Formatting and Linting Code With TSLint (DEPRECATED)
09:17
+ The Integrated Terminal
3 lectures 11:44
  1. What we’ll cover

    1. How to open and use the Integrated Terminal

    2. Working with multiple terminals

    3. How to choose your integrated shell

  2. Pro Tips

    1. Some prefer to use an outside terminal rather than the one built into VS Code. Give the integrated terminal a try and decide for yourself.

    2. ctrlCmd + Tilde – toggle integrated terminal

The Integrated Terminal
02:58
  1. What we’ll cover

    1. How to open and use the Integrated Terminal

    2. Working with multiple terminals

    3. How to choose your integrated shell

  2. Pro Tips

    1. Some prefer to use an outside terminal rather than the one built into VS Code. Give the integrated terminal a try and decide for yourself.

    2. ctrlCmd + Tilde – toggle integrated terminal

Customizing the Integrated Terminal Part 1
03:18
  1. What we’ll cover

    1. How to customize shortcuts to interact with terminal windows like files in the editor(opening, closing, and switching between terminal windows)

  2. Pro Tips

    1. Using the above configuration can make it much quicker and easier to work with multiple terminal windows.

Customizing the Integrated Terminal Part 2
05:28
+ Working With Git and Source Control
4 lectures 24:37

Built in Git Tools in VS Code

  1. What we’ll cover

    1. Exploring the Git source control manager panel for tracking file changes, adding and committing files, etc.

    2. Cloning and working with remote repositories

    3. Interpreting and leveraging the Git Status Bar

    4. Diffing file changes

  2. Pro Tips

    1. The built in Git tools in VS Code are great and can quickly replace outside tools.

    2. Clone a repository from right inside VS Code using the Command Palette (ctrlCmd + Shift + P) then Git:Clone

Built In Git Tools
05:05

This is an added video where we will cover using VS Code to work with remote Github repositories  by using clone, push, pull, etc.

Working with Remote Github Repositories
06:45

Most of these extensions will be replaced by the Git Lens extension in the next video

  1. What we’ll cover

    1. Git History, Git Blame, and Git Project Manager extensions

  2. Extensions

    1. Git History Extension

    2. Git Blame Extension

    3. Git Project Manager extension

Useful Extensions for Working With Git
07:34
  1. What we’ll cover

    1. What the Git Lens extension is and how it can help supercharge your Git workflow

Git Lens Extension
05:13
+ Debugging
5 lectures 29:16
  1. What we’ll cover

    1. Exploring the features of the built in debugging tools

    2. Learn how VS Code tracks debug configuration

    3. Create and run a debug configuration for Client Side JavaScript

  2. Pro Tips

    1. True debugging is much more efficient than using console.log() statements. Spent the time to learn the tools and it will make you a better developer.

Creating Your First Debug Configuration
08:59

What we’ll cover

  1. Create and run a debug configuration for Server Side JavaScript

Debugging Node (Server Side JavaScript)
08:48

What we’ll cover

  1. Create and run a debug configuration Angular

Debugging Angular CLI Applications
02:31

Debugging Create React App Applications

  1. What we’ll cover

    1. Create and run a debug configuration Angular

Debugging Create React App Applications
01:51

This video will be updated when Vue 3.0 is released.

What we’ll cover

  1. Create and run a debug configuration for Vue

Debugging Vue CLI Applications
07:07
+ Extras
1 lecture 08:23
  1. What we’ll cover

    1. How to share and edit code with others in real-time

    2. How to share local servers and terminal windows

  2. Pro Tips

    1. VS Live Share is a great way to do code reviews, peer programming, etc.

    2. When using Live Share you can decide exactly which files you want to share or not

VS Code Live Share
08:23
Requirements
  • Basic web development knowledge is useful but not required.
  • A computer and internet
Description

This course has been completely re-recorded in 2020 to make sure you get the latest content!

In just a few years, Visual Studio Code has become the most popular editor for Web Development. In short, it is open-source, cross-platform, full of functionality, and has an amazing community behind it. Many of the biggest names in Web Development have already made the switch, and so should you! If you're looking to learn the ins and outs of VS Code while increasing your efficiency and proficiency as a developer, this course is perfect for you. Whether you're brand new to Web Development or a seasoned veteran, there's something for everyone.

Who this course is for:
  • New web developers looking for the best tools.
  • Experienced Web Developers looking to switch over to Visual Studio Code
  • Web Developers looking to increase their speed and efficiency as a developer