VSCode Power User

In this module, you'll master Visual Studio Code basics. In just one minute, I'll help you migrate all your settings and keyboard shortcuts from your previous editor to VSCode. You can migrate from Vim, Sublime, Atom, Eclipse, IntelliJ/JetBrains IDE, Xcode, and about 20 other editors. I've got you covered. Jump right in.

BASICS: VSCode Course IntroductionWATCH NOW!

BASICS: VSCode User Interface KnowHow02:18

BASICS: Custom VSCode Theme — Shades of PurpleWATCH NOW!

BASICS: The Command Palette To The Rescue01:05

BASICS: Keymaps - Help You Switch Today01:07

BASICS: Switch From Sublime/Vim/Atom/JetBrains IDE01:07

BASICS: Fixing Things You Break03:20

I'll help you customize the VSCode interface the way you like it. After setting a custom theme, custom file icons, I'll share the code fonts I like/use. Both free and paid options. Then we'll do away with extra UI elements, fine-tune the whitespace and cursor setup.

SETTINGS: VSCode Settings UI vs Settings.JSONWATCH NOW!

SETTINGS: Basic of Settings In Case You Missed It01:40

SETTINGS: Setting up an Icon Theme01:18

SETTINGS: Custom Code Font FTW04:49

SETTINGS: Set up Cursor & UI Ninja02:11

SETTINGS: UI + WhiteSpace Commando Part 105:25

SETTINGS: User Interface Setup Part 204:27

SETTINGS: Powerful Custom File Association02:28

The fun begins here. Excellent power user workflows in this module. Each video here will set you up for good. You'll be hacking around with different files, palettes, and panels all with different keyboard shortcuts. I'll help you bend VSCode to your will.

WORKFLOWS: File Handling Yoga Power User Workflows03:27

WORKFLOWS: Keybindings & Keyboard Shortcuts Editor04:38

WORKFLOWS: File Editing Power User Workflows09:10

WORKFLOWS: Power Navigation Go To File | Symbol | View04:53

WORKFLOWS: Macros Automate Repetitive Actions03:55

WORKFLOWS: Programming Productivity with Zen ModeWATCH NOW!

WORKFLOWS: Set up Code Spell Checks FTW03:38

WORKFLOWS: Snippets Intro + Snippet Creation08:27

WORKFLOWS: Use Code CLI (Command Line Interface) Like a Pro03:43

WORKFLOWS: Search And Replace Anything Anywhere05:57

WORKFLOWS: Changing Focus from Editor to Sidebar & Back00:50

Every web developer has to learn HTML & CSS. There's no way around it. In this module, I'll show you how powerful VSCode + Emmet integration works. You don't have to install it, it comes built-in. We'll go over all sorts of custom HTML/CSS workflows and extensions setup.

HTML: Emmet Basics + Cheat Sheet03:02

Emmet: Building Web Pages in a Jiffy02:52

Emmet: Multiply & NumberingNumber05:02

Emmet: Element Relations (Sibling/Child)05:02

Emmet: One Single Line to a Web Page02:08

Emmet: Tab Triggered Custom Setup01:18

HTML: Tag Highlight + Customization Like a Pro02:27

HTML: Auto Formatting + Insert New Line Workflow03:45

HTML: Favorite Extensions Review & Setup02:46

CSS: Emmet Basics Introduction + Cheat Sheet01:05

CSS: Easy Property/Value Fuzzy Search01:02

CSS: Unit Manipulation: rem, em, px, %02:45

CSS: Value Bumping — Decrease/Increase With Ease03:15

CSS: Value Bumping — Keyboard Shortcuts Setup01:09

CSS: Color Highlight Extension + Custom Settings01:23

As a full-time open source developer Git version control system and GitHub Pull Requests, Collaboration, Code Reviews are critical to my dev-setup. That's what I'll share in this module. How to be an awesome open source developer, write better Git Commit Messages, and set up the Git Lens. We'll also review Pug setup and customizing VSCode Breadcrumbs.

GIT: VSCode Git Integration Intro03:37

GIT: Power User Workflow with Git Range Select03:30

GIT: Favorite Extensions Review & Setup03:57

GIT: Git Config & GitIgnore files Syntax01:21

GIT: Setting up the amazing Git Lens Extension02:43

GIT: Reduce Git Lens Battery Footprint + Custom Settings01:34

GIT: GitHub Pull Requests + Review Workflow05:22

PUG: Language set up for Pug Templating03:39

BREADCRUMBS: All You Need To Know04:22

I love Markdown. I learned it for writing GitHub README.md files, but it has changed my life for good. This site, my emails, newsletters, blog posts all of that is written in Markdown. This module has a single ~15-minute video which is a mini-course in itself on perfecting your setup for writing Markdown with VSCode. Take a look and tell me that's not tasty enough?!

MARKDOWN: Basic Syntax01:11

MARKDOWN: Customize for More Control + Suggestions0 1:50

MARKDOWN: As the Default Language02:40

MARKDOWN: Linting + Bug Fixing Automation04:13

MARKDOWN: Custom Linting Rules Setup03:40

MARKDOWN: Preview Enhancements — Make it Like GitHub01:10

MARKDOWN: Auto Formatting Single Table + All Tables01:40

MARKDOWN: TODO Lists with Checkboxes01:40

MARKDOWN: Setup Word Counting01:00

MARKDOWN: Auto Numbering, Mathematics, Table of Contents03:23

MARKDOWN: Keybindings Fixes + Custom Keyboard shortcuts 01:43

JavaScript is eating the world, the web, the mobile, and even the Internet of Things tech space. You can write JavaScript functions and have them run in Microsoft Excel. Even VSCode is built with JavaScript, tell me about that. This is a hugely significant module, where I cover the JavaScript development setup. I'll take your hand, and we'll travel through different stages of JS Code debugging. We'll finally land on the VSCode debugging setup (which I bet you'll find the easiest of all). ES6+ Modern JavaScript, React, Frontend debugging with Chrome, custom extensions/snippets — this module has got you covered.

JAVASCRIPT: Intro to JavaScript with VSCodeWATCH NOW!

JAVASCRIPT: Power User Workflows11:21

JAVASCRIPT: JSON Schema Definitions1:02

JAVASCRIPT: Basics of a JavaScript Application03:18

JAVASCRIPT: Interacting with a JavaScript File06:04

JAVASCRIPT: Peeking & Definition Jumping + Keybindings05:21

JAVASCRIPT: Multiple Terminals & Custom Keybindings05:21

JAVASCRIPT: ESLint Set up Like a Pro03:14

JAVASCRIPT: Easiest Auto-formatting Prettier Setup06:10

JAVASCRIPT: Refactor Old to Modern JavaScript01:54

JAVASCRIPT: How Debugging Worked in Old Days01:42

JAVASCRIPT: Debugging with VSCode on Steroids01:47

JAVASCRIPT: Node Debugging With Nodemon - Part 106:57

JAVASCRIPT: Node Debugging With Nodemon - Part 210:11

JAVASCRIPT: Debugging ES6+ Modern JavaScript Code04:28

JAVASCRIPT: Debugging with Chrome & React.js Framework04:19

JAVASCRIPT: Intelligent Selection Expansion with Keyboard02:41

JAVASCRIPT: Eight Favorite Extensions Review & Setup05:53

I have been regularly contributing the WordPress Core software for over five years. PHP is one of my strong suits so when I switched over to VSCode the preference was to have a good PHP setup, where I can debug code with Xdebug, use Composer, build a coding-standards linting integration just like ESLint and have that awesome auto-formatting for PHP code. Took some time but I figured out some best possible 3rd party libraries + VSCode setup to do all that. After this module, you won't complain about PHP in VSCode.

PHP: 15 Favorite Extensions Review & Setup07:46

PHP: IntelliSense & IntelePhense Setup07:46

PHP: Debugger, Namespace, Symbols Setup01:14

PHP: Coding standards with PHP Code Sniffer phpcs02:46

PHP: Complete Coding Standards Setup for WordPress05:50

PHP: Building a Custom Auto-formatting Setup for PHP/WP04:19

PHP: Documentation help with Auto-DocBlock Generation02:12

PHP: Laravel Extensions + Snippets Review02:00

PHP: Symfony & CodeIgnitor Extensions + Snippets01:00

PHP: WordPress Toolbox, Search Docs + Keyboard shortcuts03:09

PHP: Setting VSCode for PHP + WordPress13:17

PHP: File Association for Auto-indexingWATCH NOW!

PHP: Custom Save & Run Setup + Review07:03

PHP: Debugging Basics With VSCode03:54

PHP: Debugging WordPress Code Like a Pro06:51

PHP: WordPress Custom Local Setup With Docker Containers06:01

PHP: WordPress Xdebug Local Setup for Debugging01:22

PHP: Listen for Xdebug inside VSCode Debugger04:41

PHP: Complete WordPress + VSCode Debugging Setup11:54

The best part of Visual Studio Code editor is that keeps out of your way. It can be as minimal as Sublime text and as powerful as an IDE like Eclipse, PhpStorm, etc. That's where the extensions ecosystem comes in. You'll find the best extensions community for VSCode, about 10,000 extensions to extend VSCode for Python, Go, C++, C#, Java, you name it. In this module, I'll review 50+ extension and customized setup.

EXTENSIONS: Introduction & What's Where's & How's03:15

EXTENSIONS: Go Programming Language Setup02:27

EXTENSIONS: Python Programming Language Setup02:55

EXTENSIONS: Ruby Programming Languages Setup01:24

EXTENSIONS: C++, C# & 25+ Languages Syntax + Snippets07:11

EXTENSIONS: Installing & Reviewing Microsoft Extensions03:04

EXTENSIONS: Visual Studio Live Share - Visual Studio Code 02:04

EXTENSIONS: Impressive Azure Extension Pack & Azure CLI01:13

EXTENSIONS: Order-Case-Manipulate Power User Workflows06:08

EXTENSIONS: Better Highlighted Comments Like a Pro03:07

EXTENSIONS: The Powerful Code Runner Extension01:52

EXTENSIONS: Managing Projects with the Project Manager02:21

EXTENSIONS: Backup and Sync your Settings + Setup06:06

EXTENSIONS: 50+ Extensions Reviewed & Installed05:00