做外贸网站怎么做,怎么给网站做超链接,网站建设消费者群体分析,wordpress的模板在哪里改系列文章目录 文章目录 系列文章目录前言一、代码补全 前言
最近在开发vscode插件相关的项目#xff0c;网上很少有关于大模型作为AI 编程助手这方面的教程。因此#xff0c;借此机会把最近写的几个demo分享记录一下。
一、代码补全
思路#xff1a;
读取vscode插件上鼠…系列文章目录 文章目录 系列文章目录前言一、代码补全 前言
最近在开发vscode插件相关的项目网上很少有关于大模型作为AI 编程助手这方面的教程。因此借此机会把最近写的几个demo分享记录一下。
一、代码补全
思路
读取vscode插件上鼠标光标的上下文信息。将提示词和上下文代码作为输入通过modelfusion调用大模型得到输出。将输出内容插入到光标所在位置通过Declaration在vscode页面进行显示。设置快捷键如果代码补全正确按下快捷键后自动插入代码。反之光标移动代码自动消失。
下面直接上代码。 extension.ts 文件
import * as vscode from vscode;
import {BaseUrlApiConfiguration,openaicompatible,streamText,} from modelfusion;
import{ previewInsertion, getBeforeText, getAfterText }from ../src/mainexport function activate(context: vscode.ExtensionContext) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log(Congratulations, your extension dytest is now active!);let globalText:string|undefined ; let globalindex: vscode.Position | undefined;// 如何删除字符const editor vscode.window.activeTextEditor;// 代码补全命令const disposable vscode.commands.registerCommand(dytest.helloWorld, async () {if (!editor) {return;}// 代码所在位置const code editor.document.getText();//光标所在位置const offset editor.document.offsetAt(editor.selection.active);const index editor.document.positionAt(offset);const position editor.selection.active;const document editor.document;const beforeText getBeforeText(document, position);const afterText getAfterText(document, position);// 调用大模型const code_prompt提示词;const code_instruction{{{prefix}}}[BLANK]{{{suffix}}};const code_instruction_2code_instruction.replace({{{prefix}}}, beforeText).replace({{{suffix}}},afterText)console.log(code_instruction_2)
const text2 await streamText({model: openaicompatible.ChatTextGenerator({// 这里使用的是自己部署的大模型url和openai的一样。但是模型不是用的openai系列的。如果要改可以换成openai的。api: new BaseUrlApiConfiguration({baseUrl: 模型的url,headers: {Authorization: 模型的api,},}),provider: openaicompatible-fireworksai, // optional, only needed for logging and custom configsmodel: 自己的模型,}).withInstructionPrompt(),prompt: {system:code_prompt,instruction:code_instruction_2},});let responseUntilNow ;for await (const textPart of text2) {// process.stdout.write(textPart);responseUntilNow textPart;}console.log(responseUntilNow)// 进行代码补全的提示const previewinsertion previewInsertion(editor,index,responseUntilNow);globalTextresponseUntilNow;globalindexindexvscode.window.showInformationMessage(Hello World from dy_test!);});context.subscriptions.push(disposable);const disposable2 vscode.commands.registerCommand(extension.myCommand, async () {editor?.edit((editBuilder {if (!globalindex || !globalText){return;}const lines globalText.split(/\r\n|\n/); // 分割文本editBuilder.insert(globalindex, lines[0])globalindexundefined;globalTextundefined;}));vscode.window.showInformationMessage(Hello World from myextension!);});let timeout: NodeJS.Timeout | undefined;context.subscriptions.push(disposable2);// 注册事件监听器以在特定条件下调用命令context.subscriptions.push(vscode.window.onDidChangeActiveTextEditor(editor {if (editor) {// 延迟调用命令if (timeout) {clearTimeout(timeout);}timeout setTimeout(() {vscode.commands.executeCommand(dytest.helloWorld);}, 200); // 延迟}}));context.subscriptions.push(vscode.window.onDidChangeTextEditorSelection(event {if (timeout) {clearTimeout(timeout);}timeout setTimeout(() {vscode.commands.executeCommand(dytest.helloWorld);}, 200); // 延迟}));
}
export function deactivate() {}main.ts文件 import {parse}from babel/parser
import traverse from babel/traverse
import * as vscode from vscode;// 代码补全插入
export function previewInsertion(editor: vscode.TextEditor, position: vscode.Position, text: string, ) {const range new vscode.Range(position, position.translate({characterDelta: text.length}));let currentDecoration: vscode.DecorationOptions[] | undefined undefined;let decorationType: vscode.TextEditorDecorationType | undefined undefined;const lines text.split(/\r\n|\n/); // 分割文本
let lineCount 0;
let totalCharacterCount 0;// 计算总行数和总字符数
for (const line of lines) {lineCount;totalCharacterCount line.length;
}
totalCharacterCount--;
console.log(lineCount); // 输出非空行数if (!decorationType) {decorationType vscode.window.createTextEditorDecorationType({light: { // Light theme settingsafter: {contentText: lines[0],fontStyle: italic,color: #7f8c8d, // 灰色backgroundColor: transparent,// textDecoration: none,margin: 0 0 0 0,},},dark: { // Dark theme settingsafter: {contentText: lines[0],fontStyle: italic,color: #95a5a6, // 灰色适合深色主题backgroundColor: transparent,// textDecoration: none,margin: 0 0 0 0,}, }
});
}const endPositionposition.translate({lineDelta:lineCount-1,characterDelta:totalCharacterCount })
console.log(position:,position)
console.log(endPosition:,endPosition)// 创建装饰器选项currentDecoration [{range: new vscode.Range(position, position),hoverMessage: new vscode.MarkdownString(按“tab”键确认),
}];// 应用装饰器
editor.setDecorations(decorationType, currentDecoration);// 监听鼠标移动事件移除装饰
const mouseMoveDisposable vscode.window.onDidChangeTextEditorSelection((event) {if (event.textEditor editor) {editor.setDecorations(decorationType, []);currentDecoration undefined;}},null,);}// 获取文本上下文信息
export function getBeforeText(document: vscode.TextDocument, position: vscode.Position): string {const range new vscode.Range(new vscode.Position(0, 0), position);return document.getText(range);
}
export function getAfterText(document: vscode.TextDocument, position: vscode.Position): string {const lastLine document.lineCount - 1;const lastLineLength document.lineAt(lastLine).text.length;const range new vscode.Range(position, new vscode.Position(lastLine, lastLineLength));return document.getText(range);
}package.json
添加两个命令
commands: [{command: dytest.helloWorld,title: Hello World},{ command: extension.myCommand,title: My Command}
]快捷键 keybindings: [{command: extension.myCommand,key: ctrlshift,when: editorTextFocus}]实现效果: 代码补全(2) 目前遇到的问题函数级代码生成后通过Decoration装饰器无法显示全部的。希望有大佬指点一下。
