VSCode Crash Course

Getting VSCode

1. Open your Web Browser:
   Launch your preferred web browser, such as Chrome, Firefox, or Edge.

2. Go to the Official Download Site

3. Download the VSCode installer for your operating system and install it.

Extensions

Name: Auto Close Tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
VS Marketplace Link: Download

Name: Auto Rename Tag
Description: Auto rename paired HTML/XML tag
VS Marketplace Link: Download

Name: Better Comments
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
VS Marketplace Link: Download

Name: Bookmarks
Description: Mark lines and jump to them
VS Marketplace Link: Download

Name: Code Spell Checker
Description: Spelling checker for source code
VS Marketplace Link: Download

Name: CodeSnap
Description: 📷 Take beautiful screenshots of your code
VS Marketplace Link: Download

Name: Color Highlight
Description: Highlight web colors in your editor
VS Marketplace Link: Download

Name: CSS Peek
Description: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
VS Marketplace Link: Download

Name: DotENV
Description: Support for dotenv file syntax
VS Marketplace Link: Download

Name: ES7+ React/Redux/React-Native snippets
Description: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
VS Marketplace Link: Download

Name: ESLint
Description: Integrates ESLint JavaScript into VS Code.
VS Marketplace Link: Download

Name: GitLens — Git supercharged
Description: Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
VS Marketplace Link: Download

Name: Icons
Description: Icons for Visual Studio Code.
VS Marketplace Link: Download

Name: indent-rainbow
Description: Makes indentation easier to read
VS Marketplace Link: Download

Name: IntelliCode
Description: AI-assisted development
VS Marketplace Link: Download

Name: IntelliCode API Usage Examples
Description: See relevant code examples from GitHub for over 100K different APIs right in your editor.
VS Marketplace Link: Download

Name: Live Server
Description: Launch a development local Server with live reload feature for static & dynamic pages
VS Marketplace Link: Download

Name: Monokai ST3
Description: Fork Monokai ST3 which realize syntax highlighting from ST3
VS Marketplace Link: Download

Name: Path Intellisense
Description: Visual Studio Code plugin that autocompletes filenames
VS Marketplace Link: Download

Name: PHP Debug
Description: Debug support for PHP with Xdebug
VS Marketplace Link: Download

Name: PHP Intelephense
Description: PHP code intelligence for Visual Studio Code
VS Marketplace Link: Download

Name: Prettier - Code formatter
Description: Code formatter using prettier
VS Marketplace Link: Download

Name: Prettify JSON
Description: Visual Studio Code Prettify JSON Extension
VS Marketplace Link: Download

Name: Quokka.js
Description: JavaScript and TypeScript playground in your editor.
VS Marketplace Link: Download

Name: Remote - SSH
Description: Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
VS Marketplace Link: Download

Name: Remote - SSH: Editing Configuration Files
Description: Edit SSH configuration files
VS Marketplace Link: Download

Name: SQLTools
Description: Connecting users to many of the most commonly used databases. Welcome to database management done right.
VS Marketplace Link: Download

Name: Svg Preview
Description: Preview for Svg files
VS Marketplace Link: Download

Name: Thunder Client
Description: Lightweight Rest API Client for VS Code
VS Marketplace Link: Download

Name: Todo Highlighter
Description: Highlights TODO keyword and lists all todos in the side bar.
VS Marketplace Link: Download

Shortcuts and Pro Tips

VSCode Tips & Tricks
VSCode Shortcuts
VIDEO - 25 VS Code Productivity Tips and Speed Hacks