手擼一款VS Code Host管理插件

作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，共同進步。

• 插件地址https://marketplace.visualstudio.com/items?itemName=gamedilong.ahost
• 只須要在vscode中插件窗口搜索ahost 安裝便可 項目地址:https://github.com/gamedilong/ahost如對你有所幫助歡迎star🙏