← Back to Manual List
Software

VSCode Basic Operation Manual

Visual Studio Code installation, localization, shortcuts, and extensions quick reference.

VSCode Basic Operation Manual

Installation

Windows

  1. Go to VSCode official site
  2. Click “Download for Windows”
  3. Run the downloaded .exe file
  4. Click “Next” in setup wizard
  5. Check these options in Additional Tasks:
    • ☑ Create desktop icon
    • ☑ Add “Open with Code” to context menu
    • ☑ Register as editor for supported file types
  6. Click “Install” → “Finish”

Mac

  1. Go to VSCode official site
  2. Click “Download for Mac”
  3. Extract the downloaded .zip
  4. Drag Visual Studio Code.app to Applications folder
  5. Launch from Launchpad

⚠️ If “unidentified developer” warning appears: Right-click → “Open”

Interface Overview

ElementDescription
Menu BarFile, Edit, View menus
Activity BarLeft vertical bar. Explorer, Search, Git, Extensions
Side BarShows content selected in Activity Bar
Editor AreaWrite code here. Multiple tabs supported
PanelTerminal, Output, Problems
Status BarLine number, encoding, Git info

VSCode Interface

Keyboard Shortcuts

Basic Operations

FunctionWindowsMac
Command PaletteCtrl + Shift + P⌘ + Shift + P
Open FileCtrl + O⌘ + O
New FileCtrl + N⌘ + N
SaveCtrl + S⌘ + S
Save AllCtrl + K S⌘ + K S
CloseCtrl + W⌘ + W

Toggle Views

FunctionWindowsMac
Toggle SidebarCtrl + B⌘ + B
Toggle PanelCtrl + J⌘ + J
Toggle TerminalCtrl + @⌃ + @

Editing

FunctionWindowsMac
Copy LineShift + Alt + ↓Shift + Option + ↓
Move LineAlt + ↑/↓Option + ↑/↓
Multi-cursorCtrl + Alt + ↑/↓⌘ + Option + ↑/↓
Toggle CommentCtrl + /⌘ + /
ExtensionPurposePublisher ID
PrettierCode auto-formattingesbenp.prettier-vscode
Live ServerHTML live previewritwickdey.LiveServer
Markdown All in OneMarkdown supportyzhang.markdown-all-in-one
Auto Rename TagHTML tag auto-pairingformulahendry.auto-rename-tag
Code Spell CheckerSpell checkingstreetsidesoftware.code-spell-checker
GitLensGit enhancementeamodio.gitlens
indent-rainbowIndent colorizationoderwat.indent-rainbow

⚠️ Security Notes

Always verify when installing extensions:

Check ItemDetails
Publisher ID (Critical)Verify correct publisher ID above
Download CountShould be millions
ReviewsMany positive reviews
Last UpdatedRegularly updated

Practice: Create HTML File

Step 1: Open Folder

File → Open Folder → Select working folder

Step 2: Create New File

In Explorer, click “New File” → Enter index.html

Step 3: Enter Code

Type ! then press Tab for HTML template (Emmet)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Content</p>
  </body>
</html>

Step 4: Save and Preview

  • Save: Ctrl + S (Mac: ⌘ + S)
  • Live Server: Right-click → “Open with Live Server”

Practice: Create Markdown File

Create File

Create new file named article.md

Preview

ActionWindowsMac
PreviewCtrl + Shift + V⌘ + Shift + V
Side-by-side PreviewCtrl + K V⌘ + K V

Troubleshooting

ProblemSolution
Slow performanceDisable unused extensions. Run “Developer: Reload Window”
Won’t startDisable extensions. Reset settings. Reinstall

AI Integration: GitHub Copilot

FeatureDescription
Code CompletionPredicts and suggests next code
Next Edit SuggestionsPredicts where to edit next
Agent ModeDelegate tasks for AI to execute
ChatAnswers questions about code

Pricing: $10/month (Free for students/educators)

Back to Manual List