vscode插件开发 悬浮，ctrl点击 自动补全提示

ctrl点击跳转

const jumpDisposable = vscode.languages.registerDefinitionProvider('vue', {
		provideDefinition,
	});
	
context.subscriptions.push(jumpDisposable);

/*
 * @Author: hongbin
 * @Date: 2023-09-15 10:54:43
 * @LastEditors: hongbin
 * @LastEditTime: 2023-09-15 21:23:22
 * @Description:ctrl 跳转组件
 */
import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';
import { docs as DOCS } from './docs';
import { getProjectPath } from './utils';

export function provideDefinition(
	document: vscode.TextDocument,
	position: vscode.Position,
	token: vscode.CancellationToken
): vscode.ProviderResult<vscode.Definition | vscode.LocationLink[]> {
	// ctrl选中的单词
	const word = document.getText(document.getWordRangeAtPosition(position));
	// 查询有无文档
	const docs = DOCS[word];

	if (docs) {
		// 找到绝对路径
		const projectPath = getProjectPath(document);
		const destPath = `${projectPath}/src/uview-ui/components/${word}/${word}.vue`;
		// 若存在该路径 则返回Location点击时进入该路径文件
		if (fs.existsSync(destPath)) {
			return new vscode.Location(vscode.Uri.file(destPath), new vscode.Position(0, 0));
		} else {
			vscode.window.showInformationMessage(`未找到${destPath}`);
		}
	}
}

鼠标悬浮

const hoverDisposable = vscode.languages.registerHoverProvider('vue', {
		provideHover,
	});
context.subscriptions.push(hoverDisposable);

/*
 * @Author: hongbin
 * @Date: 2023-09-15 21:24:29
 * @LastEditors: hongbin
 * @LastEditTime: 2023-09-17 21:07:06
 * @Description:鼠标悬浮时提示
 */
import * as vscode from 'vscode';
import { docs as DOCS } from './docs';

const reg = new RegExp(/\s+<(u-\w+)(([\s|\S]*)*\s+([\w|\:\|@]+)$)*/);

export function provideHover(document: vscode.TextDocument, position: vscode.Position) {
	// ctrl选中的单词
	const word = document.getText(document.getWordRangeAtPosition(position));
	// 查询有无文档
	const docs = DOCS[word];

	if (docs) {
		// const range = new Range();
		return new vscode.Hover(docs.desc);
	}
	//  不是标签 属性 方法
	const lineText = document.lineAt(position).text.substring(0, position.character);
	const getTag = lineText.match(reg);
	// console.log('HOVER:', word, lineText, getTag);
	if (getTag && getTag[1] && DOCS[getTag[1]]) {
		const prop = DOCS[getTag[1]].propertiesAndMethod[word];
		if (prop.desc) return new vscode.Hover(prop.desc);
	}
}

自动补全

const completionDisposable = vscode.languages.registerCompletionItemProvider(
		'vue',
		new GoCompletionItemProvider(),
		'<',
		'<u',
		'<u-',
		'@',
		':'
	);
context.subscriptions.push(completionDisposable);

/*
 * @Author: hongbin
 * @Date: 2023-09-15 22:25:13
 * @LastEditors: hongbin
 * @LastEditTime: 2023-09-18 09:18:42
 * @Description:自动补全
 */
import * as vscode from 'vscode';
import { docs as DOCS } from './docs';

// const reg = new RegExp(/(.+)<(u-\w+) ([\w|\-]+)/);
// const reg = new RegExp(/\s+<(u-\w+)([\s|\S]*)*\s+(\w+)$/);
// const reg = new RegExp(/\s+<(u-\w+)([\s|\S]*)*\s+([\w|\:\|@]+)$/);
const reg = new RegExp(/\s+<(u-\w+)(([\s|\S]*)*\s+([\w|\:\|@]+)$)*/);
const tags = Object.keys(DOCS).map(
	(tag) => new vscode.CompletionItem(tag, vscode.CompletionItemKind.Snippet)
);

export class GoCompletionItemProvider implements vscode.CompletionItemProvider {
	public provideCompletionItems(
		document: vscode.TextDocument,
		position: vscode.Position,
		token: vscode.CancellationToken
	) {
		const line = document.lineAt(position);

		const lineText = line.text.substring(0, position.character);
		const res = lineText.match(reg);
		// console.log(lineText, res);
		// 属性方法提示
		if (res && res[1] && res[4]) {
			const docs = DOCS[res[1]];
			if (docs) {
				switch (res[4]) {
					//属性
					case ':': {
						return Object.keys(docs.properties)
							.filter((prop) => prop.includes(res[4].substring(1)))
							.map((prop) => docs.properties[prop].item);
					}
					// 方法
					case '@': {
						return Object.keys(docs.method)
							.filter((prop) => prop.includes(res[4].substring(1)))
							.map((prop) => docs.method[prop].item);
					}
					// 全部
					default: {
						return Object.keys(docs.propertiesAndMethod)
							.filter((prop) => prop.includes(res[4]))
							.map((prop) => docs.propertiesAndMethod[prop].item);
					}
				}
			}
		} else if (lineText.includes('<')) {
			//返回UView的所有标签
			return tags;
		}
	}
}

发布