# vscode 插件开发

# 环境准备

npm install -g yo generator-code

# 创建 hello world

yo code

# package 相关配置

{
  "commands": [
    {
      // 注册的命令
      "command": "extension.createTemplate",
      // 标题
      "title": "生成文件"
    }
  ],
  "menus": {
    // vscode左边的资源管理器右键出来
    "explorer/context": [
      {
        "command": "extension.createTemplate",
        // 配置在右键菜单中的位置
        "group": "navigation"
      }
    ]
  }
}

# 底部信息展示条

let pclintBar = vscode.window.createStatusBarItem();
pclintBar.text = `目标文件夹：${dirPath}`;
pclintBar.show();
pclintBar.hide();
pclintBar.dispose();

# 选择文件夹

vscode.window
  .showOpenDialog({
    // 是否选择文件夹
    canSelectFolders: true,
    // 是否选择文件
    canSelectFiles: false,
    // 是否选择多个
    canSelectMany: false,
    title: "选择模板文件夹",
  })
  .then((path) => {
    console.log(path);
  });

# input 输入

const nameVal = await vscode.window.showInputBox({
  placeHolder: "提示文字",
});

# 工作区路径

vscode.workspace.rootPath;

# message 提示

vscode.window.showInformationMessage("生成成功!");

# 当前编辑器选中的内容

import * as vscode from "vscode";
// 激活的tab
const editor: vscode.TextEditor | undefined = vscode.window.activeTextEditor;
// 获取提取的内容
const selectionText = editor?.document.getText(editor?.selection);

# 插件发布

vsce login
vsce publish
# 更新
vsce publish patch

# 打印 dom 对象

console.log('%O', ref.current)

自动部署 →