{
  "name": "Portfolio Dev Container",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  
  // Configure tool-specific properties
  "customizations": {
    "vscode": {
      // Extensions to install in the container
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss",
        "dsznajder.es7-react-js-snippets",
        "christian-kohler.path-intellisense",
        "formulahendry.auto-rename-tag",
        "ms-vscode.vscode-typescript-next"
      ],
      // Settings to apply in the container
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "typescript.tsdk": "node_modules/typescript/lib",
        "tailwindCSS.experimental.classRegex": [
          ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
        ]
      }
    }
  },

  // Forward ports for Vite dev server
  "forwardPorts": [5173],
  "portsAttributes": {
    "5173": {
      "label": "Vite Dev Server",
      "onAutoForward": "notify"
    }
  },

  // Use 'postCreateCommand' to run commands after the container is created
  "postCreateCommand": "npm install",

  // Use 'postStartCommand' to run commands each time the container starts
  // "postStartCommand": "npm run dev",

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root
  "remoteUser": "node",

  // Features to add to the dev container
  "features": {
    "ghcr.io/devcontainers/features/git:1": {
      "version": "latest"
    }
  }
}