vscode 开发代码片段插件

环境准备

  • node - 20v版本 ,推荐使用nvm进行版本控制
  • 全局安装 "yo" 是 Yeoman 工具的命令行工具, npm i yo -g
  • 全局安装 generator-code 是一个 Yeoman 脚手架 gernerator-code npm i gernerator-code -g
  • 全局安装 npm install -g vsce
  • 官方文档 Publishing Extensions | Visual Studio Code Extension API

账号准备

  1. 点击 Visual Studio Team Services,点击最上方立即注册,注册自己的账号,可以用GitHub账号直接登录。
  2. 登录后新创建一个组织

3.在该组织下继续创建一个项目(建议插件名字和项目名字保持同步)

上述步骤完成后再去获取token

点击

New Token,注意这里创建token一定要下拉选择 all accessible organizations,然后点击右下角的 Show all scopes 找到 Marketplace 选择 Manage。

点进后将显示的token储存起来

完成后接下来需要去注册成vscode开发者 https://aka.ms/vscode-create-publisher

注册完成后点击创建,保持ID和name和我们项目的名称一致即可。

项目初始化

然后返回到 Azure DevOps Services | Microsoft Azure中点击创建的项目,进行项目初始化

如果无法完成请求,则使用生成git凭证,在vscode输入密码即可

此时,已经在vscode中已经有一个容器了。

接下来进行项目搭建

项目搭建

输入 yo code 选择 new code snippets的模板,其他按照截图来即可生成项目了。

可以在snippets 中写入我们的代码片段,然后执行

vsce package 即可打包生成.vsix 文件了,如果是本地使用则不需要发布到市场插件

发布到市场插件的流程

继续执行 vsce publish -p your-personal-access-token 首次发布需要输入 之前储存的token然后等待完成发布即可 https://marketplace.visualstudio.com/manage/publishers

1.打包遇见了 提示 WARNING LICENSE, LICENSE.md, or LICENSE.txt not found

解决方案: Choose an open source license | Choose a License 复制一份许可证即可

拓展延伸。

常规的添加方法需要在 snippets 中添加代码片段,再去 package.json 中进行添加,这样在我们代码片段多的时候就特别麻烦,需要一直去添加。

优化方案

优化方案

1.在根目录下创建一个文件 generateSnippetsConfig.js

javascript 复制代码
const fs = require("fs");
const path = require("path");

// 获取 snippets 目录下所有 .code-snippets 文件的绝对路径
const snippetFiles = fs
  .readdirSync("./snippets")

const snippetsConfig = snippetFiles.map((file) => {
  
  const language = "javascript";
  const pathFile = "./snippets/" + file
  console.log(language,'snippetFiles')
  return {
    language: language,
    path:pathFile,
  };
});

// 读取并更新 package.json
const packageJsonPath = "./package.json";
const packageJson = require(packageJsonPath);

// 添加或更新 snippets 配置
if (!packageJson.contributes) packageJson.contributes = {};
if (!packageJson.contributes.snippets) packageJson.contributes.snippets = [];
packageJson.contributes.snippets = snippetsConfig
// 写回 package.json
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), "utf-8");

2.改造package.json 添加运行命令

3.执行 generate-snippets 即可自动将 snippets的代码片段自动注入到package.json中

4.执行 build 继续进行打包

相关推荐
繁依Fanyi6 分钟前
【参赛心得】我的 HarmonyOS 开发入门与参赛之路
ide·人工智能·华为·word·harmonyos·aiide·codebuddyide
2501_938791832 小时前
服务器上的 VsCode:Github Copilot 显示 “连接失败”?网络与权限排查
服务器·vscode·github
Molesidy2 小时前
【Embedded System】【CMake】Windows下CMake+VSCode的开发环境搭建以及初步认识
ide·vscode·编辑器·cmake
不如摸鱼去4 小时前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
oioihoii6 小时前
在VSCode中配置Rust开发环境的详尽指南
ide·vscode·rust
李少兄7 小时前
如何将 TRAE IDE 的插件市场源切换至 VS Code 官方市场
ide
路由侠内网穿透.9 小时前
本地部署集成全能平台 Team.IDE 并实现外部访问
运维·服务器·数据库·ide·远程工作
2501_9387820918 小时前
《UE4 蓝图基础:蓝图编辑器打开与节点连接的核心逻辑》
编辑器·ue4
better112018 小时前
IDE热键冲突的解决
ide
JosieBook1 天前
【软件安装】在 Visual Studio 2022 中安装 RDLC 报表插件的详细教程
ide·visual studio