VS Code

Extensions

• ChakX: Theme

• LiveServer: It gives a loopback address in local server for development

• Prettier: Used to format our code in a beautiful manner

• Image Preview: Shows little images on the side bar

• JavaScript (ES6) code snippets: Provides some shortcuts for JS cl for console.log() or af for arrow function

• Tailwind Intellisence

• Thunder Client or Echo API: API testing

• Mobile View: 📱 For mobile first testing

• Supermaven: Code on steroids

Settings

• We can open command pallet using Ctrl + Shift + P which is used for a variety of tasks/actions

• Toggle Word Wrap (Alt + Z)

• Format on save to on (This automatically formats our code on save)

• autosave to onfocuschange (Will automatically save changes)

• default formatter to Prettier

Moving Primary Sidebar

Shortcuts

General Navigation

• Command Palette: Ctrl + Shift + P Access all commands.

• Quick Open: Ctrl + P Quickly open files.

• Toggle Sidebar: Ctrl + B Show/hide the sidebar.

Editing

• Copy Line Up/Down: Alt + Shift + Up/Down Arrow Duplicate the current line or selection.

• Move Line Up/Down: Alt + Up/Down Arrow Move the current line up or down.

• Delete Line: Ctrl + Shift + K Delete the current line.

• Select Line: Ctrl + L Select the entire line.

• Comment/Uncomment Line: Ctrl + / Toggle line comment.

• Multi-Cursor Selection: Ctrl + Click Place multiple cursors.

Searching and Replacing

• Find: Ctrl + F Open the search box.

• Find in Files: Ctrl + Shift + F Search across files.

• Replace: Ctrl + H Open the replace box.

• Replace in Files: Ctrl + Shift + H Replace across files.

Code Navigation

• Go to Definition: F12 - Jump to the definition of a function, variable, etc.

• Peek Definition: Alt + F12 View a definition in a small inline window.

• Go to Line: Ctrl + G Go to a specific line number.

Terminal

• Toggle Terminal: Ctrl + ` Show/hide the integrated terminal.

Formatting

• Format Document: Shift + Alt + F Format the entire document.

User Snippets

• User Snippets to create custom code shortcuts such as for CSS reset code

• To create a user snippet follow these steps:
1. Ctrl + Shift + P and then type Snippets
2. Then new Global Snippets File
3. Name your snippet file
4. Then tweak the template depending on use-case