介绍下我的 vscode 插件: Live Host

本文涉及的产品
视频直播,500GB 1个月
云解析 DNS,旗舰版 1个月
.cn 域名,1个 12个月
简介: 介绍下我的 vscode 插件: Live Host

前言 github 443 ?


上个月啊,我写了篇 叮咚抢菜运力监控的文章,后面把代码 push 到github 的时候,发现网络报错 443


fatal: unable to access 'https://github.com/mingjiezhou/live-host.git/':
LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443


这一度让我很苦恼,因为我已经开启了 vpn 的啊 🤔,后来发现是没有配置 git proxy, 即便开启了 vpn, 在默认设置下 git 在终端并不能使用代理访问 github,这时候就需要对git进行一些代理配置;于是我给其加上了如下配置


// 全局配置: 7890 是我本地代理的端口
git config --global http.proxy https://127.0.0.1:127.0.0.1:7890 
git config --global https.proxy https://127.0.0.1:127.0.0.1:7890
// 也可以针对当前仓库来配置,在项目根目录执行
git config http.proxy https://127.0.0.1:127.0.0.1:7890 
git config https.proxy https://127.0.0.1:127.0.0.1:7890


局部代理配置执行后,配置规则会被追加到项目根目录的 .git 文件夹下的 config 文件中


1687779432197.png


问题算是解决了,但是想想有没有不用 vpn 的方案呢(原因自己想 🤔),想来想去 貌似通过修改 host 文件也可以。

国内访问 github 一般都比较慢,可能是由于咱们特殊的国情,但是倒还不至于完全被墙,我发现 github 访问慢是因为国内的 github 域名 DNS 解析被污染了,DNS 污染的表现主要为,1- 域名解析错误,2- 封ip,不管是哪种情况都会导致 git clone pull push 等出现 443 或者 timeout。

网域服务器缓存污染(DNS cache pollution),又称域名服务器缓存投毒(DNS cache poisoning),是指一些刻意制造或无意中制造出来的域名服务器数据包,把域名指往不正确的IP地址。一般来说,在互联网上都有可信赖的网域服务器,但为减低网络上的流量压力,一般的域名服务器都会把从上游的域名服务器获得的解析记录暂存起来,待下次有其他机器要求解析域名时,可以立即提供服务。一旦有关网域的局域域名服务器的缓存受到污染,就会把网域内的计算机导引往错误的服务器或服务器的网址。 -- 来自百科

知道了原因,那让我们来看看怎么修改吧。


Host 文件修改(添加 github ip)


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

由 host 文件的定义知道,如果我配置了github 的 ip 到本地 host 文件,那么系统将优先使用本地的 DNS 映射关系,按照这个思路做下去,

先找到 git 命令行操作涉及到的几个相关域名

  1. github.com
  2. github.global.ssl.fastly.net
  3. assets-cdn.github.com
  4. ...

然后可以到下面几个 ip 查询的网站(任选一个就行),查找其对应的 ip 地址

  1. github.com.ipaddress.com
  2. ip.tool.chinaz.com
  3. whatismyipaddress.com//hostname-i…
  4. ip-api.com
  5. ping.chinaz.com/github.com 寻找最快 ip

最终我们拿到这些数据


199.232.69.194                github.global.ssl.fastly.net
185.199.108.153               assets-cdn.github.com
140.82.112.3                  github.com


然后将此其添加到系统 host 文件中;

以 mac 为例:在终端执行 sudo vim /etc/hosts 指令,输入管理员密码,进入 host 文件的编辑页, 将数据填充进去。如果没立即生效可能需要手动 sudo killall -HUP mDNSResponder 强制刷新。


1687779421771.png


如果顺利的话,这时候 git 操作应该就正常了!

如果此时 命令行依然 443,你记不记得之前说的要先配置下代理哦。


Vscode 插件:更优雅的方式


在过去的几年里,我曾经多次这样手动的修改 host 文件,但是频率并不高,因为我觉得比较麻烦,要输入指令,编辑起来也慢,特别这次 github 的 ip 又经常变化,如果还是手动修改 host,真是增加了不少心智负担,于是我就想,能否将其 封装成一个工具呢,几经思考觉得 vscode 插件是一个不错的idea,毕竟哪个前端程序员不用 vscode 呢?(狗头~~|)

关于 vscode 插件的入口知识这里就不详解了,因为我也是新手,就暂且把觉得不错的几个文档和教程贴出来供大家参考

  1. 官方文档
  2. 中文文档
  3. vscode 插件市场
  4. Azure 网站
  5. 一个系列教程
  6. 一个不错的中文翻译文档

下面我说下几个需要注意的地方:


源码阅读

除了看文档学习,很重要的是看其他人的插件源码,因为vscode 插件发布后源码是公开的,所以只要你安装后就自动下载到你电脑上了,以mac 为例,cd 到当前用户名下,command + shift + . , 将隐藏文件显示出来, 找到 .vscode , 插件就在里面的 extensions 文件夹里。


1687779412584.png


调试方法

本地安装包后,F5 键将启用一个调试窗口,起到类似浏览器和控制台的作用


本地安装

vsce 是一个用于将插件发布到市场上的命令行工具, 可以用它来将插件打包成 vsix 包,然后插件就可以本地安装了


npm install vsce -g
vsce package


1687779404377.png


插件市场发布


很多文章中讲到使用 vsce publish 的命令行方式来发布,其实也可以通过web 端来操作,vscode 插件市场 中注册自己的账号就行了。


1687779397610.png


Live Host 的功能介绍


站在巨人的肩膀上

1、支持快速增删改查 host 文件 (参考开源 host 方案)

注:这个很 6,果真是当你有一个idea的时候,这个世界上就已经有人作出了成品,我就是把这个当教程案例来学习的。

2、每天获取最新的 github host 配置,不需要自己再去手动查找了 (参考开源 Api

注:本来是打算自己去查 ip的,无意中发现了这个项目每天都会更新 host 配置,而且覆盖的 github 域名相当多,貌似是靠谱的所以就使用了他的 api, 一切从简了哈哈。

3、监听任意域名(Array)的有效 IP,自动更新 host;(开发中)


总结


在学习vscode 插件和实现 Live Host 工具的过程中,不仅解决了 github ip 访问的问题,也对 vscode 的插件机制有了些浅薄的了解,希望后续能做些更有意思的项目吧。

最后,感兴趣的朋友不妨去下载试一试哦,插件市场搜索 Live Host  就好了。


1687779389730.png

目录
相关文章
|
3月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
217 1
|
17天前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
130 3
|
20天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
41 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
3月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
117 5
vscode10大常用插件
|
2月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
102 2
|
3月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
3月前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
3月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
154 0
|
3月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
214 0
|
4月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
252 3