手撸一款VS Code Host管理插件
发布于 5 年前 作者 gamedilong 7887 次浏览 来自 分享

做web开发的同学不论前端还是后端应该都基本用过host工具，用于管理开发、测试、预生产等等各种环境的host配置。这里分享一下自己手撸一款VS Code host文件管理插件的相关内容。

什么是Host

Hosts 是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

为什么需要Host管理工具

开发&测试过程中经常需要在不同的环境中切换，如果没有一个较好的管理工具，人力手动更新hosts文件效率低而且不好维护。所以在开发过程中有这样一个工具能够一定程度的提升开发&测试效率。

Host管理工具需要哪些功能

根据目前常用的host管理工具来看，需要具备如下几个主要功能

  1. 新增Host文件
  2. 删除Host文件
  3. 选中Host文件，更改同步到系统Host文件
  4. 取消选中Host文件，更改同步到系统Host文件
  5. 编辑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文件的方式保持当前host。然后创建meta.json元信息文件用于存储当前选中的host配置文件名，供同步host内容使用。
  5. ahost选中操作 选中某一文件时，会将该文件名存入元信息文件meta.json。然后调用同步方法，将所有当前选中的host文件内容合并后，同步至系统host文件。其他操作原理类似。
  6. 主要代码 具体代码可以到Github上查看，下文有Github仓库的地址和插件的地址也欢迎试用。 extension.ts ahostTreeDataProvider.ts

项目地址

该插件已发布到VS Code插件市场，源码也已已提交到Github ，因主要精力集中在实现功能，代码组织可能比较凌乱,欢迎感兴趣的同学拍砖&PR，共同进步。

回到顶部