Windows 11和vscode终端美化

科技公元 工具 2022-07-22

0. 美化后的效果

Windows 11和vscode终端美化

Windows 11和vscode终端美化

1. 准备工作

  • 允许powershell执行脚本,如果不允许的话,后续执行安装命令会报错

    • 设置->隐私和安全性->开发者选项->powershell,点击应用
    • Windows 11和vscode终端美化
  • 一款 Nerd Font,Nerd Font字体中包含了很多特殊的图标,如果不使用Nerd Font的话,后面设置了终端的主题后会乱码

    • 这里我以Hasklig字体为例,下载链接。下载后会得到个Hasklig.zip的文件,解压后可以看到里面包含了很多字体。直接ctrl + A,然后右键选择安装全部字体

    • Windows 11和vscode终端美化

    • 安装完成后我们会得到如下3个字体

      • Hasklug Nerd Font
      • Hasklug Nerd Font Mono
      • Hasklug NF
    • Windows 11和vscode终端美化

  • vscode

  • Windows Terminal

    • 设置Windows Terminal的显示字体,如果不设置,后面设置主题后会出现乱码
    • 打开Windows Terminal设置,Windows PowerShell -> 外观
    • Windows 11和vscode终端美化
    • 找到之前安装的字体,修改为Hasklug NF,然后点击保存。重启Windows Terminal应用新字体
    • Windows 11和vscode终端美化

2. 安装oh-my-posh

在Windows Terminal里执行下面命令

Set-ExecutionPolicy Bypass -Scope Process -Force; Invoke-Expression ((New-Object System.Net.WebClient).DownloadString('https://ohmyposh.dev/install.ps1'))
复制代码

3. 在终端里应用oh-my-posh并自定义主题

在Windows Terminal里执行下面命令

oh-my-posh init pwsh | Invoke-Expression
复制代码

这时oh-my-posh会设置一个默认的主题(只要看到彩色的字体,应该就是设置成功啦)

如果想要设置其它主题的话,可以在执行

Get-PoshThemes
复制代码

查看所有可设置的主题

Windows 11和vscode终端美化

在执行Get-PoshThemes完命令输出所有主题的样式后,会在最后告诉我们所有主题文件的路径,以及怎么设置主题;

以我本机为例,可以在上图看到

  • 所有主题文件的路径: C:\Users\aifuxi\AppData\Local\Programs\oh-my-posh\themes

  • 设置主题的命令:

    oh-my-posh init pwsh --config C:\Users\aifuxi\AppData\Local\Programs\oh-my-posh\themes/jandedobbeleer.omp.json | Invoke-Expression
    复制代码

    jandedobbeleer.omp.json就是主题的配置文件,jandedobbeleer是主题名。比如我想设置ys这个主题,只需要把上面命令中的jandedobbeleer.omp.json改成ys.omp.json就可以了。

    在Windows Terminal里执行设置主题的命令,只是临时改变主题,要想每次打开都自动设置主题我们就得编辑个配置文件了。

3.1 编辑配置文件

在Windows Terminal里执行下面命令编辑或新建一个配置文件

    notepad $PROFILE
    # 如果在path里安装了vscode也可以用下面命令打开
    code $PROFILE
复制代码

以我自己为例,我想设置主题为1_shell这个主题,那么就可以在刚刚打开的配置文件里加上这句话然后保存并重启Windows Terminal

    oh-my-posh init pwsh --config C:\Users\aifuxi\AppData\Local\Programs\oh-my-posh\themes/1_shell.omp.json | Invoke-Expression
复制代码

注意:这里的C:\Users\aifuxi\AppData\Local\Programs\oh-my-posh\themes/1_shell.omp.json这个路径是我本机的路径,每个人的电脑的配置文件路径都是不一样的,请根据实际情况进行修改,不要盲目复制。这是设置主题为1_shell的效果,还是挺好看的。Windows 11和vscode终端美化

3.2 vscode的设置

修改vscode配置文件settings.json

{   
    // 代码字体,可根据实际情况进行设置
    "editor.fontFamily": "'Hasklug Nerd Font Mono',Menlo, Monaco, 'Courier New', monospace",
    // 终端字体,我这里是设置的Hasklug Nerd Font Mono,可根据实际安装的Nerd Font进行设置
     "terminal.integrated.fontFamily": "Hasklug Nerd Font Mono",
}
复制代码

4. 安装PSReadLine

PSReadLine:github.com/PowerShell/…

PSReadLine模块取代了 PowerShell 版本 3 及更高版本的命令行编辑体验。它提供:

  • 语法着色
  • 简单语法错误通知
  • 良好的多线体验(编辑和历史)
  • 可定制的键绑定
  • Cmd 和 emacs 模式(都没有完全实现,但都可以使用)
  • 许多配置选项
  • Bash 样式完成(在 Cmd 模式下可选,在 Emacs 模式下默认)
  • Bash/zsh 风格的交互式历史搜索 (CTRL-R)
  • Emacs yank/kill ring
  • 基于 PowerShell 令牌的“单词”移动和杀死
  • 撤销重做
  • 自动保存历史记录,包括跨实时会话共享历史记录
  • 通过 Ctrl+Space 完成“菜单”完成(有点像 Intellisense,用箭头选择完成)
  • “开箱即用”的体验意味着 PowerShell 用户非常熟悉 - 不需要学习任何新的击键。

上面是github里的介绍,但其实我们主要用到PSReadLine的功能就是

  • 自动保存历史记录,敲过一个命令后,后面只需要敲前几个字母就能提示出命令,按【→】键就可以自动补全命令
  • 语法着色PSReadLine的作用就和oh-my-zsh里面的那个autocomplete的那个插件差不多,用来提示和补全命令的Windows 11和vscode终端美化比如这里我敲gi,就能显示出以前敲过的git log命令,然后按【→】键就可以补全命令了,对于经常敲命令的人来说还是非常有用的,可以提高开发效率。

4.1 安装PSReadLine

  • 以管理员身份运行Windows Terminal,执行下面命令:
Install-Module PSReadLine -Force
复制代码

没有以管理员身份运行Windows Terminal时会报错Windows 11和vscode终端美化

4.2 添加配置项到配置文件

  • 在Windows Terminal里执行下面命令编辑配置文件
    notepad $PROFILE
    # 如果在path里安装了vscode也可以用下面命令打开
    code $PROFILE
复制代码
  • 添加下面几行配置
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 # 设置向下键为前向搜索历史纪录
复制代码
  • 保存后,关闭Windows Terminal后再重新打开,验证配置是否生效

安装时遇到的问题

  • 为什么不是执行Install-Module -Name PSReadLine -AllowPrerelease来安装PSReadLine?其实开始的时候我是用这条命令来安装的,是根据 @i树 兄弟提供的链接来的, 但是报错了Windows 11和vscode终端美化然后我去看了下github的安装文档找到了原因。
  • Install-Module -Name PSReadLine -AllowPrerelease-AllowPrereleasePowerShellGet这个模块提供的能力,首先得安装PowerShellGet
# 先安装PowerShellGet
Install-Module -Name PowerShellGet -Force
# 然后再这条命令安装PSReadLine
Install-Module PSReadLine -AllowPrerelease -Force
复制代码

5. 隐藏烦人的copyright

每次打开Windows Terminal都会出现烦人的copyright

Windows PowerShell 版权所有(C) Microsoft Corporation。保留所有权利。

安装最新的 PowerShell,了解新功能和改进!aka.ms/PSWindows

Windows 11和vscode终端美化我们可以添加 -nologo参数来隐藏这段文字

5.1 Windows Terminal

打开Windows Terminal设置,Windows PowerShell -> 命令行,在路径后面添加上-nologo

Windows 11和vscode终端美化,然后保存重启Windons Terminal就能看到烦人的copyright提示没啦

Windows 11和vscode终端美化

5.2 vscode

修改vscode配置文件settings.json,加上terminal.integrated.profiles.windows这个字段就好了

{
    "terminal.integrated.profiles.windows": {
    "PowerShell": {
        "source": "PowerShell",
        "args": ["-noLogo"]
    }
  },
}
复制代码

Windows 11和vscode终端美化

Apipost 私有化火热进行中

评论