Bootcamp
A 60-minute VS Code bootcamp: set up settings sync, format-on-save, snippets, keybindings, and tasks so the editor stops being something you fight. Run it on a fresh laptop or rebuild your existing setup.
A 60-minute VS Code productivity bootcamp
EXAMPLE
# ===== Objectives =====
# 1. Turn on settings sync (so this is the LAST time you do this)
# 2. Set sensible global settings
# 3. Bind the shortcuts you'll use 20 times a day
# 4. Add snippets that remove typing chores
# 5. Wire tasks for tests / lint / start with a single keystroke
# ===== 0-5 min: Settings sync =====
# Cmd+Shift+P -> 'Settings Sync: Turn On'
# Sign in with GitHub or Microsoft.
# Pick: settings, keybindings, snippets, extensions, UI state.
# Now this setup follows you to every machine.
# ===== 5-15 min: settings.json =====
{
// Editor — visual + behaviour
"editor.fontFamily": "JetBrains Mono, Menlo, Consolas",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.5,
"editor.minimap.enabled": false,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.renderWhitespace": "boundary",
"editor.rulers": [80, 120],
"editor.cursorBlinking": "smooth",
"editor.smoothScrolling": true,
"editor.scrollBeyondLastLine": false,
// Format on save — every language picks its own formatter
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.organizeImports": "explicit" },
// Per-language defaults
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[python]": { "editor.defaultFormatter": "ms-python.black-formatter" },
"[php]": { "editor.defaultFormatter": "junstyle.php-cs-fixer" },
"[go]": { "editor.defaultFormatter": "golang.go" },
"[rust]": { "editor.defaultFormatter": "rust-lang.rust-analyzer" },
// Workbench
"workbench.editor.enablePreview": false,
"workbench.list.smoothScrolling": true,
"workbench.startupEditor": "none",
// Explorer + search
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.exclude": { "**/.turbo": true, "**/dist": true, "**/.next": true },
"search.exclude": { "**/node_modules": true, "**/dist": true, "**/*.lock": true },
// Git
"git.autofetch": true,
"git.confirmSync": false,
"diffEditor.ignoreTrimWhitespace": false,
// Terminal
"terminal.integrated.scrollback": 100000,
"terminal.integrated.copyOnSelection": true
}
# ===== 15-25 min: keybindings.json =====
# Cmd+K Cmd+S to open. Add:
[
{ "key": "alt+z", "command": "editor.action.toggleWordWrap" },
{ "key": "ctrl+alt+t", "command": "workbench.action.tasks.runTask", "args": "test" },
{ "key": "ctrl+alt+l", "command": "workbench.action.tasks.runTask", "args": "lint" },
{ "key": "ctrl+\\", "command": "workbench.action.splitEditor" },
{ "key": "alt+up", "command": "editor.action.moveLinesUpAction", "when": "editorTextFocus" },
{ "key": "alt+down", "command": "editor.action.moveLinesDownAction", "when": "editorTextFocus" }
]
# ===== 25-40 min: snippets =====
# Cmd+Shift+P -> 'Configure User Snippets' -> 'New Global Snippets File'
# Name it 'productive.code-snippets'
{
"console log var": {
"prefix": "clg",
"scope": "javascript,typescript,typescriptreact,javascriptreact",
"body": ["console.log('$1:', $1);"]
},
"React fc": {
"prefix": "rfc",
"scope": "typescriptreact",
"body": [
"export default function ${1:Component}(${2:props}: ${3:Props}) {",
" return ($0);",
"}"
]
},
"PHP class": {
"prefix": "cls",
"scope": "php",
"body": [
"final class $1 {",
" public function __construct() {",
" $0",
" }",
"}"
]
}
}
# ===== 40-55 min: tasks.json (per project) =====
# In .vscode/tasks.json — committed to the repo so the whole team gets it:
{
"version": "2.0.0",
"tasks": [
{
"label": "test",
"type": "shell",
"command": "npm test -- --watch",
"presentation": { "reveal": "always", "panel": "dedicated" },
"problemMatcher": []
},
{
"label": "lint",
"type": "shell",
"command": "npm run lint",
"presentation": { "reveal": "silent" }
},
{
"label": "dev",
"type": "shell",
"command": "npm run dev",
"presentation": { "reveal": "always", "panel": "dedicated" },
"isBackground": true,
"problemMatcher": []
}
]
}
# ===== 55-60 min: workspace setup =====
# 'File -> Save Workspace As...' shop.code-workspace
# Open with 'code shop.code-workspace'
# Commit it — every contributor gets the same folders, tasks, extensions.
# ===== Bonus — extensions worth installing on day one =====
# - GitLens inline blame, history navigation
# - Error Lens inline error messages
# - Prettier / Black / gofmt formatters per language
# - GitHub Pull Requests review PRs without leaving the editor
# - REST Client call HTTP endpoints from .http files
# - YAML, TOML, dotenv, Hexa color preview
# - Docker, Kubernetes (when relevant)
# - GitHub Copilot (when relevant)
# ===== Pitfalls =====
# - Installing 50 extensions on day one -> editor becomes slow + noisy
# - Not enabling settings sync -> redoing this every laptop
# - Skipping tasks.json -> typing 'npm test' 50 times a day
# - Not committing .vscode/tasks.json -> teammates do not benefit
Why it matters
Settings sync + format-on-save + per-project tasks.json is the trio that turns VS Code from a text editor into something that fades into the background. A weekend setup pays for itself every workweek; the longer you delay, the more hours you spend typing what should be a single keystroke.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Discussion
Loading…