logo

Setup

Complete guide to setting up VS Code with my preferred configuration, extensions, and fonts.

Step 1

Essential Extensions

Install these essential VS Code extensions for development:

GitHub Copilot - AI pair programmer
Prettier - Code formatter
ES7+ React/Redux/React-Native snippets
Live Server - Local development server
Material Icon Theme or VS Code Icons
Python - For Python development
Remote - SSH/WSL - Remote development
Step 2

Quick Extension Install

Open Command Palette by pressing the keyboard shortcut

Ctrl + Shift + P (Windows/Linux) / Cmd + Shift + P (Mac)

Type "Extensions: Install Extensions" and search for each extension

Or install via CLI: code --install-extension [extension-id]

Step 3

VS Code Settings

Open Command Palette by pressing the keyboard shortcut

Ctrl + Shift + P (Windows/Linux) / Cmd + Shift + P (Mac)

Enter the text in prompt and press Enter ⏎

Preferences: Open Settings (JSON)

Copy the settings.json from the below window

settings.json

settings.json
{
  "github.copilot.nextEditSuggestions.enabled": true,
  "claudeCode.preferredLocation": "panel",
  "claudeCode.selectedModel": "opus",
  "chat.viewSessions.orientation": "stacked",
  "workbench.iconTheme": "vscode-icons",
  
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
  "editor.minimap.enabled": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorBlinking": "smooth",
  "files.autoSave": "afterDelay",
  
  "git.autofetch": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  
  "code-runner.runInTerminal": true,
  "code-runner.saveFileBeforeRun": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  
  "emmet.triggerExpansionOnTab": true,
  "emmet.useInlineCompletions": true
}
Final

Complete Setup

Paste the code in the settings.json file in VS Code

Save the settings.json file

Cmd + S (Mac) / Ctrl + S (Windows)and restart VS Code
Done!🚀