一起来写 VS Code 插件:为你的团队提供常用代码片段VS Code 是前端开发者最佳的开发工具，你在开发中是否疲倦

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

前言

VS Code 是前端开发者最佳的开发工具，你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢？或者在你的团队内部是否有一些内部组件库，比如 Ant Design、 React hooks 等组件库，团队内部伴随开发的也一直打开组件相关文档？

其实我们可以开发一些常用的代码片段（Snippets）供团队内部使用。当输入前缀的时候就会触发智能提示。

开发

接下来就要开发团队内部 VS Code 插件了，打开 VS Code API 的官网，引入我们眼帘的是

npm install -g yo generator-code

首先全局安装脚手架，安装完成后，在命令行中输入

yo code

选择 New Code Snippets

输入一些基础信息后项目就创建成功了。

创建代码片段

有一个网站可以帮助我们快速的创建 code snippet snippet-generator.app/

左边输入代码，右侧就会生成 snippet 模板，拷贝到项目中的 snippets.code-snippets 文件下的 JSON 对象中

其他 hooks 可以继续添加到 JSON 对象中，

如果想在让 typescript javascriptreact 也支持,可以在package.json 中的 contributes 字段指定4份 snippets；

"snippets": [
      {
        "language": "javascript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "javascriptreact",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets.json"
      }
    ]

点击调试就可以在本地调试了

到此已经开发结束，如果不发布的话可以把 snippets 直接指定到本地目录下，打开 user snippets 配置面版，将 json 拷贝进去就可以在 vscode 中使用了，也可以在网页版 vscode.dev/ 使用

发布

第一步先安装 vsce

npm install vsce -g

第二步创建账号

首先访问 login.live.com/ 登录你的Microsoft账号，没有的先注册一个，然后访问： aka.ms/SignupAzure… ，如果你从来没有使用过Azure，那么就要先创建一个Azure DevOps 组织，默认会创建一个以邮箱前缀为名的组织。

第三步进入组织创建令牌

点击右上角的用户设置，点击创建新的个人访问令牌

注意这里的 organizations 必须要选择 all accessible organizations，Scopes 要选择 full access，否则后面发布会失败。

创建 token 成功后你需要本地记下来，因为网站是不会帮你保存的！！！

第四步创建一个发布者

发布者是 visualstudio 代码市场的扩展的唯一身份标识。每个插件都需要在 package.json 文件中指定一个 publisher 字段。

你可以通过 visualstudio 插件市场发布者管理页面创建一个新发布者，然后使用 vsce login <publisher name> , 输入刚才的 token，登陆成功。

第五步发布插件

vsce publish

发布成功后可能需要一两分钟，才可以在 VS Code 中搜索到，可以直接通过 url 访问

marketplace.visualstudio.com/items?itemN….

也可以使用以下命令 取消发布

vsce unpublish (publisher name).(extension name)

最后

本文对于开发者来说没什么技术难度，主要从一个 code Snippets 的角度出发来帮助团队，从而提高效率，主要是熟悉一下发布一个 VS Code 插件的流程，后续我会从一个实例的角度介绍下如何开发一个 VS Code 插件。

希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

一起来写 VS Code 插件:为你的团队提供常用代码片段

前言

推荐

开发

创建代码片段

发布

最后