vscode:插件开发

news/2024/7/16 8:17:54 标签: vscode, ide, 编辑器

文档: 连接

终端执行 sudo pnpm install -g yo generator-code


yo code

// 这里建议选择 JavaScript 很少出错
# ? What type of extension do you want to create? New Extension (JavaScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld

完成后进入 VS Code,按下F5,你会立即看到一个插件发开主机窗口,其中就运行着插件。

在命令面板(Ctrl+Shift+P)中输入Hello World命令。
如果你看到了Hello World提示弹窗,恭喜你成功了


正确的本地打包

pnpm i -D @vscode/vsce
然后,你需要 package.json 中写入
"scripts": {
  "package": "pnpm vsce package --no-dependencies"
}
然后终端输入
pnpm run package
即可完成打包

然后就可以在vscode本地导入 vsix 文件给其他团队使用了

示例: vscode插件开发,在选择的资源管理器的文件夹下,右键时来创建文件

首先,在您的插件项目中创建一个新的文件,例如 createFileCommand.ts,并添加以下代码:
typescript
import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';

function createFile(uri: vscode.Uri) {
    if (uri && uri.scheme === 'file') {
        vscode.window.showInputBox({ prompt: 'Enter file name' }).then((fileName) => {
            if (fileName) {
                const filePath = path.join(uri.fsPath, fileName);
                fs.writeFileSync(filePath, '', 'utf-8');
                vscode.window.showInformationMessage(`File ${fileName} created successfully.`);
                vscode.commands.executeCommand('vscode.open', vscode.Uri.file(filePath));
            }
        });
    }
}

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.createFile', (resource: vscode.Uri) => {
        createFile(resource);
    });

    context.subscriptions.push(disposable);

    vscode.workspace.onDidOpenTextDocument((e) => {
        if (e.uri.scheme !== 'file') {
            return;
        }

        const uri = vscode.Uri.file(e.uri.fsPath);
        vscode.commands.executeCommand('extension.createFile', uri);
    });
}

export function deactivate() {}package.json 文件的 contributes/contextMenus 部分中添加以下配置以注册右键菜单:
json
 "contributes": {
    "commands": [
        {
            "command": "extension.createFile",
            "title": "Create File"
        }
    ],
    "menus": {
        "explorer/context": [
            {
                "when": "resourceScheme==file",
                "command": "extension.createFile",
                "group": "navigation"
            }
        ]
    }
}
在插件的 extension.ts 文件中引入 createFileCommand.ts 并在激活插件时调用 activate 方法。
这样,当用户在资源管理器中右键点击文件夹时,将会显示一个"Create File"的选项,点击后会弹出输入框,允许用户输入新文件名并在该文件夹中创建新文件。

http://www.niftyadmin.cn/n/5475227.html

相关文章

【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

文章目录 CSS一、什么是CSS二、语法规范三、引入方式1.内部样式表2.行内样式表3.外部样式 四、选择器1.选择器的种类1.基础选择器&#xff1a;单个选择器构成的1.标签选择器2.类选择器3.id 选择器4.通配符选择器 2.复合选择器1.后代选择器2.子选择器3.并集选择器4.伪类选择器 五…

10倍提效!用ChatGPT编写系统功能文档。。。

系统功能文档是一种描述软件系统功能和操作方式的文档。它让开发团队、测试人员、项目管理者、客户和最终用户对系统行为有清晰、全面的了解。 通过ChatGPT&#xff0c;我们能让编写系统功能文档的效率提升10倍以上。 ​《Leetcode算法刷题宝典》一位阿里P8大佬总结的刷题笔记…

性能分析--内存知识

内存相关知识 计算机中与CPU进行数据交换的桥梁。内存的速度&#xff0c;比CPU的速度要慢很多。比磁盘速度要快很多。内存中存放数据&#xff0c;一旦断电就会消失。linux系统的 /proc路径下的文件&#xff0c;都是内存文件。内存大小&#xff0c;一般 是GB为单位。 现在都操作…

室友打团太吵?一条命令让它卡死

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;更多干货&#xff0c;请关注专栏《网络安全自学教程》 SYN Flood 1、hping3实现SYN Flood1.1、主机探测1.2、扫描端…

c++的学习之路:16、string(3)

上章有一些东西当时没学到&#xff0c;这里学到了将在补充&#xff0c;文章末附上代码&#xff0c;思维导图。 目录 一、赋值重载 二、带模板的创建 三、析构函数 四、代码 五、思维导图 一、赋值重载 这里的赋值重载就是直接利用交换函数进行把传参生成的临时数据和需要…

多卡环境 设置某张卡跑某程序

如果要在使用screen命令时指定CUDA设备&#xff0c;正确的方法是在screen命令之前设置CUDA_VISIBLE_DEVICES环境变量。由于screen会启动一个新的shell会话&#xff0c;直接在命令中设置环境变量可能不会按预期工作。因此&#xff0c;你需要先导出环境变量&#xff0c;然后再启动…

Git(8)之分支间同步特定提交

Git(8)之分支间同步特定提交 Author&#xff1a;Once Day Date&#xff1a;2024年4月7日 漫漫长路有人对你微笑过嘛… 全系列文章可查看专栏: Git使用记录_Once_day的博客-CSDN博客 文章目录 Git(8)之分支间同步特定提交1. 分支间同步提交2. cherry-pick同步分支间的特定提交…

JavaWeb后端——Mybatis

概述 Mybatis&#xff1a;Java程序来对数据库进行操作&#xff0c;一款优秀的持久层框架&#xff0c;用于简化JDBC的开发 SSM&#xff1a;SpringMVC、Spring、Mybatis 快速入门 步骤2&#xff1a;注意数据库连接的四要素 application.properties&#xff1a;springboot 的默…