feat: add split editors layout configs

close #810

Author: johnsoncodehk

extensions/vscode-vue-language-features/package.json

@@ -389,6 +389,14 @@
 					"type": "boolean",
 					"default": true,
 					"description": "Component preview background style."
+				},
+				"volar.splitEditors.layout.left": {
+					"type": "array",
+					"default": ["script", "scriptSetup", "styles"]
+				},
+				"volar.splitEditors.layout.right": {
+					"type": "array",
+					"default": ["template", "customBlocks"]
 				}
 			}
 		},

extensions/vscode-vue-language-features/src/features/splitEditors.ts

@@ -1,6 +1,5 @@
 import * as vscode from 'vscode';
 import { ref, computed } from '@vue/reactivity';
-import * as shared from '@volar/shared';
 import { parse, SFCBlock } from '@vue/compiler-sfc';
 
 export function activate(context: vscode.ExtensionContext) {
@@ -14,34 +13,70 @@ export function activate(context: vscode.ExtensionContext) {
 		const editor = vscode.window.activeTextEditor;
 		if (!editor) return;
 
+		const layout = await vscode.workspace.getConfiguration('volar').get<{ left: string[], right: string[]; }>('splitEditors.layout') ?? { left: [], right: [] };
+
 		const doc = editor.document;
 		const { descriptor } = getDocDescriptor(doc.getText());
-		const leftBlocks = [
-			descriptor.scriptSetup,
-			descriptor.script,
-			...descriptor.styles,
-		].filter(shared.notEmpty);
-		const rightBlocks = [
-			descriptor.template,
-			...descriptor.customBlocks,
-		].filter(shared.notEmpty);
+		let leftBlocks: SFCBlock[] = [];
+		let rightBlocks: SFCBlock[] = [];
+
+		if (descriptor.script) {
+			if (layout.left.includes('script')) {
+				leftBlocks.push(descriptor.script);
+			}
+			if (layout.right.includes('script')) {
+				leftBlocks.push(descriptor.script);
+			}
+		}
+		if (descriptor.scriptSetup) {
+			if (layout.left.includes('scriptSetup')) {
+				rightBlocks.push(descriptor.scriptSetup);
+			}
+			if (layout.right.includes('scriptSetup')) {
+				rightBlocks.push(descriptor.scriptSetup);
+			}
+		}
+		if (descriptor.template) {
+			if (layout.left.includes('template')) {
+				rightBlocks.push(descriptor.template);
+			}
+			if (layout.right.includes('template')) {
+				rightBlocks.push(descriptor.template);
+			}
+		}
+		if (layout.left.includes('styles')) {
+			leftBlocks = leftBlocks.concat(descriptor.styles);
+		}
+		if (layout.right.includes('styles')) {
+			rightBlocks = rightBlocks.concat(descriptor.styles);
+		}
+		if (layout.left.includes('customBlocks')) {
+			leftBlocks = leftBlocks.concat(descriptor.customBlocks);
+		}
+		if (layout.right.includes('customBlocks')) {
+			rightBlocks = rightBlocks.concat(descriptor.customBlocks);
+		}
 
 		await foldingBlocks(leftBlocks);
 		await vscode.commands.executeCommand('workbench.action.toggleSplitEditorInGroup');
 		await foldingBlocks(rightBlocks);
 
 		async function foldingBlocks(blocks: SFCBlock[]) {
 
-			const firstBlock = blocks.sort((a, b) => a.loc.start.offset - b.loc.start.offset)[0];
-
 			const editor = vscode.window.activeTextEditor;
 			if (!editor) return;
 
-			editor.selections = blocks.map(block => new vscode.Selection(doc.positionAt(block.loc.start.offset), doc.positionAt(block.loc.start.offset)));
+			editor.selections = blocks.length
+				? blocks.map(block => new vscode.Selection(doc.positionAt(block.loc.start.offset), doc.positionAt(block.loc.start.offset)))
+				: [new vscode.Selection(doc.positionAt(doc.getText().length), doc.positionAt(doc.getText().length))];
 
 			await vscode.commands.executeCommand('editor.unfoldAll');
 			await vscode.commands.executeCommand('editor.foldLevel1');
-			editor.revealRange(new vscode.Range(doc.positionAt(firstBlock.loc.start.offset), new vscode.Position(editor.document.lineCount, 0)), vscode.TextEditorRevealType.AtTop);
+
+			const firstBlock = blocks.sort((a, b) => a.loc.start.offset - b.loc.start.offset)[0];
+			if (firstBlock) {
+				editor.revealRange(new vscode.Range(doc.positionAt(firstBlock.loc.start.offset), new vscode.Position(editor.document.lineCount, 0)), vscode.TextEditorRevealType.AtTop);
+			}
 		}
 	}
 }