做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
以上內容如對您有所幫助，歡迎關注、轉發、收藏、評論。有任何問題或者建議也歡迎隨時反饋，大家一起交流溝通，後續會提供更多優質的內容給到各位愛好技術的夥伴，謝謝！
閱讀更多 前後端漫遊指南 的文章
