Update vscode config handling (#42169)

This ensures we correctly preserve comments in the config similar to our
tsconfig handling and removes the `gitignore` updating as we can't infer
safely if a user wants this file ignored or not.

Fixes: #41808

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/lib/typescript/writeVscodeConfigurations.ts

@@ -1,50 +1,60 @@
 import path from 'path'
+import isError from '../is-error'
 import { promises as fs } from 'fs'
+import * as Log from '../../build/output/log'
+import * as CommentJson from 'next/dist/compiled/comment-json'
 
 // Write .vscode settings to enable Next.js typescript plugin.
 export async function writeVscodeConfigurations(
   baseDir: string
 ): Promise<void> {
-  const vscodeSettings = path.join(baseDir, '.vscode', 'settings.json')
-  let settings: any = {}
-  let currentContent: string = ''
-
   try {
-    currentContent = await fs.readFile(vscodeSettings, 'utf8')
-    settings = JSON.parse(currentContent)
-  } catch (err) {}
-
-  const libPath =
-    '.' + path.sep + path.join('node_modules', 'typescript', 'lib')
-  if (
-    settings['typescript.tsdk'] === libPath &&
-    settings['typescript.enablePromptUseWorkspaceTsdk']
-  ) {
-    return
-  }
-
-  settings['typescript.tsdk'] = libPath
-  settings['typescript.enablePromptUseWorkspaceTsdk'] = true
+    const vscodeSettings = path.join(baseDir, '.vscode', 'settings.json')
+    let settings: any = {}
+    let configExisted = false
+    let currentContent: string = ''
+
+    try {
+      currentContent = await fs.readFile(vscodeSettings, 'utf8')
+      settings = CommentJson.parse(currentContent)
+      configExisted = true
+    } catch (err) {
+      if (isError(err) && err.code !== 'ENOENT') {
+        throw err
+      }
+    }
 
-  const content = JSON.stringify(settings, null, 2)
+    const libPath =
+      '.' + path.sep + path.join('node_modules', 'typescript', 'lib')
+    if (
+      settings['typescript.tsdk'] === libPath &&
+      settings['typescript.enablePromptUseWorkspaceTsdk']
+    ) {
+      return
+    }
 
-  const vscodeFolder = path.join(baseDir, '.vscode')
-  try {
-    await fs.lstat(vscodeFolder)
-  } catch (e) {
-    await fs.mkdir(vscodeFolder, { recursive: true })
-  }
+    settings['typescript.tsdk'] = libPath
+    settings['typescript.enablePromptUseWorkspaceTsdk'] = true
 
-  await fs.writeFile(vscodeSettings, content)
+    const content = CommentJson.stringify(settings, null, 2)
+    const vscodeFolder = path.join(baseDir, '.vscode')
 
-  // Write to .gitignore if it exists
-  const gitIgnore = path.join(baseDir, '.gitignore')
-  try {
-    const gitIgnoreContent = await fs.readFile(gitIgnore, 'utf8')
-    if (!gitIgnoreContent.includes('.vscode')) {
-      await fs.writeFile(gitIgnore, `${gitIgnoreContent}\n.vscode\n`)
+    try {
+      await fs.lstat(vscodeFolder)
+    } catch (e) {
+      await fs.mkdir(vscodeFolder, { recursive: true })
     }
-  } catch (e) {
-    await fs.writeFile(gitIgnore, `.vscode\n`)
+    await fs.writeFile(vscodeSettings, content)
+
+    Log.info(
+      `VS Code settings.json has been ${
+        configExisted ? 'updated' : 'created'
+      } for Next.js' automatic app types, this file can be added to .gitignore if desired`
+    )
+  } catch (err) {
+    Log.error(
+      `Failed to apply custom vscode config for Next.js' app types`,
+      err
+    )
   }
 }