VS Code Setup for Developers

Visual Studio Code is one of the most popular code editors among developers. This guide will help you set up VS Code for an optimal development experience across different programming languages and frameworks.

Installation

Download and Install

1. Visit code.visualstudio.com
2. Download the version for your operating system
3. Follow the installation wizard

Command Line Access

After installation, you can open VS Code from the command line:

# Open current directory
code .

# Open specific file
code filename.js

# Open specific folder
code /path/to/project

Essential Extensions

Language Support

• Python: Python extension by Microsoft
• JavaScript: Built-in support, enhanced with ES7+ React/Redux/React-Native snippets
• TypeScript: Built-in support
• Go: Go extension by Google
• Rust: rust-analyzer
• Java: Extension Pack for Java

Productivity Extensions

• GitLens: Enhanced Git capabilities
• Prettier: Code formatter
• ESLint: JavaScript linting
• Auto Rename Tag: Automatically rename paired HTML/XML tags
• Bracket Pair Colorizer: Colorize matching brackets
• Indent Rainbow: Colorize indentation
• Path Intellisense: Autocomplete filenames

Theme and UI

• One Dark Pro: Popular dark theme
• Material Icon Theme: Beautiful file icons
• vscode-icons: More file icons
• Dracula Official: Dracula theme

Configuration

Settings (settings.json)

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.fontSize": 14,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme"
}

Keybindings (keybindings.json)

[
  {
    "key": "ctrl+shift+p",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+shift+`",
    "command": "workbench.action.terminal.new"
  }
]

Workspace Setup

Multi-root Workspaces

For projects with multiple folders:

1. File → Add Folder to Workspace
2. Save workspace as .code-workspace file

Example workspace file:

{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Shared",
      "path": "./shared"
    }
  ],
  "settings": {
    "typescript.preferences.includePackageJsonAutoImports": "on"
  }
}

Integrated Terminal

Multiple Terminals

• New Terminal: `Ctrl+Shift+``
• Split Terminal: Ctrl+Shift+5
• Switch Terminal: Ctrl+PageUp/PageDown

Terminal Profiles

{
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": "C:\\Windows\\System32\\cmd.exe",
      "args": [],
      "icon": "terminal-cmd"
    },
    "Git Bash": {
      "source": "Git Bash"
    }
  }
}

Debugging

Launch Configuration

Create .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "console": "integratedTerminal"
    },
    {
      "name": "Launch Python",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/main.py",
      "console": "integratedTerminal"
    }
  ]
}

Git Integration

Built-in Git Features

• Source Control Panel: Ctrl+Shift+G
• Git Graph: Visualize commit history
• Inline Git Blame: See who changed what
• Merge Conflicts: Visual conflict resolution

GitLens Features

• Blame Annotations: Inline blame information
• Code Lens: Show recent changes and authors
• File History: View file change history
• Compare: Compare branches, commits, and files

Tips and Tricks

Command Palette

• Ctrl+Shift+P: Open command palette
• Ctrl+P: Quick file open
• Ctrl+Shift+O: Go to symbol in file
• Ctrl+T: Go to symbol in workspace

Multi-cursor Editing

• Alt+Click: Add cursor
• Ctrl+Alt+Up/Down: Add cursor above/below
• Ctrl+D: Select next occurrence
• Ctrl+Shift+L: Select all occurrences

Zen Mode

• Ctrl+K Z: Enter zen mode for distraction-free coding
• Escape: Exit zen mode

Productivity Workflows

Snippets

Create custom snippets in snippets.json:

{
  "Console Log": {
    "prefix": "clog",
    "body": ["console.log('$1');"],
    "description": "Console log statement"
  },
  "React Component": {
    "prefix": "rcomp",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "React functional component"
  }
}

VS Code is a powerful editor that can be customized to fit any developer's workflow. Take time to explore its features and customize it to your needs!