feat(language-service): migrate to named pipe server using TypeScript…

… LanguageService (#3908)

extensions/vscode/CHANGELOG.md

@@ -1 +1 @@
-For a full change history, refer to the [CHANGELOG](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md) on the Volar GitHub site.
+For a full change history, refer to the [CHANGELOG](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md) on the GitHub site.

extensions/vscode/package.json

@@ -15,7 +15,7 @@
 	},
 	"icon": "images/icon.png",
 	"displayName": "Vue Language Features (Volar)",
-	"description": "Language support for Vue 3",
+	"description": "Language Support for Vue",
 	"author": "johnsoncodehk",
 	"publisher": "Vue",
 	"engines": {
@@ -32,15 +32,6 @@
 		"virtualWorkspaces": {
 			"supported": "limited",
 			"description": "Install https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-web to have IntelliSense for .vue files in Web IDE."
-		},
-		"untrustedWorkspaces": {
-			"supported": "limited",
-			"description": "%volar.workspaceTrust.description%",
-			"restrictedConfigurations": [
-				"typescript.tsdk",
-				"typescript.tsserver.pluginPaths",
-				"typescript.npm"
-			]
 		}
 	},
 	"contributes": {
@@ -281,7 +272,7 @@
 		],
 		"configuration": {
 			"type": "object",
-			"title": "Volar",
+			"title": "Vue",
 			"properties": {
 				"vue.trace.server": {
 					"scope": "window",
@@ -483,24 +474,19 @@
 		},
 		"commands": [
 			{
-				"command": "volar.action.doctor",
+				"command": "vue.action.doctor",
 				"title": "Doctor",
-				"category": "Volar"
+				"category": "Vue"
 			},
 			{
-				"command": "volar.action.writeVirtualFiles",
+				"command": "vue.action.writeVirtualFiles",
 				"title": "Write Virtual Files",
-				"category": "Volar (Debug)"
-			},
-			{
-				"command": "volar.action.showComponentMeta",
-				"title": "Show Component Meta",
-				"category": "Volar"
+				"category": "Vue (Debug)"
 			},
 			{
-				"command": "volar.action.splitEditors",
+				"command": "vue.action.splitEditors",
 				"title": "Split <script>, <template>, <style> Editors",
-				"category": "Volar",
+				"category": "Vue",
 				"icon": "images/split-editors.png"
 			}
 		],
@@ -535,21 +521,21 @@
 					"when": "editorLangId == vue"
 				},
 				{
-					"command": "volar.action.doctor",
-					"when": "volar.activated"
+					"command": "vue.action.doctor",
+					"when": "vue.activated"
 				},
 				{
-					"command": "volar.action.writeVirtualFiles",
-					"when": "volar.activated"
+					"command": "vue.action.writeVirtualFiles",
+					"when": "vue.activated"
 				},
 				{
-					"command": "volar.action.splitEditors",
+					"command": "vue.action.splitEditors",
 					"when": "editorLangId == vue"
 				}
 			],
 			"editor/title": [
 				{
-					"command": "volar.action.splitEditors",
+					"command": "vue.action.splitEditors",
 					"when": "resourceLangId == vue && config.vue.splitEditors.icon",
 					"group": "navigation"
 				}

extensions/vscode/src/common.ts

@@ -9,9 +9,8 @@ import { DiagnosticModel, VueInitializationOptions } from '@vue/language-server'
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient';
 import { config } from './config';
-// import * as componentMeta from './features/componentMeta';
-// import * as doctor from './features/doctor';
-// import * as nameCasing from './features/nameCasing';
+import * as doctor from './features/doctor';
+import * as nameCasing from './features/nameCasing';
 import * as splitEditors from './features/splitEditors';
 
 let client: lsp.BaseLanguageClient;
@@ -49,7 +48,7 @@ export async function activate(context: vscode.ExtensionContext, createLc: Creat
 
 async function doActivate(context: vscode.ExtensionContext, createLc: CreateLanguageClient) {
 
-	vscode.commands.executeCommand('setContext', 'volar.activated', true);
+	vscode.commands.executeCommand('setContext', 'vue.activated', true);
 
 	const outputChannel = vscode.window.createOutputChannel('Vue Language Server');
 
@@ -67,8 +66,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	activateClientRequests();
 
 	splitEditors.register(context, client);
-	// doctor.register(context, client);
-	// componentMeta.register(context, client);
+	doctor.register(context, client);
 
 	const selectors: vscode.DocumentFilter[] = [{ language: 'vue' }];
 
@@ -79,10 +77,9 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 		selectors.push({ language: 'markdown' });
 	}
 
-	activateAutoInsertion(selectors, client); // TODO: implement auto insert .value
+	activateAutoInsertion(selectors, client);
 	activateDocumentDropEdit(selectors, client);
-	activateWriteVirtualFiles('volar.action.writeVirtualFiles', client);
-
+	activateWriteVirtualFiles('vue.action.writeVirtualFiles', client);
 	activateServerSys(client);
 
 	async function requestReloadVscode() {
@@ -100,13 +97,13 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 				requestReloadVscode();
 			}
 			if (e.affectsConfiguration('vue')) {
-				vscode.commands.executeCommand('volar.action.restartServer');
+				vscode.commands.executeCommand('vue.action.restartServer');
 			}
 		}));
 	}
 
 	async function activateRestartRequest() {
-		context.subscriptions.push(vscode.commands.registerCommand('volar.action.restartServer', async () => {
+		context.subscriptions.push(vscode.commands.registerCommand('vue.action.restartServer', async () => {
 
 			await client.stop();
 
@@ -121,7 +118,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	}
 
 	function activateClientRequests() {
-		// nameCasing.activate(context, client);
+		nameCasing.activate(context, client);
 	}
 }
 
@@ -154,7 +151,6 @@ async function getInitializationOptions(
 			tokenModifiers: [],
 		},
 		vue: {
-			hybridMode: true,
 			additionalExtensions: [
 				...config.server.additionalExtensions,
 				...!config.server.petiteVue.supportHtmlFile ? [] : ['html'],

extensions/vscode/src/features/doctor.ts

@@ -16,7 +16,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 
 	const item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
 	item.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');
-	item.command = 'volar.action.doctor';
+	item.command = 'vue.action.doctor';
 
 	const docChangeEvent = new vscode.EventEmitter<vscode.Uri>();
 
@@ -49,7 +49,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 			}
 		},
 	));
-	context.subscriptions.push(vscode.commands.registerCommand('volar.action.doctor', () => {
+	context.subscriptions.push(vscode.commands.registerCommand('vue.action.doctor', () => {
 		const doc = vscode.window.activeTextEditor?.document;
 		if (
 			doc

extensions/vscode/src/features/nameCasing.ts

@@ -13,7 +13,7 @@ export async function activate(_context: vscode.ExtensionContext, client: BaseLa
 
 	const disposes: vscode.Disposable[] = [];
 	const statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
-	statusBar.command = 'volar.action.nameCasing';
+	statusBar.command = 'vue.action.nameCasing';
 
 	update(vscode.window.activeTextEditor?.document);
 
@@ -29,7 +29,7 @@ export async function activate(_context: vscode.ExtensionContext, client: BaseLa
 		attrNameCasings.delete(doc.uri.toString());
 		tagNameCasings.delete(doc.uri.toString());
 	}));
-	disposes.push(vscode.commands.registerCommand('volar.action.nameCasing', async () => {
+	disposes.push(vscode.commands.registerCommand('vue.action.nameCasing', async () => {
 
 		if (!vscode.window.activeTextEditor?.document) return;
 

extensions/vscode/src/features/splitEditors.ts

@@ -9,7 +9,7 @@ export function register(context: vscode.ExtensionContext, client: BaseLanguageC
 
 	const getDocDescriptor = useDocDescriptor();
 
-	context.subscriptions.push(vscode.commands.registerCommand('volar.action.splitEditors', onSplit));
+	context.subscriptions.push(vscode.commands.registerCommand('vue.action.splitEditors', onSplit));
 
 	async function onSplit() {
 

extensions/vscode/src/nodeClientMain.ts

@@ -38,7 +38,7 @@ export async function activate(context: vscode.ExtensionContext) {
 				if (!serverPathStatusItem) {
 					serverPathStatusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
 					serverPathStatusItem.text = '[vue] configured server path';
-					serverPathStatusItem.command = 'volar.action.gotoServerFile';
+					serverPathStatusItem.command = 'vue.action.gotoServerFile';
 					serverPathStatusItem.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');
 					serverPathStatusItem.show();
 					vscode.commands.registerCommand(serverPathStatusItem.command, () => {
@@ -106,7 +106,31 @@ export async function activate(context: vscode.ExtensionContext) {
 			serverOptions,
 			clientOptions,
 		);
-		client.start();
+		client.start().then(() => {
+			const legend = client.initializeResult?.capabilities.semanticTokensProvider?.legend;
+			if (!legend) {
+				console.error('Server does not support semantic tokens');
+				return;
+			}
+			// When tsserver has provided semantic tokens for the .vue file, VSCode will no longer request semantic tokens from the Vue language server, so it needs to be provided here again.
+			vscode.languages.registerDocumentSemanticTokensProvider(documentSelector, {
+				async provideDocumentSemanticTokens(document) {
+					const tokens = await client.sendRequest(lsp.SemanticTokensRequest.type, {
+						textDocument: client.code2ProtocolConverter.asTextDocumentIdentifier(document),
+					} satisfies lsp.SemanticTokensParams);
+					return client.protocol2CodeConverter.asSemanticTokens(tokens);
+				},
+			}, legend);
+			vscode.languages.registerDocumentRangeSemanticTokensProvider(documentSelector, {
+				async provideDocumentRangeSemanticTokens(document, range) {
+					const tokens = await client.sendRequest(lsp.SemanticTokensRangeRequest.type, {
+						textDocument: client.code2ProtocolConverter.asTextDocumentIdentifier(document),
+						range: client.code2ProtocolConverter.asRange(range),
+					} satisfies lsp.SemanticTokensRangeParams);
+					return client.protocol2CodeConverter.asSemanticTokens(tokens);
+				},
+			}, legend);
+		});
 
 		volarLabs.addLanguageClient(client);
 
@@ -191,7 +215,7 @@ try {
 			text = text.replace('t.$u=[t.$r,t.$s,t.$p,t.$q]', s => s + '.concat("vue")');
 
 			// patch isSupportedLanguageMode
-			text = text.replace('s.languages.match([t.$p,t.$q,t.$r,t.$s]', s => s + '.concat("vue")');
+			text = text.replace('.languages.match([t.$p,t.$q,t.$r,t.$s]', s => s + '.concat("vue")');
 
 			return text;
 		}

packages/language-server/package.json

@@ -20,7 +20,6 @@
 		"@volar/language-server": "~2.1.0",
 		"@vue/language-core": "1.8.27",
 		"@vue/language-service": "1.8.27",
-		"vscode-languageserver-protocol": "^3.17.5",
-		"vue-component-meta": "1.8.27"
+		"vscode-languageserver-protocol": "^3.17.5"
 	}
 }