做web开发的同学不论前端还是后端应该都基本用过host工具，用于管理开发，测试，预生产等等各种环境的host配置。这里分享一下自己手撸一款VS Code host文件管理插件的相关内容。
什么是Host
Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。
为什么需要Host管理工具
开发&测试过程中经常需要在不同的环境中切换，如果没有一个较好的管理工具，人力手动更新hosts文件效率低而且不好维护。所以在开发过程中有这样一个工具能够一定程度的提升开发&测试效率。
Host管理工具需要哪些功能
根据目前常用的host管理工具来看，需要具备如下几个主要功能
- 新增Host文件
- 删除Host文件
- 选中Host文件，更改同步到系统Host文件
- 取消选中Host文件，更改同步到系统Host文件
- 编辑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
另外个人翻译的一篇Github的最全资源索引集，有兴趣的同学也欢迎star。翻译来自star超过 123k的github - awesome。有很多优质的学习资源。
地址 https://github.com/gamedilong/awesome-cn
以上内容如对您有所帮助，欢迎关注、转发、收藏、评论。有任何问题或者建议也欢迎随时反馈，大家一起交流沟通，后续会提供更多优质的内容给到各位爱好技术的伙伴，谢谢！
閱讀更多 前後端漫遊指南 的文章
