vscode 开发代码片段插件

news2024/12/24 9:41:31

环境准备

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

账号准备

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

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

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 添加运行命令