一起来写 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 snippet
https://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/ 使用
发布
- 第一步先安装 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 访问
https://marketplace.visualstudio.com/items?itemName=<publisher name>.<extension name>
也可以使用以下命令 取消发布
vsce unpublish (publisher name).(extension name)
最后
本文对于开发者来说没什么技术难度,主要从一个 code Snippets 的角度出发来帮助团队,从而提高效率,主要是熟悉一下发布一个 VS Code 插件的流程,后续我会从一个实例的角度介绍下如何开发一个 VS Code 插件。
希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的