feat(language-service): sync volar 2.0 formatting refactor

Refs volarjs/volar.js#138
vuejs · Feb 22, 2024 · d46aded · d46aded
1 parent 549d036
commit d46aded
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 116 deletions.
diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
@@ -283,67 +283,6 @@
 			"type": "object",
 			"title": "Volar",
 			"properties": {
-				"volar.format.initialIndent": {
-					"type": "object",
-					"description": "Whether to have initial indent.",
-					"default": {
-						"html": true
-					},
-					"properties": {
-						"html": {
-							"type": "boolean",
-							"default": true
-						},
-						"typescript": {
-							"type": "boolean",
-							"default": false
-						},
-						"javascript": {
-							"type": "boolean",
-							"default": false
-						},
-						"typescriptreact": {
-							"type": "boolean",
-							"default": false
-						},
-						"javascriptreact": {
-							"type": "boolean",
-							"default": false
-						},
-						"css": {
-							"type": "boolean",
-							"default": false
-						},
-						"scss": {
-							"type": "boolean",
-							"default": false
-						},
-						"less": {
-							"type": "boolean",
-							"default": false
-						},
-						"sass": {
-							"type": "boolean",
-							"default": false
-						},
-						"jade": {
-							"type": "boolean",
-							"default": false
-						},
-						"json": {
-							"type": "boolean",
-							"default": false
-						},
-						"jsonc": {
-							"type": "boolean",
-							"default": false
-						},
-						"json5": {
-							"type": "boolean",
-							"default": false
-						}
-					}
-				},
 				"vue.trace.server": {
 					"scope": "window",
 					"type": "string",
@@ -537,6 +476,18 @@
 					"type": "boolean",
 					"default": false,
 					"description": "Show inlay hints for component options wrapper for type support."
+				},
+				"vue.format.initialIndent.template": {
+					"type": "boolean",
+					"default": true
+				},
+				"vue.format.initialIndent.style": {
+					"type": "boolean",
+					"default": false
+				},
+				"vue.format.initialIndent.script": {
+					"type": "boolean",
+					"default": false
 				}
 			}
 		},

diff --git a/packages/language-core/src/generators/template.ts b/packages/language-core/src/generators/template.ts
@@ -480,8 +480,8 @@ export function* generate(
 				content,
 				start,
 				lines.length <= 1 ? formatBrackets.curly : [
-					formatBrackets.curly[0],
-					lines[lines.length - 1].trim() === '' ? '' : formatBrackets.curly[1],
+					lines[0].trim() === '' ? '(' : formatBrackets.curly[0],
+					lines[lines.length - 1].trim() === '' ? ')' : formatBrackets.curly[1],
 				],
 			);
 		}

diff --git a/packages/language-service/src/plugins/vue-extract-file.ts b/packages/language-service/src/plugins/vue-extract-file.ts
@@ -70,23 +70,22 @@ export function create(ts: typeof import('typescript/lib/tsserverlibrary')): Ser
 						return codeAction;
 
 					const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-					const languageServiceHost = context.inject<Provide, 'typescript/languageServiceHost'>('typescript/languageServiceHost');
 					const sourceFile = languageService.getProgram()!.getSourceFile(vueCode.fileName)!;
-					const sourceFileKind = languageServiceHost.getScriptKind?.(vueCode.fileName);
 					const toExtract = collectExtractProps();
-					const initialIndentSetting = (await context.env.getConfiguration!('volar.format.initialIndent') ?? { html: true }) as Record<string, boolean>;
+					const templateInitialIndent = await context.env.getConfiguration!<boolean>('vue.format.initialIndent.template') ?? true;
+					const scriptInitialIndent = await context.env.getConfiguration!<boolean>('vue.format.initialIndent.script') ?? true;
 					const newUri = document.uri.substring(0, document.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
 					const lastImportNode = getLastImportNode(ts, script.ast);
 
 					let newFileTags = [];
 
 					newFileTags.push(
-						constructTag('template', [], initialIndentSetting.html, sfc.template.content.substring(templateCodeRange[0], templateCodeRange[1]))
+						constructTag('template', [], templateInitialIndent, sfc.template.content.substring(templateCodeRange[0], templateCodeRange[1]))
 					);
 
 					if (toExtract.length) {
 						newFileTags.push(
-							constructTag('script', ['setup', 'lang="ts"'], isInitialIndentNeeded(ts, sourceFileKind!, initialIndentSetting), generateNewScriptContents())
+							constructTag('script', ['setup', 'lang="ts"'], scriptInitialIndent, generateNewScriptContents())
 						);
 					}
 					if (sfc.template.startTagEnd > script.startTagEnd) {
@@ -290,16 +289,6 @@ function constructTag(name: string, attributes: string[], initialIndent: boolean
 	return `<${name}${attributesString}>\n${content}\n</${name}>\n`;
 }
 
-function isInitialIndentNeeded(ts: typeof import("typescript/lib/tsserverlibrary"), languageKind: ts.ScriptKind, initialIndentSetting: Record<string, boolean>) {
-	const languageKindIdMap = {
-		[ts.ScriptKind.JS]: 'javascript',
-		[ts.ScriptKind.TS]: 'typescript',
-		[ts.ScriptKind.JSX]: 'javascriptreact',
-		[ts.ScriptKind.TSX]: 'typescriptreact',
-	} as Record<ts.ScriptKind, string>;
-	return initialIndentSetting[languageKindIdMap[languageKind]] ?? false;
-}
-
 export function getLastImportNode(ts: typeof import('typescript/lib/tsserverlibrary'), sourceFile: ts.SourceFile) {
 
 	let lastImportNode: ts.Node | undefined;

diff --git a/packages/language-service/src/plugins/vue.ts b/packages/language-service/src/plugins/vue.ts
@@ -19,10 +19,11 @@ export function create(): ServicePlugin {
 		create(context): ServicePluginInstance<Provide> {
 
 			const htmlPlugin = createHtmlService({ languageId: 'vue', useCustomDataProviders: false }).create(context);
+			const htmlLanguageService: html.LanguageService = htmlPlugin.provide['html/languageService']();
 
 			sfcDataProvider ??= html.newHTMLDataProvider('vue', loadLanguageBlocks(context.env.locale ?? 'en'));
 
-			htmlPlugin.provide['html/languageService']().setDataProviders(false, [sfcDataProvider]);
+			htmlLanguageService.setDataProviders(false, [sfcDataProvider]);
 
 			return {
 
@@ -36,6 +37,31 @@ export function create(): ServicePlugin {
 					},
 				},
 
+				async resolveEmbeddedCodeFormattingOptions(code, options) {
+
+					const sourceFile = context.language.files.getByVirtualCode(code);
+
+					if (sourceFile.generated?.code instanceof vue.VueGeneratedCode) {
+						if (code.id === 'scriptFormat' || code.id === 'scriptSetupFormat') {
+							if (await context.env.getConfiguration?.('vue.format.initialIndent.script') ?? false) {
+								options.initialIndentLevel++;
+							}
+						}
+						else if (code.id.startsWith('style_')) {
+							if (await context.env.getConfiguration?.('vue.format.initialIndent.style') ?? false) {
+								options.initialIndentLevel++;
+							}
+						}
+						else if (code.id === 'template') {
+							if (await context.env.getConfiguration?.('vue.format.initialIndent.template') ?? true) {
+								options.initialIndentLevel++;
+							}
+						}
+					}
+
+					return options;
+				},
+
 				provideSemanticDiagnostics(document) {
 					return worker(document, (vueCode) => {
 
@@ -154,37 +180,26 @@ export function create(): ServicePlugin {
 					});
 				},
 
-				provideDocumentFormattingEdits(document) {
-					return worker(document, (vueSourceFile) => {
+				provideDocumentFormattingEdits(document, range, options) {
+					return worker(document, async vueCode => {
 
-						const blocks = [
-							vueSourceFile.sfc.script,
-							vueSourceFile.sfc.scriptSetup,
-							vueSourceFile.sfc.template,
-							...vueSourceFile.sfc.styles,
-							...vueSourceFile.sfc.customBlocks,
-						].filter((block): block is NonNullable<typeof block> => !!block)
-							.sort((a, b) => b.start - a.start);
-
-						const edits: vscode.TextEdit[] = [];
-
-						for (const block of blocks) {
-							const startPos = document.positionAt(block.start);
-							if (startPos.character !== 0) {
-								edits.push({
-									range: {
-										start: {
-											line: startPos.line,
-											character: 0,
-										},
-										end: startPos,
-									},
-									newText: '',
-								});
-							}
+						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 edits;
+						return htmlLanguageService.format(document, range, {
+							...options,
+							...formatSettings,
+							unformatted: '',
+							contentUnformatted: blockTypes.join(','),
+							extraLiners: blockTypes.join(','),
+							endWithNewline: options.insertFinalNewline ? true
+								: options.trimFinalNewlines ? false
+									: document.getText().endsWith('\n'),
+						});
 					});
 				},
 			};

diff --git a/packages/language-service/tests/format/1806.spec.ts b/packages/language-service/tests/format/1806.spec.ts
@@ -40,10 +40,8 @@ export { }
 </style>
 	`.trim(),
 	settings: {
-		'volar.format.initialIndent': {
-			html: false,
-			javascript: true,
-			css: true
-		}
+		'vue.format.initialIndent.template': false,
+		'vue.format.initialIndent.script': true,
+		'vue.format.initialIndent.style': true,
 	},
 });
diff --git a/packages/language-service/tests/format/2520.spec.ts b/packages/language-service/tests/format/2520.spec.ts
@@ -21,4 +21,7 @@ defineFormatTest({
 	</pre>
 </template>
 	`.trim(),
+	settings: {
+		'html.format.contentUnformatted': 'pre',
+	},
 });
diff --git a/packages/language-service/tests/format/js template strings.spec.ts b/packages/language-service/tests/format/js template strings.spec.ts
@@ -32,8 +32,6 @@ txt
 </script>
 	`.trim(),
 	settings: {
-		'volar.format.initialIndent': {
-			javascript: true
-		}
+		'vue.format.initialIndent.script': true,
 	},
 });
diff --git a/packages/language-service/tests/utils/format.ts b/packages/language-service/tests/utils/format.ts
@@ -27,7 +27,7 @@ export function defineFormatTest(options: {
 				{ insertSpaces: false, tabSize: 4 },
 			);
 
-			expect(formatted).toBe((options.output ?? options.input));
+			expect(formatted.replace(/\r\n/g, '\n')).toBe((options.output ?? options.input).replace(/\r\n/g, '\n'));
 		});
 	});
 }