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 继续进行打包

相关推荐
古月居GYH3 小时前
【数据分析】如何在PyCharm中高效配置和使用SQL
ide·sql·pycharm
死也不注释6 小时前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
这是个栗子9 小时前
【问题解决】VSCode终端中看不到Git-Bash
ide·git·vscode
岁月玲珑13 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
许白掰16 小时前
Linux入门篇学习——Linux 帮助手册
linux·运维·服务器·嵌入式硬件·学习·编辑器·vim
木头没有瓜17 小时前
vscode离线安装插件
ide·vue.js·vscode
lls23319 小时前
恢复idea文件目录
ide
NeRF_er20 小时前
使用 VScode Debug加不上断点的原因
ide·vscode·编辑器
GHL28427109020 小时前
error MSB8041: 此项目需要 MFC 库。从 Visual Studio 安装程序(单个组件选项卡)为正在使用的任何工具集和体系结构安装它们。
ide·visual studio