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

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.

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.

04-node-pnpm

References: VS Code Docs · Tips and Tricks.