手撸一款VSCode Host管理插件

做web开发的同学不论前端还是后端应该都基本用过host工具，用于管理开发，测试，预生产等等各种环境的host配置。这里分享一下自己手撸一款VS Code host文件管理插件的相关内容。什么是HostHosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。为什么需要Host管理工具开发&测试过程中经常需要在不同的环境中切换，如果没有一个较好的管理工具，人力手动更新hosts文件效率低而且不好维护。所以在开发过程中有这样一个工具能够一定程度的提升开发&测试效率。Host管理工具需要哪些功能根据目前常用的host管理工具来看，需要具备如下几个主要功能1. 新增Host文件2. 删除Host文件3. 选中Host文件，更改同步到系统Host文件取消选中Host文件，更改同步到系统Host文件4. 编辑Host文件，保存时同步到系统Host文件技术选型综合上诉分析可以看出其核心主要集中在文件操作,GUI交互方面只需要文件的简单管理和编辑即可，VS Code 完美切合上述诉求(实现简单轻量、跨平台)，故此处选择基于vscode定制插件的方式实现host管理功能。当然，如果熟悉其他的GUI技术，通过其他如windows系列的各种GUI库、QT、electron + (vue|react|angular)等均可以实现该功能，相对来讲插件的形式最轻量,开发成本也最少。实现说明1. 功能预览 这里先给出实现效果让大家有一个直观的感受,Explorer窗口最下方即是安装该插件后的管理入口，实现了新增、删除、修改、选中、取消选中等主要功能。 2. 项目目录 3. 文件说明 除了vscode插件脚手架系统生成的文件外，主要只有新增两个文件。hostTreeDataProvider.ts, FileUtil.ts。其中hostTreeDataProvider.ts有两个作用，一是管理展示host文件目录树，二是接收处理菜单命令。FileUtil.ts则主要用来读写、操作host相关文件。 菜单命令映射关系如下图 4. ahost插件初始化 初始化时会判断用户目录是否存在 .ahost文件夹，如不存在则创建该文件用来存储新增的自定义host。新增该文件成功后，在将当前host文件内容同步到该文件夹下新增一个default.host文件。然后新增meta.json元信息文件用来存储当前选中状态。5. ahost选中操作 选中某一文件时，会将该文件名存入元信息文件meta.json。然后调用同步方法，将所有当前选中的host文件内容合并后，同步至系统host文件。其他操作原理类似。6. 主要代码 具体代码可以到Github上查看，下文有Github仓库的地址和插件的地址也欢迎试用。 extension.ts ahostTreeDataProvider.ts 项目地址该插件已发布到VS Code插件市场，源码也已已提交到Github ，因主要精力集中在实现功能，代码组织可能比较凌乱,欢迎感兴趣的同学拍砖&PR，共同进步。插件地址 https://marketplace.visualstudio.com/items?itemName=gamedilong.ahost只需要在vscode中插件窗口搜索ahost 安装即可 项目地址: https://github.com/gamedilong/ahost 如对你有所帮助欢迎star

本文章由javascript技术分享原创和收集