feat: add vscode installer

.changeset/few-cougars-live.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+Use custom editor labels for pages, layouts and API routes.

.changeset/thin-birds-brush.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+Use the workspace typescript version by default so you get Next.js specific typesafety!

cli/src/installers/index.ts

@@ -7,6 +7,7 @@ import { type PackageManager } from "~/utils/getUserPkgManager.js";
 import { dbContainerInstaller } from "./dbContainer.js";
 import { drizzleInstaller } from "./drizzle.js";
 import { dynamicEslintInstaller } from "./eslint.js";
+import { vscodeInstaller } from "./vscode.js";
 
 // Turning this into a const allows the list to be iterated over for programatically creating prompt options
 // Should increase extensability in the future
@@ -19,6 +20,7 @@ export const availablePackages = [
   "envVariables",
   "eslint",
   "dbContainer",
+  "vscode",
 ] as const;
 export type AvailablePackages = (typeof availablePackages)[number];
 
@@ -86,4 +88,8 @@ export const buildPkgInstallerMap = (
     inUse: true,
     installer: dynamicEslintInstaller,
   },
+  vscode: {
+    inUse: true,
+    installer: vscodeInstaller,
+  },
 });

cli/src/installers/vscode.ts

@@ -0,0 +1,7 @@
+import fs from "fs-extra";
+
+import { type Installer } from "~/installers/index.js";
+
+export const vscodeInstaller: Installer = ({ projectDir }) => {
+  fs.copySync("cli/template/extras/config/.vscode", projectDir + "/.vscode");
+};

cli/template/extras/config/.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  /**
+   * Makes sure you're using the TypeScript plugin that comes with Next.js
+   *
+   * @see
+   * https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin
+   */
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  /**
+   * Custom editor labels Makes it easy to distinguish between pages, layouts and API routes in
+   * Next.js
+   */
+  "workbench.editor.customLabels.enabled": true,
+  "workbench.editor.customLabels.patterns": {
+    "**/src/app/**/page.tsx": "${dirname} - Page",
+    "**/src/app/**/layout.tsx": "${dirname} - Layout",
+    "**/src/app/**/route.{ts,tsx}": "${dirname} - API"
+  }
+}