- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
@ 。
VS Code扩展提供了数据存储,其中globalState是使用全局存储的Key-Value方式来保存用户状态,支持在不同计算机上保留某些用户状态,详情请参考官方文档 。
若在编辑器区域有选中的文本,点击右键菜单中点击创建Snippet,则调用extension.snippetCraft.createSnipp命令,执行创建代码片段.
创建服务类 SnippService.ts,代码如下 。
export async function AddSnipp(context: ExtensionContext, state: Partial<ISnipp>) {
const content = await getSnippText();
const trimmedName = content?.text?.trim().substring(0, 20) || '';
await _addOrUpdateSnipp(context, { ...state, name: trimmedName }, content)
}
在_addOrUpdateSnipp方法中对snipps进行更新操作 。
async function _addOrUpdateSnipp(context: ExtensionContext, state: Partial<ISnipp>, content?: {
text: string | undefined;
type: string | undefined;
}, snippIndex?: number) {
...
context.globalState.update("snipps", updatedSnipps);
若在编辑器区域右键菜单中点击插入Snippet,或在代码片段视图中点击条目,则调用extension.snippetCraft.insertSnipps命令,它会调用InsertSnipp方法执行插入代码片段操作.
在服务类 SnippService.ts,插入如下代码 。
export async function InsertSnipp(context: ExtensionContext, snipp: ISnipp) {
const editor = window.activeTextEditor;
if (editor && SnippDataProvider.isSnipp(snipp)) {
const position = editor?.selection.active;
editor.edit(async (edit) => {
edit.insert(position, snipp.content || '');
});
}
}
代码片段显示为一个树形结构,根据创建时的文件内容类型,分组显示代码片段条目 。
创建代码片段和分组条目的接口类型 。
import * as vscode from "vscode";
export interface ISnipp {
name: string;
content: string;
contentType: string;
created: Date;
lastUsed: Date;
}
export interface IGroup {
name: string;
contentType: string | undefined;
}
在SnippItem中创建获取所有分组类型的get访问器,和获取分组下的条目getChildren方法 。
export class SnippItem {
constructor(
readonly view: string,
private context: vscode.ExtensionContext
) { }
public get roots(): Thenable<IGroup[]> {
const snipps = this.context?.globalState?.get("snipps", []);
const types = snipps
.map((snipp: ISnipp) => snipp.contentType)
.filter((value, index, self) => self.indexOf(value) === index)
.map((type) => ({ name: type, contentType: undefined }));
return Promise.resolve(types);
}
public getChildren(node: IGroup): Thenable<ISnipp[]> {
const snipps = this.context?.globalState
?.get("snipps", [])
.filter((snipp: ISnipp) => {
return snipp.contentType === node.name;
})
.sort((a: ISnipp, b: ISnipp) => a.name.localeCompare(b.name));
return Promise.resolve(snipps);
}
export class GroupItem { }
VS Code扩展的侧边栏中显示内容需为树形结构,通过实现TreeDataProvider为内容提供数据,请参考官方说明 。
实现getChildren方法 。
export class SnippDataProvider
implements
vscode.TreeDataProvider<ISnipp | IGroup>
{
public getChildren(
element?: ISnipp | IGroup
): ISnipp[] | Thenable<ISnipp[]> | IGroup[] | Thenable<IGroup[]> {
return element ? this.model.getChildren(element) : this.model.roots;
}
}
实现getTreeItem方法,显示预览 。
点击时调用extension.snippetCraft.insertEntry命令实现插入代码片段,command部分在上一章节有介绍.
鼠标移动到代码片段条目上时,显示tooltip预览 。
代码如下:
public getTreeItem(element: ISnipp | IGroup): vscode.TreeItem {
const t = element.name;
const isSnip = SnippDataProvider.isSnipp(element);
const snippcomm = {
command: "extension.snippetCraft.insertEntry",
title: '',
arguments: [element],
};
let snippetInfo: string = `[${element.contentType}] ${element.name}`;
return {
// @ts-ignore
label: isSnip ? element.name : element.name,
command: isSnip ? snippcomm : undefined,
iconPath:isSnip ? new ThemeIcon("code"):new ThemeIcon("folder"),
tooltip: isSnip
? new vscode.MarkdownString(
// @ts-ignore
`**标题:**${snippetInfo}\n\n**修改时间:**${element.created}\n\n**最近使用:**${element.lastUsed}\n\n**预览:**\n\`\`\`${element.contentType}\n${element.content}\n\`\`\``
)
: undefined,
collapsibleState: !isSnip
? vscode.TreeItemCollapsibleState.Collapsed
: undefined,
};
}
编辑器是一个输入框,由于VS Code的输入框不支持多行输入,所以需要使用webview实现多行输入。同时需要提交按钮与取消按钮 。
首先创建一个多行文本框的WebView, 在服务类 SnippService.ts,创建一个函数getWebviewContent,返回一个HTML字符串,用于创建一个多行输入框.
function getWebviewContent(placeholder: string, initialValue: string): string {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiline Input</title>
</head>
<body>
<textarea id="inputBox" rows="10" cols="50" placeholder="${placeholder}">${initialValue}</textarea>
<br>
<button onclick="submitText()">提交</button>
<button onclick="cancel()">取消</button>
<script>
const vscode = acquireVsCodeApi();
function submitText() {
const text = document.getElementById('inputBox').value;
vscode.postMessage({ command: 'submit', text: text });
}
function cancel() {
vscode.postMessage({ command: 'cancel' });
}
</script>
</body>
</html>
`;
}
添加处理函数,当用户点击“提交“时,将文本输入框中的内容返回,同时关闭输入框窗口.
async function showInputBoxWithMultiline(context: ExtensionContext, placeholder: string, initialValue: string): Promise<string | undefined> {
const panel = window.createWebviewPanel(
'multilineInput',
'Multiline Input',
ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent(placeholder, initialValue);
return new Promise<string | undefined>((resolve) => {
panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'submit':
resolve(message.text);
panel.dispose();
return;
case 'cancel':
resolve(undefined);
panel.dispose();
return;
}
},
undefined,
context.subscriptions
);
});
}
在添加代码片段和编辑代码片段时触发函数 。
export async function AddSnippFromEditor(context: ExtensionContext, state: Partial<ISnipp>) {
const content = await showInputBoxWithMultiline(context, '请输入Snippet内容', '');
if (content) {
_addOrUpdateSnipp(context, state, { text: content, type: "TEXT" })
}
}
export async function EditSnipp(context: ExtensionContext, state: Partial<ISnipp>, snippIndex: number) {
const content = await showInputBoxWithMultiline(context, '请输入Snippet内容', state.content ?? '');
if (content) {
_addOrUpdateSnipp(context, state, { text: content, type: state.contentType ?? "TEXT" }, snippIndex)
}
}
映射是插入代码片段时,自动替换的变量,他们通过Key-Value形式存储于globalState中.
代码片段中通过设置占位符(如${AUTHOR}),在插入代码片段时,将自动替换为全局变量中的值.
当自定义映射值未设置或者不可用时,将直接显示变量占位符 。
扩展初始化时,插入了三个常用的自定义映射,你可以自由更改或添加自定义映射.
${AUTHOR}
: 作者姓名${COMPANY}
: 公司名称${MAIL}
: 邮箱地址扩展中所有的自定义映射,呈现于“映射表”树视图中.
示例:
代码片段内容 。
value of 'AUTHOR' is: ${AUTHOR}
value of 'COMPANY' is: ${COMPANY}
value of 'MAIL' is: ${MAIL}
value of 'FOOBAR' (non-exist) is: ${FOOBAR}
插入代码片段后,显示如下:
value of 'AUTHOR' is: 林晓lx
value of 'COMPANY' is: my-company
value of 'MAIL' is: jevonsflash@qq.com
value of 'FOOBAR' (non-exist) is: ${FOOBAR}
首先定义KVItem类:
export class KVItem extends vscode.TreeItem {
constructor(
public readonly key: string,
public readonly value: string | undefined
) {
super(key, vscode.TreeItemCollapsibleState.None);
this.tooltip = `${this.key}: ${this.value}`;
this.description = this.value;
this.contextValue = 'kvItem';
}
}
“映射表”树视图中显示内容需为树形结构,同样需要定义KVTreeDataProvider,在此实现刷新、添加、删除、获取子节点等方法.
export class KVTreeDataProvider implements vscode.TreeDataProvider<KVItem> {
private _onDidChangeTreeData: vscode.EventEmitter<KVItem | undefined> = new vscode.EventEmitter<KVItem | undefined>();
readonly onDidChangeTreeData: vscode.Event<KVItem | undefined> = this._onDidChangeTreeData.event;
constructor(private globalState: vscode.Memento) {}
getTreeItem(element: KVItem): vscode.TreeItem {
return element;
}
getChildren(element?: KVItem): Thenable<KVItem[]> {
if (element) {
return Promise.resolve([]);
} else {
const kvObject = this.globalState.get<{ [key: string]: string }>('key-value', {});
const keys = Object.keys(kvObject);
return Promise.resolve(keys.map(key => new KVItem(key, kvObject[key])));
}
}
refresh(): void {
this._onDidChangeTreeData.fire(undefined);
}
addOrUpdateKey(key: string, value: string): void {
const kvObject = this.globalState.get<{ [key: string]: string }>('key-value', {});
kvObject[key] = value;
this.globalState.update('key-value', kvObject);
this.refresh();
}
deleteKey(key: string): void {
const kvObject = this.globalState.get<{ [key: string]: string }>('key-value', {});
delete kvObject[key];
this.globalState.update('key-value', kvObject);
this.refresh();
}
}
默认映射是扩展内置的映射功能,可用的映射如下 。
文件和编辑器相关:
时间相关:
其他:
这些项目参考至VS Code 代码片段变量,请查看VSCode官方文档 。
与自定义映射一样,当默认映射值未设置或者不可用时,将直接显示变量占位符 。
实现方法如下:
export async function ReplacePlaceholders(text: string, context: ExtensionContext): Promise<string> {
const editor = window.activeTextEditor;
const clipboard = await env.clipboard.readText();
const workspaceFolders = workspace.workspaceFolders;
const currentDate = new Date();
const kvObject = context.globalState.get<{ [key: string]: string }>('key-value', {});
const replacements: { [key: string]: string } = {
'${TM_SELECTED_TEXT}': editor?.document.getText(editor.selection) || '',
'${TM_CURRENT_LINE}': editor?.document.lineAt(editor.selection.active.line).text || '',
'${TM_CURRENT_WORD}': editor?.document.getText(editor.document.getWordRangeAtPosition(editor.selection.active)) || '',
'${TM_LINE_INDEX}': (editor?.selection.active.line ?? 0).toString(),
'${TM_LINE_NUMBER}': ((editor?.selection.active.line ?? 0) + 1).toString(),
'${TM_FILENAME}': editor ? path.basename(editor.document.fileName) : '',
'${TM_FILENAME_BASE}': editor ? path.basename(editor.document.fileName, path.extname(editor.document.fileName)) : '',
'${TM_DIRECTORY}': editor ? path.dirname(editor.document.fileName) : '',
'${TM_FILEPATH}': editor?.document.fileName || '',
'${RELATIVE_FILEPATH}': editor && workspaceFolders ? path.relative(workspaceFolders[0].uri.fsPath, editor.document.fileName) : '',
'${CLIPBOARD}': clipboard,
'${WORKSPACE_NAME}': workspaceFolders ? workspaceFolders[0].name : '',
'${WORKSPACE_FOLDER}': workspaceFolders ? workspaceFolders[0].uri.fsPath : '',
'${CURSOR_INDEX}': (editor?.selections.indexOf(editor.selection) ?? 0).toString(),
'${CURSOR_NUMBER}': ((editor?.selections.indexOf(editor.selection) ?? 0) + 1).toString(),
'${CURRENT_YEAR}': currentDate.getFullYear().toString(),
'${CURRENT_YEAR_SHORT}': currentDate.getFullYear().toString().slice(-2),
'${CURRENT_MONTH}': (currentDate.getMonth() + 1).toString().padStart(2, '0'),
'${CURRENT_MONTH_NAME}': currentDate.toLocaleString('default', { month: 'long' }),
'${CURRENT_MONTH_NAME_SHORT}': currentDate.toLocaleString('default', { month: 'short' }),
'${CURRENT_DATE}': currentDate.getDate().toString().padStart(2, '0'),
'${CURRENT_DAY_NAME}': currentDate.toLocaleString('default', { weekday: 'long' }),
'${CURRENT_DAY_NAME_SHORT}': currentDate.toLocaleString('default', { weekday: 'short' }),
'${CURRENT_HOUR}': currentDate.getHours().toString().padStart(2, '0'),
'${CURRENT_MINUTE}': currentDate.getMinutes().toString().padStart(2, '0'),
'${CURRENT_SECOND}': currentDate.getSeconds().toString().padStart(2, '0'),
'${CURRENT_SECONDS_UNIX}': Math.floor(currentDate.getTime() / 1000).toString(),
'${CURRENT_TIMEZONE_OFFSET}': formatTimezoneOffset(currentDate.getTimezoneOffset()),
'${RANDOM}': Math.random().toString().slice(2, 8),
'${RANDOM_HEX}': Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'),
'${UUID}': generateUUID()
};
Object.keys(kvObject).forEach(key => {
replacements[`$\{${key}\}`] = kvObject[key];
});
return text.replace(/\$\{(\w+)\}/g, (match, key) => {
return replacements[match] || match;
});
}
自动完成是VS Code编辑器提供的一个功能,用于在编辑器中显示自动提示和补全内容。扩展提供了基于代码片段的自动完成功能.
CompletionItemProvider用于注册自动完成的规则,提供者约定了在指定的文档类型下,当输入的字符匹配时,将出现自动完成上下文菜单.
上下文菜单中列出所有可用的自动完成条目,每个条目由CompletionItem定义,点击对应条目后,将处理后的字符串返回,填写到编辑器当前光标处.
languages.registerCompletionItemProvider用于注册自动完成的规则提供者.
在extension.ts中注册初始化时,所有的自动完成条目 。
const providers = contentTypes
.filter((value, index, self) => self.indexOf(value) === index)
.map(type =>
languages.registerCompletionItemProvider(type, {
provideCompletionItems(
document: TextDocument,
position: Position,
token: CancellationToken,
context: CompletionContext
) {
return new Promise<CompletionItem[]>((resolve, reject) => {
var result = snipps
.filter((snipp: ISnipp) => {
return snipp.contentType === type;
})
.map(async (snipp: ISnipp) => {
const replacedContentText = await ReplacePlaceholders(snipp.content, extensionContext);
const commandCompletion = new CompletionItem(snipp.name);
commandCompletion.insertText = replacedContentText || '';
return commandCompletion;
});
Promise.all(result).then(resolve);
});
}
})
);
context.subscriptions.push(...providers);
SnippService.ts_addOrUpdateSnipp方法中配置修改或新增的自动完成条目 。
if (content?.type && state.name) {
languages.registerCompletionItemProvider(content.type, {
provideCompletionItems(
document: TextDocument,
position: Position,
token: CancellationToken,
context: CompletionContext
) {
return new Promise<CompletionItem[]>((resolve, reject) => {
ReplacePlaceholders(state.content || '', extensionContext).then(res => {
const replacedContentText = res;
const commandCompletion = new CompletionItem(state.name || '');
commandCompletion.insertText = replacedContentText || '';
resolve([commandCompletion]);
});
});
}
});
}
Github:snippet-craft 。
最后此篇关于[VSCode扩展]写一个代码片段管理插件(二):功能实现的文章就讲到这里了,如果你想了解更多关于[VSCode扩展]写一个代码片段管理插件(二):功能实现的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我需要(我必须)将大量 float 写入 qdatastream 并且我只使用 4 个字节是必要的。setFloatingPointPrecision 或为 float 和 double 写入 4 或
我有一些 C 代码,我用 Python 对其进行了扩展。扩展的 C 代码有一个将一些结构附加到二进制文件的函数: void writefunction(const struct struct1* so
我正在用 C 语言开发一个小软件,用于在布告栏中读取和写入消息。每条消息都是一个以渐进数字命名的 .txt。 软件是多线程的,有很多用户可以并发操作。 用户可以进行的操作有: 阅读整个公告板(所有 .
我有 2 个线程同时访问同一个大文件 (.txt)。 第一个线程正在从文件中读取。第二个线程正在写入文件。 两个线程都访问同一个 block ,例如(开始:0, block 大小:10),但具有不同的
我做了很多谷歌搜索,但我仍然不确定如何继续。 Linux 下最常见的剪贴板读写方式是什么?我想要同时支持 Gnome 和 KDE 桌面。 更新:我是否认为没有简单的解决方案,必须将多个来源(gnome
1. 定义配置文件信息 有时候我们为了统一管理会把一些变量放到 yml 配置文件中 例如 图片 用 @ConfigurationProperties 代替 @Value 使用方法 定义对应字段的实体
在开始之前,我必须先声明我是 FORTRAN 的新手。我正在维护 1978 年的一段遗留代码。它的目的是从文件中读取一些数据值,处理这些值,然后将处理过的值输出到另一个文本文件。 给定以下 FORTR
我正在制作一个应用程序,我需要存储用户提供的一些信息。我尝试使用 .plist 文件来存储信息,我发现: NSString *filePath = @"/Users/Denis/Documents/X
在delphi类中声明属性时是否可能有不同类型的结果? 示例: 属性月份:字符串读取monthGet(字符串)写入monthSet(整数); 在示例中,我希望在属性(property)月份中,当我:读
我正在以二进制形式将文件加载到数组中,这似乎需要一段时间有没有更好更快更有效的方法来做到这一点。我正在使用类似的方法写回文件。 procedure openfile(fname:string); va
我想实现一个运行模拟的C#控制台应用程序。另外,我想给用户机会在控制台上按“+”或“-”来加速/减速模拟的速度。 有没有办法在编写控制台时读取控制台?我相信我可以为此使用多线程,但是我却不怎么做(我对
这是我的代码: use std::fs::File; use std::io::Write; fn main() { let f = File::create("").unwrap();
我有一个应用程序可以访问 csv 文本文件中的单词。由于它们通常不会更改,因此我将它们放置在 .jar 文件中,并使用 .getResourceAsStream 调用读取它们。我真的很喜欢这种方法,因
我使用kubeadm,docker 17.12.1-ce和法兰绒网络安装了Kubernetes 1.13.1集群 但是,我发现Kubernetes主服务器上有许多空文件,权限为666,该文件允许任何用
我的工作区中有一些 java 文件。现在我想编写一个java程序,它可以读取来自不同源的文本文件,一次一个,一行一行,并将这些行插入到工作区中各自的java文件中。 文本文件会告诉我将哪个文件插入到哪
用户A要求系统读取文件foo,同时用户B想要将他或她的数据保存到同一个文件中。在文件系统级别如何处理这种情况? 最佳答案 大多数文件系统(但不是全部)使用锁定来保护对同一文件的并发访问。锁可以是独占的
我对保护移动应用程序的 firebase 数据库有一些疑问。 例如,在反编译Android应用程序后,黑客可以获取firebase api key 然后访问firebase数据库,这是正确的吗? 假设
我想让文件从外部不可删除,并希望使用java从程序对该文件进行读/写操作。 S0,我使用以下代码使用java创建了不可删除的文件: Process pcs = Runtime.getRunti
当 Selector.select() 以阻塞模式等待读/写操作时,是否可以将写消息推送到客户端?如何将选择器从阻塞模式移至写入模式?触发器可以是一个后台线程,用于放置需要写入给定 channel 的
我目前正在学习在 Linux 环境中使用 C 进行套接字编程。作为一个项目,我正在尝试编写一个基本的聊天服务器和客户端。 目的是让服务器为每个连接的客户端派生一个进程。 我遇到的问题是读取一个 chi
我是一名优秀的程序员,十分优秀!