Update devcontainer configuration for Node.js support

Signed-off-by: James Pether Sörling <pethers@users.noreply.github.com>

Author: pethers

.devcontainer/devcontainer.json

@@ -1,16 +1,52 @@
 {
   "name": "HTML Dev Container",
-  "image": "mcr.microsoft.com/devcontainers/base:alpine", // changed image for compatibility
-  "remoteUser": "vscode",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:24-trixie",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "installDirectlyFromGitHubRelease": true,
+      "version": "latest"
+    },
+    // Using a single feature for Node.js for simplicity
+    "ghcr.io/devcontainers/features/node:1": {
+      "nodeGypDependencies": true,
+      "version": "24" // Aligned with base image
+    },
+    "ghcr.io/devcontainers/features/git:1": {
+      "ppa": true,
+      "version": "latest"
+    }
+  },
+
   "customizations": {
     "vscode": {
       "extensions": [
+        // Core Development
+        "dbaeumer.vscode-eslint",
+
+        // GitHub extensions
         "GitHub.copilot",
         "GitHub.copilot-chat",
-        "github.vscode-github-actions",
+
+        // TypeScript/Node support
+        "christian-kohler.npm-intellisense",
         "ritwickdey.LiveServer",
-        "ecmel.vscode-html-css" // Added to boost HTML and CSS IntelliSense
+        "ecmel.vscode-html-css",
+
+        // Keep minimal formatting support
+        "esbenp.prettier-vscode"
       ]
     }
+  },
+
+  "postCreateCommand": "npm install -g npm@latest typescript@latest eslint@latest && npm ci",
+  "shutdownAction": "none",
+
+  // Forward necessary ports
+  "forwardPorts": [5173],
+  "portsAttributes": {
+    "5173": {
+      "label": "Dev Server",
+      "onAutoForward": "notify"
+    }
   }
 }