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

相关推荐
梦幻通灵7 小时前
IDEA通过Contince接入Deepseek
java·ide·intellij-idea
鸡啄米的时光机7 小时前
vscode的一些实用操作
vscode·学习
Aphelios3809 小时前
Linux 下 VIM 编辑器学习记录:从基础到进阶(上)
java·linux·编辑器·vim
灰色人生qwer11 小时前
React + TypeScript+ Vite 配置路径别名和vscode智能路径提示
vscode·react.js·typescript
workflower11 小时前
实例研究:设计一个文档编辑器(24)- 完
java·开发语言·设计模式·编辑器·软件工程·需求分析·软件需求
莲动渔舟11 小时前
赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
ide·人工智能·vscode·deepseek
咩咩大主教13 小时前
VSCode运行Go程序报错:Unable to process `evaluate`: debuggee is running
开发语言·ide·vscode·golang·编辑器
佛曰我不想说话13 小时前
通过VSCode直接连接使用 GPT的编程助手
ide·vscode·copilot
羊村懒哥16 小时前
VScode内接入deepseek包过程(本地部署版包会)
人工智能·vscode·deepseek