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

前言

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

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

推荐

首先推荐几个前端常用 Snippets 插件

• ES7 React/Redux/React-Native/JS snippets React 开发者常用

• antd-snippets
  

• vetur vue 开发者推荐, 语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。

• Vue 3 Snippets
  

• element-ui-snippets
  

一般常用的组件库在 VS Code 搜索就会得到。

最近 VS Code 发布了网页版 https://vscode.dev/ 当时上面的 snippets 在网页版中往往不支持，其实是上面的这些插件包含了其他一些非代码提示的功能，如果是纯 snippets 在网页版也是支持的。

开发

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

npm install -g yo generator-code

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

yo code

选择 New Code Snippets

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

创建代码片段

有一个网站可以帮助我们快速的创建 code snippethttps://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 中使用了，也可以在网页版 https://vscode.dev/ 使用

发布

1. 第一步先安装 vsce

npm install vsce -g

2. 第二步创建账号

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

3. 第三步进入组织创建令牌

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

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

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

4. 第四步 创建一个发布者

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

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

5. 第五步发布插件

vsce publish

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

https://marketplace.visualstudio.com/items?itemName=<publisher name>.<extension name>

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

vsce unpublish (publisher name).(extension name)

最后

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

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