Skip to content

Unified js/ts.format settings are ignored in Vue script blocks #6150

Description

@DaRosenberg

Vue - Official extension or vue-tsc version

3.3.9

VSCode version

1.132.0

Vue version

3.5.41

TypeScript version

6.0.2

System Info

System:
  OS: macOS 26.5.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 724.06 MB / 64.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 24.13.1
  npm: 11.8.0
Browsers:
  Chrome: 151.0.7922.108
  Firefox: 152.0.6
  Safari: 26.5.2

package.json dependencies

{
  "dependencies": {
    "vue": "~3.5.41"
  },
  "devDependencies": {
    "typescript": "~6.0.2",
    "vue-tsc": "~3.3.9"
  }
}

Steps to reproduce

  1. Configure the current unified JavaScript/TypeScript formatting settings in VS Code:

    {
      "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
      },
      "js/ts.format.placeOpenBraceOnNewLineForControlBlocks": true,
      "js/ts.format.placeOpenBraceOnNewLineForFunctions": true,
      "js/ts.format.semicolons": "insert"
    }
  2. Create a regular TypeScript file and format it:

    function example()
    {
      if (true)
      {
        console.log("example");
      }
    }

    The built-in TypeScript formatter preserves/moves the braces onto new lines.

  3. Put the same code in a Vue SFC and format the document:

    <script setup lang="ts">
    function example()
    {
      if (true)
      {
        console.log("example");
      }
    }
    </script>
  4. The Vue formatter moves both opening braces onto the preceding lines.

  5. Add the deprecated language-specific equivalents and format again:

    {
      "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
      "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
      "typescript.format.semicolons": "insert"
    }
  6. The Vue script block is now formatted as expected.

The same issue applies to JavaScript script blocks and the corresponding javascript.format.* settings.

What is expected?

Vue script blocks should respect the current unified js/ts.format.* settings in the same way as regular JavaScript and TypeScript documents.

What is actually happening?

Vue Official only appears to read the deprecated typescript.format.* or javascript.format.* settings. When only the unified js/ts.format.* settings are configured, the TypeScript formatter defaults are used instead (false for both brace settings and ignore for semicolons).

Link to minimal reproduction

No repository is required; the settings and SFC above reproduce the issue in an otherwise empty Vue workspace.

Any additional comments?

I inspected the installed Vue Official 3.3.9 bundle. Its getFormatCodeSettings implementation requests only:

context.env.getConfiguration?.(
  getConfigTitle(document) + ".format"
)

For embedded TypeScript this resolves to typescript.format; for embedded JavaScript it resolves to javascript.format.

By comparison, VS Code's built-in TypeScript extension reads js/ts.format.* first and falls back to the language-specific section only when the unified value is not configured. That fallback is implemented inside the built-in extension, so it is not automatically available to Volar's independent TypeScript formatting service.

The language-specific settings are now marked as deprecated by VS Code, which makes duplicating all formatting settings an undesirable long-term workaround.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions