VS Code Setup

Visual Studio Code is the most popular editor for data science and web development. In this guide, you will configure VS Code with the extensions and settings that will serve you throughout the entire course.

Essential Extensions

Install these extensions before proceeding. You can install them from the Extensions panel (Ctrl+Shift+X) or via the command line:

bash

# Python & data science
code --install-extension ms-python.python
code --install-extension ms-toolsai.jupyter
code --install-extension charliermarsh.ruff

# Web development
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss

# DevOps & infrastructure
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-containers

# Git & collaboration
code --install-extension eamodio.gitlens
code --install-extension github.vscode-pull-request-github

# Productivity
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension gruntfuggly.todo-tree

Extension packs

If you prefer a single install, the Python Extension Pack bundles Python, Jupyter, and several linting tools together.

Recommended Settings

Create or update your settings.json file (Ctrl+Shift+P → "Open User Settings (JSON)") with these recommended defaults:

json

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit"
    }
  },

  "ruff.lint.args": ["--config=pyproject.toml"],
  "ruff.format.args": ["--config=pyproject.toml"],

  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.fontSize": 13
}

Settings Sync

VS Code Settings Sync keeps your configurations consistent across machines using your GitHub or Microsoft account.

1. Press Ctrl+Shift+P and search for "Settings Sync: Turn On"
2. Sign in with your GitHub account
3. Choose what to sync: Settings, Keybindings, Extensions, Snippets, and UI State
4. On a new machine, sign in again and all your settings will download automatically

Corporate environments

If you are behind a corporate proxy, Settings Sync may fail. You can manually sync by copying the contents of ~/.config/Code/User/ between machines.

Keybindings

Efficient keybindings reduce context switching. Here are the most useful ones to memorize:

Action	Windows/Linux	macOS
Command Palette	Ctrl+Shift+P	Cmd+Shift+P
Open File	Ctrl+P	Cmd+P
Terminal	Ctrl+`	Cmd+`
Split Editor	Ctrl+\	Cmd+\
Go to Line	Ctrl+G	Cmd+G
Find in Files	Ctrl+Shift+F	Cmd+Shift+F
Toggle Sidebar	Ctrl+B	Cmd+B

Dev Containers

Dev Containers let you define a complete development environment inside a Docker container. This ensures every team member has the exact same setup, regardless of their host OS.

Create a .devcontainer/devcontainer.json in your project root:

json

{
  "name": "TDS Python Dev",
  "image": "mcr.microsoft.com/devcontainers/python:3.12",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "postCreateCommand": "pip install uv && uv sync",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "charliermarsh.ruff",
        "ms-toolsai.jupyter"
      ]
    }
  },
  "forwardPorts": [8000, 5173]
}

After creating this file:

1. Press Ctrl+Shift+P → "Dev Containers: Reopen in Container"
2. VS Code will build the container and install all specified extensions
3. Your terminal now runs inside the container with all dependencies pre-installed

When to use dev containers

Use dev containers when your project has complex dependencies, when onboarding new team members, or when you need to ensure reproducibility across machines. For quick scripts, a local virtual environment is simpler.