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
-
Configure the current unified JavaScript/TypeScript formatting settings in VS Code:
-
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.
-
Put the same code in a Vue SFC and format the document:
<script setup lang="ts">
function example()
{
if (true)
{
console.log("example");
}
}
</script>
-
The Vue formatter moves both opening braces onto the preceding lines.
-
Add the deprecated language-specific equivalents and format again:
-
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.
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
package.json dependencies
{ "dependencies": { "vue": "~3.5.41" }, "devDependencies": { "typescript": "~6.0.2", "vue-tsc": "~3.3.9" } }Steps to reproduce
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" }Create a regular TypeScript file and format it:
The built-in TypeScript formatter preserves/moves the braces onto new lines.
Put the same code in a Vue SFC and format the document:
The Vue formatter moves both opening braces onto the preceding lines.
Add the deprecated language-specific equivalents and format again:
{ "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true, "typescript.format.placeOpenBraceOnNewLineForFunctions": true, "typescript.format.semicolons": "insert" }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.*orjavascript.format.*settings. When only the unifiedjs/ts.format.*settings are configured, the TypeScript formatter defaults are used instead (falsefor both brace settings andignorefor 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
getFormatCodeSettingsimplementation requests only:For embedded TypeScript this resolves to
typescript.format; for embedded JavaScript it resolves tojavascript.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.