Scribd
Upload
8 views2 pages

Vs Code Webdev Cheatsheet-1

This document is a cheat sheet for using Visual Studio Code in web development, detailing essential extensions, general and editing shortcuts, navigation commands, multi-cursor functionalities, Emmet abbreviations, integrated terminal commands, and version control with Git. It provides specific key combinations for both Windows/Linux and macOS users. The information is organized for quick reference to enhance productivity in web development tasks.

Uploaded by

rifanapa2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views2 pages

Vs Code Webdev Cheatsheet-1

This document is a cheat sheet for using Visual Studio Code in web development, detailing essential extensions, general and editing shortcuts, navigation commands, multi-cursor functionalities, Emmet abbreviations, integrated terminal commands, and version control with Git. It provides specific key combinations for both Windows/Linux and macOS users. The information is organized for quick reference to enhance productivity in web development tasks.

Uploaded by

rifanapa2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Visual Studio Code Cheat Sheet for Web Development

Essential Extensions for Web Development

Extension Name Purpose


Live Server Launches a local development server with live reload.
ESLint Provides real-time linting for JavaScript and TypeScript.
Prettier - Code Formatter Automatically formats code for better readability.
Debugger for Chrome Allows debugging JavaScript directly from VS Code.
Auto Rename Tag Automatically renames paired HTML tags.
Path Intellisense Provides path autocompletion for files and directories.
CSS Peek Lets you quickly preview CSS styles from HTML files.
REST Client Enables API testing within VS Code.
Tailwind CSS IntelliSense Provides autocompletion, linting, and syntax highlighting.

General Shortcuts

Action Windows/Linux macOS


Command Palette Ctrl + Shift + P / F1 Cmd + Shift + P / F1
Open File Ctrl + P Cmd + P
Toggle Sidebar Visibility Ctrl + B Cmd + B

Editing Shortcuts

Action Windows/Linux macOS


Cut Line Ctrl + X Cmd + X
Copy Line Ctrl + C Cmd + C
Move Line Up/Down Alt + Up/Down Arrow Option + Up/Down Arrow
Duplicate Line Shift + Alt + Up/Down Arrow Shift + Option + Up/Down Arrow
Delete Line Ctrl + Shift + K Cmd + Shift + K

Navigation Shortcuts

Action Windows/Linux macOS


Go to Line Ctrl + G Cmd + G
Go to Definition F12 F12
Peek Definition Alt + F12 Alt + F12
Navigate Back/Forward Alt + Left/Right Arrow Ctrl + - / Ctrl + Shift + -
Search and Replace

Action Windows/Linux macOS


Find Ctrl + F Cmd + F
Replace Ctrl + H Cmd + H
Find in Files Ctrl + Shift + F Cmd + Shift + F

Multi-Cursor and Selection

Action Windows/Linux macOS


Add Cursor Above/Below Ctrl + Alt + Up/Down Arrow Cmd + Option + Up/Down Arrow
Add Selection to Next Find Match Ctrl + D Cmd + D
Select All Occurrences of Find Match Alt + Enter Option + Enter

Emmet Abbreviations

Abbreviation Expands To
! Generates a basic HTML5 template.
ul>li*3 Creates a <ul> with three <li> elements.
div.container>div.row>div.col*2 Produces a structure with nested <div> elements.
a{Link} Generates an anchor tag with the text 'Link'.
input:text Creates an input element of type text.

Integrated Terminal

Action Windows/Linux macOS


Toggle Terminal Ctrl + ` Cmd + `
Create New Terminal Ctrl + Shift + ` Cmd + Shift + `

Version Control (Git)

Action Windows/Linux macOS


View Source Control Ctrl + Shift + G Cmd + Shift + G
Commit Changes Ctrl + Enter (in Source Control panel)
Cmd + Enter (in Source Control panel)
Stage Changes Click `+` icon next to modified files or
Click
use`+`
`giticon
addnext
.` to modified files or use
Push to Remote Repository Ctrl + Shift + P, then select 'Git: Push'
Cmd + Shift + P, then select 'Git: Push'

You might also like