🧩 Visual Studio Code

This page documents my Visual Studio Code setup (including VS Code Server and code‑server), the extensions I rely on, and recommended settings for development with Ansible, Python, Terraform, .NET, and general web/dev workflows.

📘 Summary

• Environment: VS Code Server (extensions stored under ~/.vscode-server/extensions).
• Focus Areas: Linting/formatting, source control, cloud/infra (Terraform, Azure), Python/.NET, Ansible/YAML, Markdown authoring.

🧩 Extensions

These are the extensions I typically install for a complete development environment.

⚙️ Recommended Key Settings

These settings can be added to your user settings.json or overridden per‑project in .vscode/settings.json.

✏️ Editor & Formatting

• "editor.formatOnSave": true — auto‑format on save
• "files.trimTrailingWhitespace": true — remove trailing whitespace
• "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": true } — apply ESLint and other fixes
• Language‑specific formatters:
  • "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
  • "[yaml]": { "editor.defaultFormatter": "redhat.vscode-yaml" }

🐍 Python

• "python.languageServer": "Pylance" — preferred for type checking and completions
• Configure your formatter (black, autopep8, ruff) based on project standards

🌍 Terraform

• "terraform.formatOnSave": true — or use the HashiCorp extension’s built‑in formatting

📄 YAML & Ansible

• "yaml.validate": true
• Add schema mappings if using custom playbook schemas

🔧 Git & Source Control

• "git.autofetch": true
• "git.confirmSync": false" — optional, speeds up workflow

🖥️ VS Code Server / code‑server Notes

• VS Code Server extensions live under:
  • ~/.vscode-server/extensions
  • or ~/.local/share/code-server/extensions (code‑server)
• Keep server‑side extensions updated to avoid client/server mismatches.

📂 Where settings.json Lives

🧪 Sample settings.json

Use this as a starting point and adjust paths/formatters as needed.

{
  "ansible.python.interpreterPath": "/opt/python_3.12/bin/python3",
  "editor.formatOnSave": true,
  "files.trimTrailingWhitespace": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "python.languageServer": "Pylance",
  "terraform.formatOnSave": true,
  "yaml.validate": true,
  "git.autofetch": true,
  "git.confirmSync": false
}

🌐 Remote Access

VS Code supports seamless access to remote file systems and development environments.

🛜 Accessing This Workspace from a Local VS Code Client

• Install Remote – SSH (ms-vscode-remote.remote-ssh)
• Use Remote Explorer or Remote‑SSH: Connect to Host…
• Connect to user@host — VS Code will launch server components automatically
• For browser‑based access, tools like code‑server expose a web UI (e.g., https://your-server.example.com) with most editor features

👉 See: Hosting a Visual Code Server

🌐 Using vscode.dev (Browser Fallback)

When no local VS Code or server is available, https://vscode.dev runs entirely in your browser.
Limitations: no remote terminal, no server‑side extensions, limited debugging.

🐧 Accessing Code Inside a WSL Container

• Install the WSL extension
• Open the repo
• Remote Explorer → WSL Targets
• Select your distro (e.g., Ubuntu-24.04)
• Click Open Folder

👉 See: WSL2

⌨️ Common Keyboard Commands