feat(vscode): add language-specific formatter overrides to .vscode/settings.json (#1491)

Closes #1485

## Summary

- Re-assert `editor.defaultFormatter: oxc.oxc-vscode` inside
`[javascript]`/`[javascriptreact]`/`[typescript]`/`[typescriptreact]`
blocks in the generated `.vscode/settings.json`. Without these, a
user-level `[language]` setting (e.g. a global Prettier override)
silently wins over the workspace-level default.
- Extract the override blocks into a dedicated
`VSCODE_LANGUAGE_OVERRIDES` constant so `VSCODE_SETTINGS` keeps a single
concern.
- Update `docs/guide/ide-integration.md` to reflect the new shape and
explain why per-language blocks are required.
- Existing `deepMerge` behavior is unchanged, so a user's pre-existing
`[typescript]: prettier` block is still preserved during `vp create`
against an existing `.vscode/settings.json`.

## Approach

The main question was whether to map `[lang]` blocks per project
template or to always include the JS/TS family. Picked the latter
because

- `vp create` accepts remote templates (`github:user/repo`, arbitrary
`create-*` packages) where the language set can't be known up front — a
per-template branch ends in a JS/TS fallback for these anyway, so the
per-template path doesn't actually buy correctness for the cases it's
meant to help.
- Keeps `vp create` and `vp migrate` consistent with a single source of
truth in `VSCODE_SETTINGS`.
- Including unused `[lang]` blocks has no runtime effect (VS Code only
applies them when matching files are opened) and is evolution-safe if
the user later adds a `.ts` file to an initially JS-only project.

## Tests

- `pnpm -F vite-plus test src/utils/__tests__/editor.spec.ts` — extended
assertions verify the four `[lang]` blocks are written, and that an
existing user's `[typescript]: prettier` is preserved during merge.

---------

Co-authored-by: JongKyung Lee <118944686+jong-kyung@users.noreply.github.com>

Author: oilater

docs/guide/ide-integration.md

@@ -22,6 +22,10 @@ You can also manually set up the VS Code config:
 ```json [.vscode/settings.json]
 {
   "editor.defaultFormatter": "oxc.oxc-vscode",
+  "[javascript]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[javascriptreact]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[typescript]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
+  "[typescriptreact]": { "editor.defaultFormatter": "oxc.oxc-vscode" },
   "oxc.fmt.configPath": "./vite.config.ts",
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
@@ -31,7 +35,7 @@ You can also manually set up the VS Code config:
 }
 ```
 
-This gives the project a shared default formatter and enables Oxc-powered fix actions on save. Setting `oxc.fmt.configPath` to `./vite.config.ts` keeps editor format-on-save aligned with the `fmt` block in your Vite+ config. Vite+ uses `formatOnSaveMode: "file"` because Oxfmt does not support partial formatting.
+This gives the project a shared default formatter and enables Oxc-powered fix actions on save. The language-specific override blocks (`[javascript]`, `[typescript]`, etc.) are required because VS Code prioritizes user-level `[language]` settings over the workspace-level `editor.defaultFormatter` — without them, a global Prettier configuration would silently take over. Setting `oxc.fmt.configPath` to `./vite.config.ts` keeps editor format-on-save aligned with the `fmt` block in your Vite+ config. Vite+ uses `formatOnSaveMode: "file"` because Oxfmt does not support partial formatting.
 
 To let the VS Code NPM Scripts panel run scripts through `vp`, add the following to your `.vscode/settings.json`:
 

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

@@ -111,6 +111,9 @@ describe('writeEditorConfigs', () => {
     expect(settings['oxc.fmt.configPath']).toBe('./vite.config.ts');
     expect(settings['editor.formatOnSave']).toBe(true);
     expect(settings['npm.scriptRunner']).toBeUndefined();
+    for (const lang of ['[javascript]', '[javascriptreact]', '[typescript]', '[typescriptreact]']) {
+      expect(settings[lang]).toEqual({ 'editor.defaultFormatter': 'oxc.oxc-vscode' });
+    }
   });
 
   it('includes additionalSettings in vscode settings.json when provided', async () => {
@@ -142,6 +145,9 @@ describe('writeEditorConfigs', () => {
       `{
   // JSONC comment
   "editor.formatOnSave": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
   "editor.codeActionsOnSave": {
     // preserve existing key
     "source.organizeImports": "explicit",
@@ -165,11 +171,17 @@ describe('writeEditorConfigs', () => {
 
     // Existing key is preserved (merge never overwrites)
     expect(settings['editor.formatOnSave']).toBe(false);
+    expect(settings['[typescript]']).toEqual({
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    });
 
     // New keys are added
     expect(settings['editor.defaultFormatter']).toBe('oxc.oxc-vscode');
     expect(settings['oxc.fmt.configPath']).toBe('./vite.config.ts');
     expect(settings['npm.scriptRunner']).toBe('vp');
+    for (const lang of ['[javascript]', '[javascriptreact]', '[typescriptreact]']) {
+      expect(settings[lang]).toEqual({ 'editor.defaultFormatter': 'oxc.oxc-vscode' });
+    }
 
     const codeActions = settings['editor.codeActionsOnSave'] as Record<string, unknown>;
     expect(codeActions['source.organizeImports']).toBe('explicit');

packages/cli/src/utils/editor.ts

@@ -7,9 +7,17 @@ import * as prompts from '@voidzero-dev/vite-plus-prompts';
 
 import { readJsonFile, writeJsonFile } from './json.ts';
 
+// Language-specific overrides because user-level [lang] settings beat the workspace default
+const VSCODE_LANGUAGE_OVERRIDES = {
+  '[javascript]': { 'editor.defaultFormatter': 'oxc.oxc-vscode' },
+  '[javascriptreact]': { 'editor.defaultFormatter': 'oxc.oxc-vscode' },
+  '[typescript]': { 'editor.defaultFormatter': 'oxc.oxc-vscode' },
+  '[typescriptreact]': { 'editor.defaultFormatter': 'oxc.oxc-vscode' },
+} as const;
+
 const VSCODE_SETTINGS = {
-  // Set as default over per-lang to avoid conflicts with other formatters
   'editor.defaultFormatter': 'oxc.oxc-vscode',
+  ...VSCODE_LANGUAGE_OVERRIDES,
   'oxc.fmt.configPath': './vite.config.ts',
   'editor.formatOnSave': true,
   // Oxfmt does not support partial formatting