fix(language-service): ignore html wrapAttributes format settings for vue document

close #3987

Author: johnsoncodehk

packages/language-service/lib/plugins/vue-sfc.ts

@@ -23,8 +23,29 @@ export function create(): LanguageServicePlugin {
 					sfcDataProvider ??= html.newHTMLDataProvider('vue', loadLanguageBlocks(context.env.locale ?? 'en'));
 					return [sfcDataProvider];
 				},
+				async getFormattingOptions(document, options, context) {
+					return await worker(document, async vueCode => {
+
+						const formatSettings = await context.env.getConfiguration?.<html.HTMLFormatConfiguration>('html.format') ?? {};
+						const blockTypes = ['template', 'script', 'style'];
+
+						for (const customBlock of vueCode.sfc.customBlocks) {
+							blockTypes.push(customBlock.type);
+						}
+
+						return {
+							...options,
+							...formatSettings,
+							wrapAttributes: 'auto',
+							unformatted: '',
+							contentUnformatted: blockTypes.join(','),
+							endWithNewline: options.insertFinalNewline ? true
+								: options.trimFinalNewlines ? false
+									: document.getText().endsWith('\n'),
+						};
+					}) ?? {};
+				},
 			}).create(context);
-			const htmlLanguageService: html.LanguageService = htmlPlugin.provide['html/languageService']();
 
 			return {
 
@@ -148,28 +169,6 @@ export function create(): LanguageServicePlugin {
 						return result;
 					});
 				},
-
-				provideDocumentFormattingEdits(document, range, options) {
-					return worker(document, async vueCode => {
-
-						const formatSettings = await context.env.getConfiguration?.<html.HTMLFormatConfiguration>('html.format') ?? {};
-						const blockTypes = ['template', 'script', 'style'];
-
-						for (const customBlock of vueCode.sfc.customBlocks) {
-							blockTypes.push(customBlock.type);
-						}
-
-						return htmlLanguageService.format(document, range, {
-							...options,
-							...formatSettings,
-							unformatted: '',
-							contentUnformatted: blockTypes.join(','),
-							endWithNewline: options.insertFinalNewline ? true
-								: options.trimFinalNewlines ? false
-									: document.getText().endsWith('\n'),
-						});
-					});
-				},
 			};
 
 			function worker<T>(document: TextDocument, callback: (vueSourceFile: vue.VueGeneratedCode) => T) {

packages/language-service/tests/format/3987.spec.ts

@@ -0,0 +1,24 @@
+import { defineFormatTest } from '../utils/format';
+
+defineFormatTest({
+	title: '#' + __filename.split('.')[0],
+	languageId: 'vue',
+	input: `
+<style lang="scss"
+			 scoped>
+			.wrapper {
+				display: block;
+			}
+		</style>
+	`.trim(),
+	output: `
+<style lang="scss" scoped>
+.wrapper {
+	display: block;
+}
+</style>
+	`.trim(),
+	settings: {
+		'html.format.wrapAttributes': 'force-aligned',
+	},
+});