Step 3 — VS Code and extensions

A comfortable editor keeps learning going. VS Code is free, cross-platform, and has a huge ecosystem.

1. Install

Download from code.visualstudio.com.

• macOS — open the .dmg, drag to Applications
• Windows — check "Add to PATH" and "Add code command"
• Linux — .deb / .rpm or snap

2. First three settings

Ctrl+, (Win) / Cmd+, (mac):

Format On Save        → ✓
Tab Size              → 2
Insert Final Newline  → ✓

These alone clean up a lot.

3. Five must-have extensions

Extensions panel (Ctrl+Shift+X):

Extension	Role
ESLint	real-time JS/TS errors
Prettier	auto-format on save
GitLens	per-line git blame/history
Path Intellisense	import path completion
Korean Language Pack	Korean UI (optional)

Some extensions need a restart.

4. Language-specific

JavaScript / TypeScript  → built-in
Python                   → Python (Microsoft)
Java                     → Extension Pack for Java
Rust                     → rust-analyzer
Go                       → Go (Google)
Tailwind CSS             → Tailwind CSS IntelliSense

5. Ten shortcuts

Key	Action
Ctrl+P / Cmd+P	quick open file
Ctrl+Shift+P	command palette
Ctrl+ `	toggle terminal
Ctrl+B	toggle sidebar
Ctrl+/	toggle comment
Alt+↑/↓	move line
Shift+Alt+↓	duplicate line
Ctrl+D	select next occurrence
F2	rename symbol (project-wide)
Ctrl+F	find in file

Mastering the command palette is the single biggest win.

6. Project-level .vscode/

.vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "files.eol": "\n"
}

.vscode/extensions.json:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

Teammates get a prompt to install recommended extensions.

7. Integrated terminal

Ctrl+ opens one in the project root. Runpnpm dev` beside your code without path juggling.

8. Source Control panel

Built-in Git: stage, commit, branch — all in the UI. Mix with git commands as you learn.

9. Live Share — real-time collab

Install the Live Share extension and share a session. Others edit in your editor, share the terminal, and forward ports. Great for pairing.

10. Gotchas

• Too many extensions → slow startup. Install only what you use
• Default Windows shell is PowerShell. Change via Terminal: Select Default Profile
• Not formatting → check the language indicator (bottom-right). "Plain Text" means detection failed
• Prettier vs ESLint formatter conflict → set editor.defaultFormatter explicitly

11. Alternatives

• JetBrains (IntelliJ, WebStorm, PyCharm) — paid, strong for Java/large projects
• Neovim + plugins — keyboard-only, steep
• Cursor, Windsurf — VS Code forks with AI built in

VS Code remains the safest default.

Closing

An editor is a lifelong tool. Spend a day on 10 shortcuts, 3 settings, 5 extensions — it compounds for years.

Next

• 04-node-pnpm

References: VS Code Docs · Tips and Tricks.