阅读 3010

Windows Terminal 主题美化

等级:⭐        难度:⭐        趣味性:⭐⭐⭐


目标是打造拥有和 Linux & mac 一样体验的 Shell。

如果有 PowerShell 基础,大约半个小时完成。

使用 Windows 的用户一定会对这个丑陋的黑色框框不陌生。不错,它就是 CMD 命令行,从 Windows 诞生就一直存在。

image-20210202160139593

随后,Windows 基于 .Net Framework 开发了全新的替代 CMD 的工具:Windows PowerShell ,它不仅可以兼容 CMD,同时引入了 cmdlet,功能更强大了。打开看一下,蓝天白云中透着火热的太阳。这字体、配色,像极了蓝屏的感觉,怎么看怎么不舒服,特别是抛出来的错误,感觉很惊悚,尽管认真读错误提示,还是不知所云,甚至连最简单的复制粘贴功能都无法实现。无法比拟 Linux 和 mac 下的 Shell。

image-20210202160950902

不久前,Windows 终于发布了跨平台的 PowerShell 7 。官方称是全新设计的 PowerShell,因为用了 .Net Core 作为运行时,可以跨平台使用,支持:Windows、macOS、Linux,甚至还支持了 ARM。看来是下了苦功夫从头再来。

微软在 Build 2019 大会上发布了 Windows Terminal ,它把目前 Windows 上的 PowerShell、CMD 以及 Windows Linux 子系统(WSL)三大环境实现了统一。

image-20210202163637062

其实很容易把 PowerShell 和 Windows Terminal 混淆,它们是两个不同的软件。可以这么理解,PowerShell 是命令行程序,真正执行指令的程序,而 Windows Terminal 则是管理各种命令行的工具。单独使用 PowerShell 就行了,为什么还要 Windows Terminal 呢?那是因为 Windows 下不仅可以安装 CMD,还可以安装 PowerShell 5.1、PowerShell 7、WSL、Azure Cloud Shell等,它需要一个工具集中管理,它就是 Windows Terminal。下图可以看出,Windows Terminal 可以打开不同的命令行程序。那么,命令是在 Windows Terminal 界面输入,它会调用对应的 PowerShell 来执行,执行完毕后再返回 Windows Terminal 显示出来,所以,我们就不用再面对丑陋的 CMD、PowerShell 界面了。

image-20210202163001147

最激动人心的是: Windows Terminal 可以配置主题,让界面更好看,更有个性。

Windows 终端屏幕截图

安装 Windows Terminal

如果你是 Windows 10 系统,可以打开系统自带的 Microsoft Store,搜索 Windows Terminal 直接安装就可以了。

image-20210203101758829

如果还没安装 PowerShell 7.x,强烈推荐安装,可参考 官网,如果下载不了,点 这里下载,适用 Windows x64。

后面也会基于 PowerShell 学习。

主题美化原理

看了网上的美化教程,很多方法让我疑惑,于是查阅了许多资料,才逐渐明白整个过程。

美化过程其实分成两个部分,PowerShell 和 Windows Terminal,因为这两个软件是独立的,就如前面介绍的,Windows Terminal 只是一个壳(载体),用来显示 PowerShell 的输出内容,最终执行 Shell 的还是 PowerShell。Windows Terminal 本身有主题机制,通过配置文件很容易更改主题。同样地,PowerShell 也可以进行个性化配置,但最强大的之处在于它的插件机制,可以通过引入模块到 PowerShell,增加 PowerShell 的功能。

所以接下来将独立配置 PowerShell 和 Windows Terminal。

先决条件

先安装好后面要使用到的工具。

安装 Visual Studio Code (VS Code)

强大的编辑器,用来编辑配置文件。这里安装

安装 scoop

scoop 是 Windows 平台的包管理工具(非官方),类似 Linux 的 yum 或者 mac 的 homebrew 。打开 PowerShell 7,输入命令:

# 设置执行权限
> Set-ExecutionPolicy RemoteSigned -scope CurrentUser
# 从网络下载脚本并安装
> Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
# ( 如果出现错误提示,是因为访问不了目标地址,使用如下地址安装 )
> Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://cdn.yulinyige.com/script/scoop-installs.ps1')
复制代码

image-20210204131912198

配置 PowerShell

为什么先配置 PowerShell 呢?因为最终的输出内容是由 PowerShell 决定的,原生 PowerShell 输出的内容是如此的丑陋。

image-20210204100712908

再看下装修后的效果。

image-20210206095132538

值得注意的是,这只是 PowerShell 自身的美化,不是 Windows Terminal。PowerShell + Windows Terminal 一起美化,效果更佳。

PowerShell 主要美化:

  1. 更改整体配色。

  2. 改变输出样式,提示符前显示用户名和计算机名。

  3. 增强 Git 命令功能和 Git 分支状态显示。

  4. 自动补齐功能,可根据历史命令和当前目录补齐。

  5. ls 命令显示色彩。

系统自带的 Windows PowerShell 5.x 和刚安装的 PowerShell 7.x 是两个独立的 Shell,注意到 5.x 带有 Windows 前缀,而 7.x 没有。两者的配置也是独立的,互不影响,所以如果你在 7.x 做配置,打开 5.x 并不会生效。

为了减少疑惑,接下来将统一使用原生的 PowerShell 7.x。

image-20210204102831920

安装 oh-my-poshposh-git

oh-my-posh 是 PowerShell 主题管理工具,posh-git 可以实现类似 oh-my-zsh 一样的 Git 命令增强工具(命令别名和显示分支信息等),但是,oh-my-posh 基于 posh-git 的,所以两个都要安装。

可以通过 PowerShell Gallery 安装,方法:打开 PowerShell 7(不是 Windows PowerShell),输入命令:

> Install-Module posh-git
> Install-Module oh-my-posh
复制代码

image-20210204114525678

配置 PowerShell

开启 Prompt

# 这是开启默认配置的
> Set-Prompt
# 设置主题,Agnoster 是主题名
> Set-Theme Agnoster
复制代码

显示效果马上改变,是不是变成了 Linux Shell 风格。原来的 PS C:\Users\yulinyige> 变成了 yulinyige@DESKTOP-N8LA1TE。但是你会发现,命令提示符是乱码,因为当前使用的字体没有包含特殊的符号,后面再详细安装。

image-20210204130619065

上面开启 Prompt 效果只对当前窗口有效,关闭重开又没了,所以我们必须要把配置写入 PowerShell 的配置文件,它在哪里呢?输入命令($ 符号也要输入)打印出路径( 如果你使用 Windows PowerShell 5.x,会发现它保存在 Windows PowerShell 文件夹,可以看出它们是独立的)。

> $PROFILE
复制代码

image-20210204152002191

好了,用前面安装的 VSCode 打开配置。

> code $PROFILE
复制代码

把下面的配置写入 ps1 文件并保存,每次启动 PowerShell,它会自动加载。

Import-Module posh-git
Import-Module oh-my-posh
Set-Theme Agnoster
复制代码

image-20210204152644885

另外,可以利用 PowerShellPSReadLine 丰富 PowerShell 的功能,添加如下的


Set-PSReadLineOption -PredictionSource History # 设置预测文本来源为历史记录
 
Set-PSReadlineKeyHandler -Key Tab -Function Complete # 设置 Tab 键补全
Set-PSReadLineKeyHandler -Key "Ctrl+d" -Function MenuComplete # 设置 Ctrl+d 为菜单补全和 Intellisense
Set-PSReadLineKeyHandler -Key "Ctrl+z" -Function Undo # 设置 Ctrl+z 为撤销
Set-PSReadLineKeyHandler -Key UpArrow -Function HistorySearchBackward # 设置向上键为后向搜索历史记录
Set-PSReadLineKeyHandler -Key DownArrow -Function HistorySearchForward # 设置向下键为前向搜索历史纪录
复制代码

更换 oh-my-posh 主题

oh-my-posh 内置了很多主题,足够我们使用了,可以在 这里 查看,只要把前面 Set-Theme 命令后的主题名称更换即可。下面的主题都觉得不好看,可以 自定义主题,为了减少难度,这里就不详细学习了。

image-20210204153318824

image-20210204153342328

更换 PowerShell 字体

还记得前面显示的命令的乱码吗 ?我们更换字体解决它。示例安装 FantasqueSansMono-NF 字体(也可以使用系统自带字体,这一步就不需要安装)。

> scoop search FantasqueSansMono-NF
> scoop bucket add 'nerd-fonts'
# 下面一个命令要加 sudo 提权
> sudo scoop install FantasqueSansMono-NF
复制代码

image-20210204155540058

安装好字体后,右击标题栏,打开 默认值 设置(是默认值,不是属性),选择刚才安装的字体,确定后,需要重新打开 PowerShell 一切显示正常了。

image-20210204163429212

image-20210204163503220

image-20210204160553666

使用 ColorTool 自定义 PowerShell 文字颜色

我们不是使用 oh-my-posh 配置好 PowerShell 主题了吗,为什么还要 ColorTool 更改颜色?事实上,oh-my-posh 是更改显示内容的风格,而 ColorTool 是更改文字的颜色。当觉得 oh-my-posh 内置的颜色不满足需求时,可以使用 ColorTool 更改,如果 OK 就可以跳过这一步了。

ColorTool 是微软出品的更改 PowerShell 文字颜色的工具,使用也非常简单。

# 安装微软官方颜色工具
> scoop install colortool

# 查看内置的配色方案,共有 8 种
> colortool --schemes

# 设置主题,后面是配色方案名称。
> colortool OneHalfDark.itermcolors
复制代码

image-20210204162452142

增强 PowerShellls 功能

dircolors 是 Linux 下的命令,可以设置 ls 指令在显示目录或文件时的色彩,同样的,如果也想让 PowerShell 显示彩色目录,可用插件 DirColors 实现。

# 安装 DirColors
> Install-Module DirColors
# 打开 PowerShell 配置
> code $PROFILE
复制代码

在配置文件末尾添加一行,重启 PowerShell 就可以看到彩色目录了。

Import-Module DirColors
复制代码

image-20210206094513068

image-20210206094641549

其他插件也可以用同样的方法安装,开始探索吧 ~

配置 Windows Terminal

前面折腾那么久都是围绕 PowerShell 转,开始 Windows Terminal 吧!

强大的功能之一就是可以自定义主题,包括:字体、文字颜色、背景等。最终配置成什么效果,就看审美水平了。可以参考 WIndows Terminal 文档 进行配置,下面是我的配置过程。

在 Windows Terminal 打开 PowerShell 7,可以看到,还是一样丑。前面的配置似乎不生效,因为 Windows Terminal 也有一套自己的主题。

image-20210208094239701

配置文件

Windows Terminal 可以说有两个配置文件,一个是默认的 default.json,它不能被修改;一个是 setting.json,我们即将要修改的。要找到配置文件很简单,点击标题栏的下拉箭头,再点击 设置,它会用默认的 json 编辑器打开配置。

如果想打开默认的 default.json,在点击 设置 时按住 Alt 键。

Windows Terminal 以前的版本配置文件叫 profile.json,所以网上有些文章是讨论 profile.json 的。

image-20210208094825799

image-20210208095001478

image-20210208095406088

仔细观察两个配置文件,他们的结构是一样的。我把它分成 四部分

  • Global Windows Terminal APP 整体的配置,启动参数、样式等,对应下图的 Global Config
  • profiles 配置每个终端的样式。
  • schemes 终端配色方案。
  • actions 定义快捷键操作,一般默认即可。

下下图是 Globalprofiles 的影响范围。setting.json 会覆盖 default.json 的相同配置。如果不知道如何配置 setting.json,可以参考 default.json 每一个节点的 key-value 值。主题配置主要是 Globalprofilesschemes 节点。

image-20210208212809085

image-20210208213753598

profiles 配置终端样式

profiles 下有 list 节点,它是一个数组,表示每种终端的样式,所以可以做到每种终端显示不一样的效果。每个节点详细信息可以看 官方文档

想统一配置所有终端样式?安排!可修改 defaults 节点,key-value 值和 list 一样。

{
    "profiles":{
        "defaults":{
            // 对所有终端生效
        },
        "list":[
            {
                // 终端 1
            },
            {
                 // 终端 2
            }
        ]
    }
}
复制代码

接下来我们配置 PowerShell 的样式,找到 name=PowerShell 的子节点。

image-20210208215512219

字体颜色

字体颜色在 schemes 节点中定义,只要引用 shemes 的 name 即可,默认是 Campbell,我们改成 One Half Dark,马上看到字体颜色就变了。

{
   "guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
   "hidden": false,
   "name": "PowerShell",
   "source": "Windows.Terminal.PowershellCore",
   "colorScheme":"One Half Dark"
}
复制代码

image-20210208221344008

字体

只要是系统安装的字体都可以引用,但是最重要的是支持特殊字符,否则像上面出现乱码。我们使用官方推荐的 Cascadia Code 字体( Github 的附件很难下载,我备份了一个,点 这里 下载),解压后会发现很多字体,可以安装自己喜欢的。我安装了 otf/static/CascadiaCodePL-Bold.otf ,字体的名称打开字体查看。

image-20210208223519076

{
	"guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
    "hidden": false,
    "name": "PowerShell",
    "source": "Windows.Terminal.PowershellCore",
    "colorScheme":"One Half Dark",
    "fontFace":"Cascadia Code PL"
}
复制代码

其实还有很多好用的字体:

背景图片

可以自定义背景图片、对齐方式、图片缩放、图片透明度等。

{
	...
	// 图片路径,注意斜杠转义
	"backgroundImage":"C:\\Users\\yulinyige\\Pictures\\dolaameng.jfif",
	// 缩放方式
    "backgroundImageStretchMode":"uniformToFill",
    // 对齐方式
    "backgroundImageAlignment":"center",
    // 透明度
    "backgroundImageOpacity":0.2
}
复制代码

image-20210208225312037

毛玻璃效果

还记得 Windows 7 的毛玻璃效果吗?其实我觉得挺好看的,特别是点击时渐变反馈效果,肉肉的,符合操作习惯。但是到了 Windows 8 以后界面都拍扁了。Windows Terminal 也支持毛玻璃效果。开启毛玻璃效果是不是又漂亮了一点?

{
	...
	// 开启毛玻璃效果
	"useAcrylic":true,
	// 毛玻璃透明度
    "acrylicOpacity":0.5
}
复制代码

image-20210208225953035

schemes 配色方案

schemes 管理配色方案,同样是一个数组,每种配色方案会有一个名字 name ,引用配色方案就是通过 name 的值。默认预设了几种配色方案,可在 default.json 查看,详细 点这里

除了 name 之外都是配色,具体的颜色代表什么意思暂时还找不到,下面的颜色说明来自 这里

// 典型的 schemes 格式
{
    "schemes":[
        {
            "name": "Campbell", // 配色方案名称,必须的
            "foreground": "#CCCCCC", // 输出显示字体颜色
            "background": "#0C0C0C", // 背景色
            "cursorColor": "#FFFFFF", // 光标颜色
            "black": "#0C0C0C", // 箭头左边三角,git 目录的 .git 目录下提示箭头背景提示文字
            "red": "#C50F1F", // ssh 后 vim 打开文本文件已输入行普通字符显示文字
            "green": "#13A10E", // git 目录的 .git 目录下提示箭头背景提示
            "yellow": "#C19C00", // git 目录的分支箭头背景提示
            "blue": "#0037DA", // 目录箭头本体
            "purple": "#881798", // ssh 后 vim 等工具打开文件后的 { 和 }等符号本体,git 更新完后显示的分支箭头背景提示
            "cyan": "#3A96DD", // 引号及内部字符
            "white": "#CCCCCC", // 未知
            "brightBlack": "#767676", // cd 等 命令后面的 .. 和 * 等特殊符号,以及命令参数字符颜色
            "brightRed": "#E74856", // 系统提示字符颜色:错误的命令,git status 显示
            "brightGreen": "#16C60C", // ssh 用户权限显示
            "brightYellow": "#F9F1A5", // 输入的命令字符
            "brightBlue": "#3B78FF", // ssh 文件夹等高亮显示,ssh 目录,vim 打开文本文件未输入行 ~ 字符显示
            "brightPurple": "#B4009E", // 未知
            "brightCyan": "#61D6D6", // ssh vim 等工具打开文件后的 { 和 } 等符号背景
            "brightWhite": "#F2F2F2" // 目录箭头左边和中间的提示文字
        }
    ]
}
复制代码

如何找到合适的配色

自定义配色很繁琐,而且很好费时间,最好的方法是用别人做好的配色。可以在项目 iTerm2-Color-Schemes 里找,有两百多方案,先在 Screenshots 里挑选好颜色,然后到 windwosterminal 目录对应的 json 文件复制样式。

image-20210208235129519

image-20210208235256426

还有一些可以挑配色的网站:

CRT 装X效果

CRT 模式就像黑客帝国里的黑底绿字,像素堆砌成的文字,瞬间回到 80 年代。是炫酷还是怀旧的感觉呢?

{
	"guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
    "hidden": false,
    "name": "PowerShell",
    "source": "Windows.Terminal.PowershellCore",
    "fontFace":"Cascadia Code PL",
    // 只要加上这一句,即可开启亮瞎眼的效果。
    "experimental.retroTerminalEffect":true
}
复制代码

image-20210208230411627

哆啦A梦配上偏白的配色有点分裂,来看看黑客帝国的终极配置,其实就是把所有的颜色改成 #00d900

image-20210209000248546

{
    "profiles":
    {
        "list":
        [
            {
                "guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
                "hidden": false,
                "name": "PowerShell",
                "source": "Windows.Terminal.PowershellCore",
                "colorScheme":"Zhuang B",
                "fontFace":"Cascadia Code PL",
                "experimental.retroTerminalEffect":true
            }
        ]
    },
	"schemes": 
	[
		{
  			"name": "Zhuang B",
  			"black": "#000000",
  			"red": "#00d900",
  			"green": "#00d900",
  			"yellow": "#00d900",
  			"blue": "#00d900",
  			"purple": "#00d900",
 			"cyan": "#00d900",
 			"white": "#00d900",
 			"brightBlack": "#00d900",
  			"brightRed": "#00d900",
  			"brightGreen": "#00d900",
  			"brightYellow": "#00d900",
  			"brightBlue": "#00d900",
  			"brightPurple": "#00d900",
  			"brightCyan": "#00d900",
  			"brightWhite": "#00d900",
  			"background": "#000000",
  			"foreground": "#00d900"
		}
	]
}
复制代码

Global 全局配置

全局配置就不逐个学习了,详细可参考 官方文档 中的 启动交互外观 三个小节。

默认的配置基本上挺好看的,一个值得修改的地方是默认终端,因为最新版的 PowerShell 功能非常强大,我们希望 Windows Terminal 默认打开 PowerShell,修改 defaultProfile 成 PowerShell 的 guid 即可:

image-20210209001845589

最后

事实上整个配置过程并不复杂(也可能是我说得太啰嗦),到最后外观也没什么改变。但是作为开发者,可以思考两个问题:

  • 它是如何统一所有的终端到 Windows Terminal ?
  • 如何开发一个可配置的应用?
文章分类
开发工具
文章标签