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

前言
VS Code 是前端开发者最佳的开发工具,你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢?或者在你的团队内部是否有一些内部组件库,比如 Ant Design、 React hooks 等组件库,团队内部伴随开发的也一直打开组件相关文档?
其实我们可以开发一些常用的代码片段(Snippets)供团队内部使用。当输入前缀的时候就会触发智能提示。

推荐
首先推荐几个前端常用 Snippets 插件
ES7 React/Redux/React-Native/JS snippets React 开发者常用
vetur vue 开发者推荐, 语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。VS Code 官方钦定 Vue 插件,Vue 开发者必备。
一般常用的组件库在 VS Code 搜索就会得到。
最近 VS Code 发布了网页版 https://vscode.dev/ 当时上面的 snippets 在网页版中往往不支持,其实是上面的这些插件包含了其他一些非代码提示的功能,如果是纯 snippets 在网页版也是支持的。
开发
接下来就要开发团队内部 VS Code 插件了,打开 VS Code API 的官网, 引入我们眼帘的是
首先全局安装脚手架,安装完成后,在命令行中输入

选择 New Code Snippets

输入一些基础信息后项目就创建成功了。
创建代码片段
有一个网站可以帮助我们快速的创建 code snippethttps://snippet-generator.app/

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

其他 hooks 可以继续添加到 JSON 对象中,
如果想在让 typescript javascriptreact 也支持,可以在 package.json 中的 contributes 字段指定 4 份 snippets;
点击调试就可以在本地调试了

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

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

第三步进入组织创建令牌

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

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

创建 token 成功后你需要本地记下来,因为网站是不会帮你保存的!!!
第四步 创建一个发布者
发布者是 visualstudio 代码市场的扩展的唯一身份标识。每个插件都需要在 package.json
文件中指定一个 publisher 字段。
你可以通过 visual studio 插件市场发布者管理页面创建一个新发布者,然后使用 vsce login <publisher name>
, 输入刚才的 token,登陆成功。

第五步发布插件
发布成功后可能需要一两分钟,才可以在 VS Code 中搜索到,可以直接通过 url 访问
https://marketplace.visualstudio.com/items?itemName=<publisher name>.<extension name>
也可以使用以下命令 取消发布
最后
本文对于开发者来说没什么技术难度,主要从一个 code Snippets 的角度出发来帮助团队,从而提高效率,主要是熟悉一下发布一个 VS Code 插件的流程,后续我会从一个实例的角度介绍下如何开发一个 VS Code 插件。
希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。
版权声明: 本文为 InfoQ 作者【狂奔滴小马】的原创文章。
原文链接:【http://xie.infoq.cn/article/27343579b08815abad7cc8602】。文章转载请联系作者。
评论