返回首页

Arch Linux 桌面环境配置：VS Code + Kitty + KDE 全套美化

2026-07-03 Linux 1160 字 · 约 4 分钟
VS CodeKittyKDE美化开发环境Arch Linux

上一篇记录了 Arch Linux 的安装过程，这篇来详细说说桌面环境的配置。我的配置理念是：好看但不花哨，高效但不复杂。

整体风格

  • 主题: Catppuccin Mocha（深色主题，护眼）
  • 字体: Maple Mono NF（等宽 + Nerd Font 图标）
  • 终端: Kitty（快速、可定制）
  • 编辑器: VS Code (Code OSS)
  • 桌面: KDE Plasma 6.7.2
  • 状态栏: Waybar（模块化、可定制）
  • Dock: Latte Dock NG（macOS 风格 Dock）

1. Kitty 终端配置

Kitty 是我最喜欢的终端，速度快、配置简单、功能强大。

配置文件位置

~/.config/kitty/kitty.conf

完整配置

# ===== Font =====
font_family      Maple Mono NF
bold_font        auto
italic_font      auto
bold_italic_font auto
font_size        13.0
font_features    Maple Mono NF +calt +liga +ss02 +zero
adjust_line_height 110%
disable_ligatures never

# ===== Cursor =====
cursor_shape          beam
cursor_beam_thickness 1.5
cursor_blink_interval 0.5
cursor_stop_blinking_after 15.0

# ===== Scrollback =====
scrollback_lines 10000
scrollback_pager_history_size 50

# ===== Mouse =====
copy_on_select        yes
mouse_hide_wait       3.0
url_style             curly
open_url_with         default

# ===== Performance =====
repaint_delay    6
input_delay      1
sync_to_monitor  yes

# ===== Bell =====
enable_audio_bell no
visual_bell_duration 0.1

# ===== Window =====
window_padding_width 10
window_padding_height 10
hide_window_decorations no
confirm_os_window_close 0
initial_window_width 120c
initial_window_height 36c
remember_window_size  yes
placement_strategy center

# ===== Tab Bar =====
tab_bar_edge bottom
tab_bar_style powerline
tab_powerline_style slanted
tab_bar_min_tabs 1
tab_title_template "{fmt.fg.red}{bell_symbol}{activity_symbol}{fmt.fg.tab} {title}"

# ===== Advanced =====
allow_hyperlinks yes
shell_integration enabled
term xterm-kitty

# ===== Catppuccin Mocha =====
foreground            #CDD6F4
background            #1E1E2E
selection_foreground  #1E1E2E
selection_background  #F5E0DC
cursor                #F5E0DC
cursor_text_color     #1E1E2E
url_color             #F5E0DC

active_tab_foreground   #11111B
active_tab_background   #CBA6F7
inactive_tab_foreground #CDD6F4
inactive_tab_background #181825

mark1_foreground #1E1E2E
mark1_background #B4Befe
mark2_foreground #1E1E2E
mark2_background #CBA6F7
mark3_foreground #1E1E2E
mark3_background #74C7EC

color0  #45475A
color1  #F38BA8
color2  #A6E3A1
color3  #F9E2AF
color4  #89B4FA
color5  #F5C2E7
color6  #94E2D5
color7  #BAC2DE
color8  #585B70
color9  #F38BA8
color10 #A6E3A1
color11 #F9E2AF
color12 #89B4FA
color13 #F5C2E7
color14 #94E2D5
color15 #A6ADC8

# 背景透明度
background_opacity 0.95
# 隐藏默认的窗口装饰 (标题栏等)
hide_window_decorations yes
# 窗口边框宽度
window_border_width 2.0pt

window_padding_width 4
# 激活状态下的窗口边框颜色
active_border_color #00e5ff
# 未激活状态下的窗口边框颜色
inactive_border_color #003333

# ===== Keybindings =====
map ctrl+shift+c copy_to_clipboard
map ctrl+shift+v paste_from_clipboard
map ctrl+shift+t new_tab
map ctrl+shift+w close_tab
map ctrl+shift+right next_tab
map ctrl+shift+left  previous_tab
map ctrl+shift+equal change_font_size all +1.0
map ctrl+shift+minus change_font_size all -1.0
map ctrl+shift+0     change_font_size all 0

配置要点

  1. 字体: Maple Mono NF 是一个非常好看的等宽字体，自带 Nerd Font 图标
  2. 连字: 启用 +calt +liga +ss02 +zero，让 => -> != 等符号显示为连字
  3. 透明度: 95% 不透明度，略微透明增加层次感
  4. 边框: 激活窗口青色边框，未激活深色边框，方便区分
  5. Tab 栏: 使用 powerline 风格的 slanted 样式

2. VS Code (Code OSS) 配置

安装

# 从 AUR 安装
yay -S visual-studio-code-bin

配置文件位置

~/.config/Code - OSS/User/settings.json

完整配置

{
    "apc.imports": [
        "file:///home/cola/.vscode-oss/extensions/brandonkirbyson.vscode-animations-2.0.1-universal/dist/updateHandler.js"
    ],
    "terminal.integrated.profiles.linux": {
        "bash": {
            "path": "bash",
            "icon": "terminal-bash"
        },
        "zsh": {
            "path": "/usr/bin/zsh"
        },
        "fish": {
            "path": "fish"
        },
        "tmux": {
            "path": "tmux",
            "icon": "terminal-tmux"
        },
        "pwsh": {
            "path": "pwsh",
            "icon": "terminal-powershell"
        }
    },
    "terminal.integrated.defaultProfile.linux": "zsh",
    "terminal.integrated.initialHint": false
}

已安装扩展

扩展 说明
anthropic.claude-code AI 编程助手
brandonkirbyson.vscode-animations 编辑器动画效果
catppuccin.catppuccin-vsc Catppuccin 主题
catppuccin.catppuccin-vsc-icons Catppuccin 文件图标
dbaeumer.vscode-eslint ESLint 支持
dracula-theme.theme-dracula Dracula 主题
drcika.apc-extension 自定义 UI 样式
esbenp.prettier-vscode Prettier 格式化
k--kato.intellij-idea-keybindings IntelliJ 快捷键
oderwat.indent-rainbow 缩进彩虹线
pkief.material-icon-theme Material 图标
shalldie.background 背景图片
usernamehw.errorlens 错误内联显示
vue.volar Vue 3 支持
zhuangtongfa.material-theme Material Theme
zobo.php-intellisense PHP 智能提示

推荐扩展安装命令

code --install-extension catppuccin.catppuccin-vsc
code --install-extension catppuccin.catppuccin-vsc-icons
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension oderwat.indent-rainbow
code --install-extension usernamehw.errorlens
code --install-extension pkief.material-icon-theme
code --install-extension vue.volar

3. KDE Plasma 配置

基本信息

  • 版本: KDE Plasma 6.7.2
  • 窗口管理器: KWin 6.7.2
  • 显示管理器: SDDM

主题配置

KDE 的主题可以通过系统设置 > 外观 来配置：

  1. 全局主题: Catppuccin Mocha
  2. 应用程序风格: Breeze (或 Kvantum)
  3. 窗口装饰: Breeze
  4. 图标: Papirus (或 Breeze)
  5. 光标: Breeze

窗口行为

在系统设置 > 窗口管理 > 窗口行为中：

  • 焦点跟随鼠标: 否（点击聚焦）
  • 延迟聚焦: 0ms
  • 自动提升: 否
  • 滚动焦点窗口: 是

快捷键

系统设置 > 快捷键中推荐配置：

快捷键 功能
Meta + Enter 打开终端 (kitty)
Meta + E 打开文件管理器
Meta + D 显示桌面
Meta + Tab 切换窗口
Ctrl + Alt + T 打开终端
Print Screen 截图 (Spectacle)

虚拟桌面

系统设置 > 窗口管理 > 虚拟桌面：

  • 行数: 1
  • 列数: 4
  • 桌面名称: 开发、浏览器、通讯、其他

任务栏

推荐的任务栏组件：

  1. 应用启动器 (开始菜单)
  2. 仅显示当前桌面窗口
  3. 系统托盘
  4. 时钟
  5. 用户切换器

4. Waybar 状态栏配置

Waybar 是一个高度可定制的状态栏，我用它来显示系统信息和快速访问功能。

安装

yay -S waybar

配置文件位置

~/.config/waybar/config.jsonc

双显示器配置

我有两块显示器，所以配置了两个 Waybar 实例：

主屏 (HDMI-A-1)

[
    {
        "output": "HDMI-A-1",
        "layer": "top",
        "position": "top",
        "height": 36,
        "margin-top": 8,
        "margin-left": 12,
        "margin-right": 12,
        "spacing": 10,

        "modules-left": ["custom/arch", "cpu", "memory", "network","custom/gpu"],
        "modules-center": ["clock"],
        "modules-right": ["tray"],

        "custom/arch": {
            "format": " ",
            "tooltip": false,
            "on-click": "krunner"
        },
        "cpu": {
            "interval": 2,
            "format": " {usage}%",
            "tooltip": false
        },
        "memory": {
            "interval": 2,
            "format": " {percentage}%",
            "tooltip": false
        },
        "network": {
            "interval": 2,
            "format-wifi": " {bandwidthDownBytes} ↓ | {bandwidthUpBytes} ↑",
            "format-ethernet": "󰈀 {bandwidthDownBytes} ↓ | {bandwidthUpBytes} ↑",
            "format-disconnected": "⚠ Disconnected",
            "tooltip-format": "{ifname} via {gwaddr}",
            "format-alt": "󰈀 {ipaddr}/{cidr}"
        },
        "clock": {
            "format": "{:%H:%M}",
            "tooltip-format": "<tt><small>{calendar}</small></tt>"
        },
        "tray": {
            "icon-size": 18,
            "spacing": 12
        },
        "custom/gpu": {
            "exec": "nvidia-smi --query-gpu=utilization.gpu --format=csv,noheader,nounits",
            "format": "󰢮 {}%",
            "interval": 2,
            "tooltip": false,
            "on-click": "plasma-systemmonitor"
        }
    }
]

副屏 (DP-1)

    {
        "output": "DP-1",
        "layer": "top",
        "position": "top",
        "height": 36,
        "margin-top": 8,
        "margin-left": 12,
        "margin-right": 12,
        "spacing": 10,

        "modules-left": ["custom/arch", "mpris"],
        "modules-center": ["clock"],
        "modules-right": ["disk", "temperature","custom/weather"],

        "custom/arch": {
            "format": " ",
            "tooltip": false,
            "on-click": "krunner"
        },
        "mpris": {
            "format": " {artist} - {title}",
            "max-length": 40
        },
        "disk": {
            "interval": 30,
            "format": " {free}",
            "path": "/"
        },
        "temperature": {
            "hwmon-path-guess": true,
            "format": " {temperatureC}°C"
        },
        "clock": {
            "format": "{:%Y年%m月%d日 %H:%M}",
            "tooltip": false
        },
        "custom/weather": {
            "format": "{}",
            "interval": 900,    // 15分钟刷新一次
            "exec": "~/.config/waybar/scripts/weather.sh",
            "return-type": "json",
            "tooltip": true
        }
    }
]

样式配置

~/.config/waybar/style.css

/* 全局字体：Maple Mono NF */
* {
    font-family: "Maple Mono NF", "Noto Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 0;
    min-height: 0;
}

/* 整体背景透明，实现悬浮效果 */
window#waybar {
    background-color: transparent;
}

/* 灵动岛模块化圆角背景 (Catppuccin Mocha) */
.modules-left, .modules-center, .modules-right {
    background-color: rgba(30, 30, 46, 0.65);
    border-radius: 18px;
    padding: 2px 16px;
    border: 2px solid rgba(49, 50, 68, 0.5);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 各模块 Catppuccin 配色 */
#custom-arch {
    color: #89b4fa; /* 蓝色 Arch Logo */
    font-size: 18px;
    margin-right: 12px;
}

#cpu {
    color: #c6a0f6; /* Mauve 淡紫色 */
    margin-right: 12px;
}

#memory {
    color: #a6e3a1; /* 绿色 */
    margin-right: 12px;
}

#network {
    color: #f38ba8; /* 红色 */
}

#clock {
    color: #cdd6f4; /* 主文本色 */
}

#tray {
    margin-left: 8px;
}

/* 副屏模块 */
#mpris {
    color: #f9e2af; /* 黄色 音乐播放器 */
    margin-right: 12px;
}

#disk {
    color: #fab387; /* 蜜桃橙 硬盘容量 */
    margin-right: 12px;
}

#temperature {
    color: #eba0ac; /* 玫瑰红 温度监控 */
}

#custom-gpu {
    color: #94e2d5; /* Teal 青绿色 GPU 监控 */
    margin-right: 12px;
}

#custom-weather {
    padding: 0 10px;
    margin: 0 4px;
    color: #89b4fa; /* 蓝色 天气信息 */
}

配置要点

  1. 双显示器: 主屏显示 CPU/内存/网络/GPU，副屏显示音乐/磁盘/温度/天气
  2. 灵动岛风格: 模块化圆角背景，65% 透明度
  3. Catppuccin 配色: 每个模块使用不同的 Catppuccin 颜色
  4. GPU 监控: 使用 nvidia-smi 实时显示 GPU 使用率
  5. 悬浮效果: 整体背景透明，模块悬浮在桌面上

5. Shell 配置 (zsh)

配置文件位置

~/.zshrc

完整配置

# Starship prompt handles everything
POWERLEVEL9K_DISABLE_CONFIGURATION_WIZARD=true

export ZSH="$HOME/.oh-my-zsh"

# Theme disabled — starship prompt handles it
ZSH_THEME=""

plugins=(
    git
    sudo
    zsh-autosuggestions
    zsh-syntax-highlighting
    docker
    docker-compose
    archlinux
    command-not-found
    colored-man-pages
    extract
    web-search
    copypath
    copyfile
    aliases
    bgnotify
)

source $ZSH/oh-my-zsh.sh

# ===== LS_COLORS =====
if command -v vivid &>/dev/null; then
    export LS_COLORS="$(vivid generate catppuccin-mocha)"
elif [ -f ~/.config/LS_COLORS ]; then
    export LS_COLORS="$(cat ~/.config/LS_COLORS)"
fi

# ===== Modern Aliases =====
# ls → eza
alias ls='eza --icons --group-directories-first'
alias ll='eza -alh --icons --group-directories-first --git'
alias la='eza -a --icons --group-directories-first'
alias lt='eza -T --icons --level=2'
alias l.='eza -a --icons | grep "^\."'

# cat → bat
alias cat='bat --style=plain --paging=never'
alias catn='bat --style=plain'
alias catl='bat --list-themes'

# grep → ripgrep (if installed)
alias grep='grep --color=auto'
type rg &>/dev/null && alias grep='rg'

# Kitty terminal
alias icat='kitty +kitten icat'

# Navigation
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'
alias -- -='cd -'

# Git
alias gs='git status -sb'
alias ga='git add'
alias gc='git commit -m'
alias gp='git push'
alias gl='git log --oneline --graph --decorate -20'
alias gd='git diff'
alias gds='git diff --staged'

# System
alias cls='clear'
alias update='yay -Syu --noconfirm'
alias please='sudo $(fc -ln -1)'
alias df='df -h'
alias du='du -h'
alias free='free -h'
alias ports='ss -tulanp'
alias myip='curl -s ifconfig.me && echo'

# Quick edit
alias zshrc='$EDITOR ~/.zshrc'
alias reload='source ~/.zshrc && echo "  .zshrc reloaded!"'

# ===== Environment =====
export EDITOR='vim'
export VISUAL='vim'
export BAT_THEME='Catppuccin Mocha'
export MANPAGER="sh -c 'col -bx | bat -l man -p --style=plain'"

# History
HISTSIZE=50000
SAVEHIST=50000
HISTFILE=~/.zsh_history
setopt HIST_IGNORE_DUPS
setopt HIST_IGNORE_SPACE
setopt SHARE_HISTORY
setopt APPEND_HISTORY
setopt HIST_REDUCE_BLANKS
setopt AUTO_CD
setopt CORRECT
setopt COMPLETE_IN_WORD

# Completion styling
zstyle ':completion:*' matcher-list 'm:{a-zA-Z}={A-Za-z}'
zstyle ':completion:*' menu select
zstyle ':completion:*:descriptions' format '%F{cyan}── %d ──%f'
zstyle ':completion:*:warnings' format '%F{red}No matches%f'
zstyle ':completion:*' list-colors ${(s.:.)LS_COLORS}

# Welcome message
function welcome() {
    echo ""
    ~/.local/bin/fastfetch --config ~/.config/fastfetch/config.jsonc 2>/dev/null || fastfetch 2>/dev/null
    echo ""
}
welcome

# Starship prompt
if command -v ~/.local/bin/starship &>/dev/null; then
    eval "$(~/.local/bin/starship init zsh)"
elif command -v starship &>/dev/null; then
    eval "$(starship init zsh)"
fi

# NVM
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

# PATH
export PATH="$HOME/.local/bin:$HOME/.cargo/bin:$PATH"
export PATH=~/.npm-global/bin:$PATH

# Notify on long-running commands
zstyle ':notify:*' command-complete-timeout 10
zstyle ':notify:*' error-title "Command failed"
zstyle ':notify:*' success-title "Command finished"

配置要点

  1. Oh My Zsh: 插件框架，提供丰富的插件支持
  2. Starship: 跨 shell 的 prompt，显示 git 状态、语言版本等
  3. 现代命令替换: eza 替代 ls，bat 替代 cat，ripgrep 替代 grep
  4. Catppuccin 配色: 使用 vivid 生成 LS_COLORS
  5. 丰富的别名: git、导航、系统管理等常用命令简化

6. 推荐安装的工具

# 现代命令行工具
yay -S eza bat ripgrep fd vivid

# 系统信息
yay -S fastfetch

# 字体
yay -S maplemono-nf-git noto-fonts-cjk

# 输入法
yay -S fcitx5-im fcitx5-rime fcitx5-chinese-addons

# 浏览器
yay -S firefox

# 其他
yay -S visual-studio-code-bin

7. 最终效果

配置完成后，我的工作环境：

  • 终端: Kitty + zsh + starship，快速且信息丰富
  • 编辑器: VS Code + Catppuccin 主题，代码高亮美观
  • 桌面: KDE Plasma + Catppuccin 全局主题，统一风格
  • 状态栏: Waybar 双显示器配置，灵动岛风格
  • Dock: Latte Dock NG，macOS 风格 Dock
  • 字体: Maple Mono NF，等宽 + 图标，开发必备

整个环境保持了一致的 Catppuccin Mocha 配色，从终端到编辑器到桌面，视觉上非常统一。

总结

这套配置的特点：

  1. 统一性: 所有工具都使用 Catppuccin Mocha 配色
  2. 高效性: 现代命令行工具 + 丰富的别名
  3. 可维护性: 配置文件都有注释，方便后续修改
  4. 美观性: 好看但不花哨，专注于工作
  5. 双显示器: Waybar 支持多显示器配置，每个屏幕显示不同信息
  6. 现代化: 使用 Waybar、Latte Dock NG 等现代工具

如果你也想打造类似的环境，可以参考这篇笔记，根据自己的需求调整。配置文件都在 GitHub 上，可以 fork 后修改。

有啥问题欢迎留言交流！

相关文章