终端模拟器上的超链接

270 阅读2分钟

终端是程序员常用的软件,对于前端来讲终端在展示信息方面更加常见,比如下面两个场景:

欢迎页面:

https://linux.how2shout.com/how-to-use-motd-in-ubuntu-22-04-20-04-linux-or-any-version/

信息报错:

对于第一个信息场景来讲,如果展示的信息 URL 过长这会非常的不美观,对于第二个场景来讲,如果我们能在报错的规则上添加可点击的链接,则减少了我们把规则放到搜引擎的步骤。

这两个场景都呼之欲出一个概念——超链接。

原生的终端是不支持超链接语法的,不过好消息——在主流的最新模拟终端上基本都支持,你可以在这里查看你使用的模拟器支持的情况 OSC 8 adoption in terminal emulators,这里我们以 VSCode 为环境演示。

echo $TERM_PROGRAM 
vscode

VSCode 所依赖的终端模拟器是 xterm.js,它在 5.0.0 的版本就支持了超链接功能。

创建超链接只需要一行代码,终端输入下面代码并回车:

printf '\e]8;;http://example.com\e\This is a link\e]8;;\e\\n'

展示效果如下,一个虚线表示的超链接,这点和 HTML a 标签默认的超链接不同:

image.png

当鼠标悬停的时候还能预览链接地址:

image.png

现在 cmd 鼠标点击文字,是真的可以弹出跳转。

image.png

创建超链接的语法规则是属于 ANSI 的内容,由两个「\e]8;; 内容 \e\」组合在一起表示超链接,其中第一个语法里面的内容作为跳转的目标地址,第二个语法里面的内容作为文字展示。例如:

printf '\e]8;;http://example.com\e\This is a link\e]8;;\e\\n'

给 ESLint 的输出规则添加超链接无疑是大有裨益的,最终实现效果如下:

image.png

参考: