Learn Visual Studio Code (2020)

What We'll Cover

1. Explore VS Code layout

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

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

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

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

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]

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

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.

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

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

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.

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

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

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 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

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

What we’ll cover

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

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

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.

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

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

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

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

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

TSLint is now DEPRECATED.

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

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

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.

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

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

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

1. What we’ll cover

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

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.

What we’ll cover

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

What we’ll cover

1. Create and run a debug configuration Angular

Debugging Create React App Applications

1. What we’ll cover

   1. Create and run a debug configuration Angular

This video will be updated when Vue 3.0 is released.

What we’ll cover

1. Create and run a debug configuration for Vue

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