VS Code tips - CodeWithJohn

VS Code is a free, lightweight code editor with powerful features for web development. A few habits and shortcuts can dramatically speed up your workflow.

Essential Shortcuts

Learning keyboard shortcuts is the fastest way to boost productivity in VS Code.

Shortcut	Action
`Ctrl+P`	Quick open file
`Ctrl+Shift+P`	Command palette
Ctrl+`` ``	Toggle terminal
`Ctrl+/`	Toggle line comment
`Alt+↑/↓`	Move line up/down
`Ctrl+D`	Select next occurrence
`Ctrl+Shift+K`	Delete line

Mac users

On macOS, replace Ctrl with Cmd for most shortcuts above. For example, Cmd+P opens quick file search and Cmd+Shift+P opens the command palette.

Recommended Extensions

Extensions add language support, linting, formatting, and more. Install them from the Extensions panel (Ctrl+Shift+X).

ESLint — catch JavaScript errors as you type
Prettier — auto-format code on save
GitLens — see git blame and history inline
Tailwind CSS IntelliSense — autocomplete for Tailwind classes
Error Lens — show errors inline in the editor

Settings Worth Changing

Open your settings with Ctrl+,. A few changes that make a big difference:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false
}

To edit these as JSON directly, open the command palette (Ctrl+Shift+P) and search for "Open User Settings (JSON)".

Multi-cursor Editing

Hold Alt and click to place multiple cursors. Use Ctrl+D to select the next matching word and edit all occurrences at once. This is especially useful for renaming variables or editing repetitive HTML.

เคล็ดลับ Multi-cursor

ถ้าต้องการเลือกทุก occurrence ของคำในไฟล์พร้อมกัน ให้ใช้ Ctrl+Shift+L แทน Ctrl+D ซึ่งต้องกดทีละครั้ง

The Integrated Terminal

VS Code has a built-in terminal so you don't need to switch between windows. Open it with Ctrl+`` `` ` and run your commands directly inside the editor.

You can open multiple terminals and split them side by side using the + and split icons in the terminal panel. Each terminal is independent — useful when you need to run the dev server in one and Git commands in another.