fix(cli): use jsonc-parser for vscode settings (#1003)

Close #1002

Use `jsonc-parser` as underlying parser for vscode setting migration.
This approach is temporary because it won't keep comments in the file.

Now it is added in `dependencies`, I am not sure whether
`devDependencies` is better in this project.

---------

Co-authored-by: MK (fengmk2) <fengmk2@gmail.com>

Author: liangmiQwQ

packages/cli/package.json

@@ -339,6 +339,7 @@
     "detect-indent": "catalog:",
     "detect-newline": "catalog:",
     "glob": "catalog:",
+    "jsonc-parser": "catalog:",
     "lint-staged": "catalog:",
     "minimatch": "catalog:",
     "mri": "catalog:",

packages/cli/src/utils/__tests__/editor.spec.ts

@@ -40,6 +40,48 @@ describe('writeEditorConfigs', () => {
     expect(settings['editor.formatOnSave']).toBe(true);
   });
 
+  it('merges existing vscode JSONC settings (comments, trailing commas)', async () => {
+    const projectRoot = createTempDir();
+
+    const vscodeDir = path.join(projectRoot, '.vscode');
+    fs.mkdirSync(vscodeDir, { recursive: true });
+    fs.writeFileSync(
+      path.join(vscodeDir, 'settings.json'),
+      `{
+  // JSONC comment
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    // preserve existing key
+    "source.organizeImports": "explicit",
+  },
+}
+`,
+      'utf8',
+    );
+
+    await writeEditorConfigs({
+      projectRoot,
+      editorId: 'vscode',
+      interactive: false,
+      silent: true,
+    });
+
+    const settings = JSON.parse(
+      fs.readFileSync(path.join(projectRoot, '.vscode', 'settings.json'), 'utf8'),
+    ) as Record<string, unknown>;
+
+    // Existing key is preserved (merge never overwrites)
+    expect(settings['editor.formatOnSave']).toBe(false);
+
+    // New keys are added
+    expect(settings['editor.defaultFormatter']).toBe('oxc.oxc-vscode');
+    expect(settings['oxc.fmt.configPath']).toBe('./vite.config.ts');
+
+    const codeActions = settings['editor.codeActionsOnSave'] as Record<string, unknown>;
+    expect(codeActions['source.organizeImports']).toBe('explicit');
+    expect(codeActions['source.fixAll.oxc']).toBe('explicit');
+  });
+
   it('writes zed settings that align formatter config with vite.config.ts', async () => {
     const projectRoot = createTempDir();
 

packages/cli/src/utils/editor.ts

@@ -340,7 +340,7 @@ function mergeAndWriteEditorConfig(
   displayPath: string,
   silent = false,
 ) {
-  const existing = readJsonFile(filePath);
+  const existing = readJsonFile(filePath, true);
   const merged = mergeEditorConfigs(existing, incoming, fileName);
   writeJsonFile(filePath, merged);
   if (!silent) {

packages/cli/src/utils/json.ts

@@ -2,10 +2,15 @@ import fs from 'node:fs';
 
 import detectIndent from 'detect-indent';
 import { detectNewline } from 'detect-newline';
+import { parse as parseJsonc } from 'jsonc-parser';
 
-export function readJsonFile<T = Record<string, unknown>>(file: string): T {
+export function readJsonFile<T = Record<string, unknown>>(
+  file: string,
+  allowComments?: boolean,
+): T {
   const content = fs.readFileSync(file, 'utf-8');
-  return JSON.parse(content) as T;
+  const parseFunction = allowComments ? parseJsonc : JSON.parse;
+  return parseFunction(content) as T;
 }
 
 export function writeJsonFile<T = Record<string, unknown>>(file: string, data: T) {