VSCode Crash Course
Published: 2023-10-04 01:54:38

## 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](https://code.visualstudio.com/download)

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](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

Name: Auto Rename Tag
Description: Auto rename paired HTML/XML tag
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

Name: Better Comments
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

Name: Bookmarks
Description: Mark lines and jump to them
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

Name: Code Spell Checker
Description: Spelling checker for source code
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

Name: CodeSnap
Description: 📷 Take beautiful screenshots of your code
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

Name: Color Highlight
Description: Highlight web colors in your editor
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

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](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

Name: DotENV
Description: Support for dotenv file syntax
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

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](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Name: ESLint
Description: Integrates ESLint JavaScript into VS Code.
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

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](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

Name: Icons
Description: Icons for Visual Studio Code.
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=tal7aouy.icons)

Name: indent-rainbow
Description: Makes indentation easier to read
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

Name: IntelliCode
Description: AI-assisted development
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

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](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.intellicode-api-usage-examples)

Name: Live Server
Description: Launch a development local Server with live reload feature for static & dynamic pages
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Name: Monokai ST3
Description: Fork Monokai ST3 which realize syntax highlighting from ST3
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=AndreyVolosovich.monokai-st3)

Name: Path Intellisense
Description: Visual Studio Code plugin that autocompletes filenames
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Name: PHP Debug
Description: Debug support for PHP with Xdebug
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug)

Name: PHP Intelephense
Description: PHP code intelligence for Visual Studio Code
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)

Name: Prettier - Code formatter
Description: Code formatter using prettier
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Name: Prettify JSON
Description: Visual Studio Code Prettify JSON Extension
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)

Name: Quokka.js
Description: JavaScript and TypeScript playground in your editor.
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

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](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)

Name: Remote - SSH: Editing Configuration Files
Description: Edit SSH configuration files
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh-edit)

Name: SQLTools
Description: Connecting users to many of the most commonly used databases. Welcome to database management done right.
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools)

Name: Svg Preview
Description: Preview for Svg files
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)

Name: Thunder Client
Description: Lightweight Rest API Client for VS Code
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Name: Todo Highlighter
Description: Highlights TODO keyword and lists all todos in the side bar.
VS Marketplace Link: [Download](https://marketplace.visualstudio.com/items?itemName=zerefdev.todo-highlighter)

## Shortcuts and Pro Tips
[VSCode Tips & Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)
[VSCode Shortcuts](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
[VIDEO - 25 VS Code Productivity Tips and Speed Hacks](https://www.youtube.com/watch?v=ifTF3ags0XI)