VS Code + Dev Environment Setup

Reproducible Config for New Machines

Use this file to rebuild the same development setup on another Garuda/Arch-based machine.

What this includes:

• VS Code settings
• VS Code extension list
• System apps and developer dependencies
• Rebuild commands
• Verification checklist

1) VS Code Settings

Copy into your user settings file:

• Linux path: ~/.config/Code/User/settings.json

{
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "files.autoSave": "onFocusChange",

  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  "editor.minimap.enabled": false,
  "editor.smoothScrolling": true,

  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",

  "editor.inlineSuggest.enabled": true,
  "js/ts.updateImportsOnFileMove.enabled": "always",
  "git.autofetch": true,

  "breadcrumbs.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.enabled": true,

  "github.copilot.nextEditSuggestions.enabled": true,

  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",

  "gitlens.ai.model": "vscode",
  "gitlens.ai.vscode.model": "copilot:gpt-4.1"
}

Why these settings:

• Consistent formatting/lint behavior on save.
• Fast navigation and low visual noise.
• Better AI + Git visibility in daily workflow.

2) VS Code Extensions

Create an extensions backup file named extensions.txt with this content:

esbenp.prettier-vscode
dbaeumer.vscode-eslint
eamodio.gitlens
pkief.material-icon-theme
zhuangtongfa.material-theme
bradlc.vscode-tailwindcss
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
pranaygp.vscode-css-peek
wix.vscode-import-cost
ritwickdey.liveserver
steoates.autoimport
mgmcdermott.vscode-language-babel
xabikos.javascriptsnippets
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
ms-python.python
ms-python.vscode-pylance
ms-python.debugpy
ms-python.vscode-python-envs
github.copilot-chat
rangav.vscode-thunder-client
mikestead.dotenv

Install all extensions from file:

cat extensions.txt | xargs -L 1 code --install-extension

Create backup from current machine:

code --list-extensions > extensions.txt

3) Installed Apps and Dependencies

Core development tools

• git
• curl
• wget
• unzip
• tar
• base-devel

Runtime and language stack

• nodejs (managed with Corepack + pnpm)
• go
• postgresql

Container stack

• docker
• Docker Compose v2 (docker compose)
• containerd
• runc

Process and terminal workflow

• pm2
• tmux

Package managers

• pacman
• yay

Database tooling

• psql (from postgresql)
• beekeeper-studio-bin

4) Full Rebuild Commands (New Machine)

A. Install base dependencies

sudo pacman -Syu
sudo pacman -S git curl wget unzip tar base-devel nodejs go postgresql docker docker-compose pm2 tmux

B. Enable Docker service

sudo systemctl enable docker
sudo systemctl start docker
sudo usermod -aG docker $USER

Note: log out and back in once so docker group membership applies.

C. Install yay (AUR helper)

git clone https://aur.archlinux.org/yay.git
cd yay
makepkg -si
cd ..
rm -rf yay

D. Install AUR desktop/dev tools

yay -S beekeeper-studio-bin

E. Enable pnpm through Corepack

corepack enable
corepack prepare pnpm@10.33.0 --activate
pnpm --version

5) VS Code Restore Flow

Restore settings

1. Open VS Code.
2. Open Command Palette.
3. Run Preferences: Open User Settings (JSON).
4. Paste settings block from this file.

Restore extensions

1. Place extensions.txt in your home or workspace.
2. Run install command:

cat extensions.txt | xargs -L 1 code --install-extension

6) Quick Verification Checklist

Run these checks:

git --version
docker --version
docker compose version
pnpm --version
go version
psql --version
tmux -V
pm2 -v

If all return versions, setup is functional.

7) Daily Startup Flow (After Setup)

tmux new -s dev
docker compose up -d
git fetch --all --prune
git pull --rebase
pnpm install
pnpm dev

Recommended pane layout:

• Pane 1: app runtime
• Pane 2: PostgreSQL/queries
• Pane 3: Git and branch operations
• Pane 4: logs/tests

Final Mental Model

• Git: source of truth
• pnpm: application dependency/runtime scripts
• Docker: infrastructure services
• PostgreSQL + Beekeeper: data layer and inspection
• tmux + pm2: execution and process control

This gives you a repeatable environment that can be rebuilt quickly on any compatible machine.