vscode:插件开发

文档: 连接

终端执行 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"的选项,点击后会弹出输入框,允许用户输入新文件名并在该文件夹中创建新文件。

相关推荐

  1. vscode开发

    2024-04-08 09:40:03       18 阅读
  2. VSCODE开发API

    2024-04-08 09:40:03       29 阅读
  3. 怎么开发vscode

    2024-04-08 09:40:03       9 阅读
  4. 如何使用vue开发vscode

    2024-04-08 09:40:03       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-08 09:40:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-08 09:40:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-08 09:40:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-08 09:40:03       18 阅读

热门阅读

  1. svg 矢量图 在移动端 ios 模糊的处理方法

    2024-04-08 09:40:03       9 阅读
  2. redis哈希分桶路由介绍及代码示例

    2024-04-08 09:40:03       13 阅读
  3. CPU 架构:ARM 和 x86 架构区别

    2024-04-08 09:40:03       12 阅读
  4. uniapp小程序--录音功能

    2024-04-08 09:40:03       14 阅读
  5. 【算法-数组】有序数组的平方

    2024-04-08 09:40:03       11 阅读
  6. 比特币4种地址格式

    2024-04-08 09:40:03       11 阅读
  7. MyBatis 的 `<foreach>` 标签

    2024-04-08 09:40:03       12 阅读
  8. MFC中数据转化

    2024-04-08 09:40:03       12 阅读
  9. 文心一言 vs GPT-4 —— 全面横向比较

    2024-04-08 09:40:03       14 阅读
  10. Unity3D知识点精华浓缩

    2024-04-08 09:40:03       10 阅读
  11. Stable Diffusion 本地部署教程

    2024-04-08 09:40:03       13 阅读