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

相关推荐
高山上有一只小老虎2 小时前
idea2025社区版设置打开的多个文件展示在工具栏下方
java·ide·intellij-idea
深圳行云创新4 小时前
Cloud IDE vs 本地IDE:AI编程时代的“降维打击“
ide·ai编程
iCxhust4 小时前
Visual Studio 2022查看程序变量和堆栈
ide·visual studio
weixin_456904275 小时前
vscode离线下载依赖
ide·vscode·编辑器
weixin_456904275 小时前
vscode浏览器启动报错
ide·vscode·编辑器
撩得Android一次心动6 小时前
Android studio 高效使用
android·ide·android studio
△曉風殘月〆7 小时前
Visual Studio 命令和属性的常用宏定义(macros for MSBuild commands and properties)
ide·visual studio
爱吃生蚝的于勒7 小时前
【Linux】零基础学会linux环境基础开发工具使用(yum,vim,makefile,gdb)
linux·服务器·数据结构·c++·蓝桥杯·编辑器·vim
初级炼丹师(爱说实话版)8 小时前
JVM的classpath
jvm·ide
ONLYOFFICE8 小时前
ONLYOFFICE 桌面编辑器9.1版本已发布:PDF密文功能和全新注释、工作表公式优化及文件恢复便捷化等
pdf·编辑器·onlyoffice 模板