Hancel's Blog 👋🏼

开发 VSCode 扩展，有时候 VSCode 本身的交互无法满足需要，这时候就可以使用 WebView 来实现自定义的交互。本文将介绍如何在 VSCode 扩展中使用 WebView。VSCode 目前最新版本已经可以在 Editor，SideBar，Panel 中使用 WebView。基本覆盖了 VSCode 的主要 UI 部分。 1. 创建 WebView 在 Editor 和 SideBar / Panel 中创建 WebView 的方法是不同的。在 Editor 中，可以使用 vscode.window.createWebviewPanel 方法，而在 SideBar / Panel 中，需要使用 vscode.window.registerWebviewViewProvider 方法。 1.1 Editor 中创建 WebView 在 vscode.window.createWebviewPanel 方法中，有四个参数： viewType：WebView 的类型，用于区分不同的 WebView。 title：WebView 的标题。 viewColumn：WebView....

自定义协议可用于在网页打开桌面应用程序。自定义协议有别于常见的 http、https、ftp 等协议，它是由开发者自己定义的。 协议注册 在 Windows 中，要注册一个自定义协议，需要在注册表中添加一些项目： Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Classes\myprotocol] @="URL:myprotocol" "URL Protocol"="" [HKEY_CURRENT_USER\Software\Classes\myprotocol\shell] [HKEY_CURRENT_USER\Software\Classes\myprotocol\shell\open] [HKEY_CURRENT_USER\Software\Classes\myprotocol\shell\open\command] @="\"你的程序绝对路径\" \"%1\"" 在上面的代码中，myprotocol 是自定义的协议名，你可以自己定义。你的程序绝对路径 是你的程序的绝对路径，%1 是网页传递过....

前言：这是捉鬼记系列的第三篇，如果你还没看过第二篇，可以看看：捉鬼记（二）—— 神秘的部分接口 404 这次终于不是周五了，某日早晨，坐我对面的同事突然探出头来，“林工，来帮忙看个问题呗~”。隐隐一些预感，鬼又来了。 他的问题是这样的，他的系统有一个页面，里面有一个 tab，因为某些特殊的需求，需要按下左右键切换前后的 tab。于是他使用了一个 hotkey 的库来做监听，然后在监听到左右键的时候，去修改 tab 的 activeIndex，activeIndex 是一个 v-model 绑定的变量。除了听过左右键切换，也可以直接点击 tab 切换，每次切换时，就会调用一个函数，用来改变 tab 下方动态载入的组件。这两个功能单独来说都是正常的，但是如果先点击 tab 切换，然后再使用左右键切换，就会出现问题，每次会切换两个 tab。 然后诡异的地方来了，我打了断点在切换执行的函数，想看看是不是执行了两次。结果，问题消失了！我再次点击 tab 切换，然后使用左右键切换，结果也是正常的。我尝试刷新页面，问题也没有出现。但是，如果把断点去掉，问题又会出现！ 仿佛这个 bug 像是长了眼....

前言：这是捉鬼记系列的第二篇，如果你还没看过第一篇，可以看看：捉鬼记（一）—— ERR_INSUFFICIENT_RESOURCES 又是某日周五，本来已经收拾好了东西准备下班，路过同事的时候，瞥了一眼，就被拦下了。 同事遇到一个问题，他的系统有很多接口，但是其中一个接口，访问会返回 404。接口是通过 NGINX 反向代理的，但是代理的后端原始接口，使用 APIFox 请求却完全正常。 他 404 的接口是 /api/A/B/D，而代理的配置是到 /api/A，但是 /api/A/C 本身是可以访问的，只有 /api/A/B/D 会返回 404。下面是他接口代理的配置： location /api/A/ { rewrite /api/A/(.*) /$1 break; proxy_pass http://192.168.0.1:12345; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;....

代码写多了，难免撞到鬼。鬼本是不存在的，只是代码多屎山堆积，幽径曲折，一时之间往往难以窥得全貌，遂以撞鬼。须知代码之下，皆是逻辑。故鬼怪作祟，多是自己或前人挖坑罢了。 此捉鬼记，记录日常撞见鬼故事与最后破除之法，以便鱼友共勉。 某周五，一个西安的同事突然报告，系统某些页面进不去了！一开始以为是后端又 Bug，所以马上模拟同事身份登录系统，看看是不是他的数据出了问题导致接口报错。 结果，进去之后一切功能竟然完全正常，没有任何问题！ 于是请他录屏看看发生什么。拿到视频一看，坏了，好像是前端问题！在他点击了某个页面路由时，顶端loading 条正常跑过，但界面却没有任何变化。看一下后台日志，没有收到任何接口请求。浏览器也是最新版本，基本排除了兼容性问题。用户补充了一个信息，以前也出现过，但后面自己好了。 这种时候，就只能看看用户端有没有什么 js 报错了。但是由于公司信息安全控制严格，根本没办法给用户远程看问题，只好通过开会议共享屏幕的方式来看。结果连上去卡到不行，只看到初始画面，根本看不到啥（伏笔）。 这种时候只好空口指挥用户打开浏览器开发者工具，这里就推荐让用户按 Ctrl + S....

有时候我们需要在 Windows 常驻一个应用，同时还需要进行保活。那么我们就可以利用 Windows 的 Service 机制来实现这一点。那么有没有什么方法可以任意程序制作为 Windows Service 呢？我们可以利用开源项目 winsw 来实现。 准备 在制作 Windows Service 前，我们需要准备一些东西： 要制作为 Service 的程序，需要保证程序不会在启动后立即结束，如果是控制台程序，可以加入 while(true); 来实现。 winsw 程序，在 Release 下载最新 Release 版本的程序，根据系统架构下载 WinSW-x86.exe 或 WinSW-x64.exe。 winsw 配置档案，这个待会儿说。 安装测试 先来测试一下。将 WinSW 程序放在 Service 程序的目录下，修改文件名为 service.exe 。再创建一个 service.xml 的 WinSW 配置档。内容如下： <?xml version="1.0" encoding="UTF-8" ?> <service> <id>....

最近，摸鱼派客户端增强了图片方面的功能，支持复制客户端上消息的图片和粘贴图片到消息框，之前消息框仅能支援图片文件的粘贴，而现在网页的图片和富文本的图片也都可以了。接下来将详细介绍这两个功能的具体实现： 粘贴图片 粘贴图片是几乎纯前端的功能，比如摸鱼派的编辑器就有实现，基本思路是监听 Paste 事件，然后对 clipboardData 解析处理。[1] 通常，会根据每个 clipboardData 的 item 的 type 处理，type 的值为 MIME 类型。那么，在这里我们需要处理两种情况，一种是 image/xxxx，另一种是 text/html。 document.addEventListener('paste', async (ev) => { // 获取 Clipboard Data 的项 let fileList = []; let items = ev.clipboardData && ev.clipboardData.items; for (var i = 0; items && i < items.length; i....

通过 Jenkins，我们可以实现代码的自动化部署，接下来，我们来看看如何安装和配置 Jenkins。 安装 Java 目前最新版本的 Jenkins 依赖于 Java 11。我们需要安装 Java，CentOS 7 中执行 sudo yum install java-11-openjdk -y Ubuntu 执行： sudo apt install openjdk-11-jdk 如果提示 E: Unable to locate package openjdk-11-jdk，则执行 sudo apt install software-properties-common sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt install openjdk-11-jdk 安装 Java 完成后，执行 java -version 确认版本正确即可。 安装 Jenkins CentOS 执行下面指令： sudo rpm --import https://pkg.jenkins.io/redhat-stabl....

2021 年，是精彩又丰富的一年，无论是对我还是世界而言。 感情 漂泊不定三十余年的我，终于在这一年找到了人生的永久归属。就像歌中所唱，“爱情来得太快，就像龙卷风。”去年还在享受孤独的怡然自得，今年就已为人夫。 同爲潮汕人，是相親認識的。善解人意，溫柔善良，是個很普通的女孩子。這便已足夠的。 摸魚 今年在开源项目上也是开坑不少，新建或维护了 17 个项目，其中有 6 个项目是今年挖的新坑。其中就包括了摸鱼派客户端和摸鱼大闯关 。另外还有一个 VSCode 串口扩展，发布 3 月余，收获 6K+ 用户。 （依然是摸鱼工作的一年） Flag 今年的目标，依然是每月一篇博文，但今年只完成了 4 篇，比去年多了两篇（距离完成 Flag 又近了一步）。 今年读书的目标也没达成。很少，只有 3 本（因为都在忙着陪女友），但却看了 60 部电影和电视剧（超过大半是陪她看的）。上周末老婆突然问我，和我在一起会不会让你堕落了？ 我说，会。她说，那以后我陪你看书。 不过也不是没有达成的 Flag，今年终于把做饭带便当这件事断断续续坚持到了冬天。去年天气一冷，就懒了。 收穫 另外就是坚持了运动健身，一年下....

前言 开发 VSCode 扩展时遇到了添加右键二级菜单的问题，看了官方文档之后依然不得其解。反复实验之后终于理解文档所言，故整理分享。 右键菜单 在开始之前，先讲一下如何添加右键菜单。右键菜单的添加是很简单的。只要配置 package.json 中的 menus 的 editor/context 添加 command 绑定即可。例如： { "menus": { "editor/context": [ { "command": "markdown-image.paste", "when": "editorLangId == markdown", "group": "9_cutcopypaste@4" } ] }, } 一个右键菜单包含三个属性： command ： 这个是你在 contributes 的 commands 中定义的 command。用于实行特定操作。当点击这个右键菜单时，就会执行这个 command。 when ：这个限定了右键菜单项目出现的条件，editorLangId == markdown 表示仅对 Markdown 文件生效。更多其他的变量与表达式，可以参考....