CmderiTerm美化你的终端

jiezi

5 年前

在 npm 的日益壮大下，开发项目时我们无法离开终端，但是如果你作为一名具备美感的前端，可能会吐槽为什么系统自带的终端会那么丑。下面贴上Windows 和MacOS自带的终端界面。

有没有办法对它进行美化或者使用第三方终端工具代替它呢。答案是肯定的，在此我推荐两款终端工具，分别代替 Windows 和MacOS下的终端。

Windows：Cmder
MacOS：iTerm

根据系统选择以上的终端工具，自行在官网上下载并安装软件，安装完成才是正式的开始。

打开Cmder
进入 右下角菜单图标 > Settings
- 设置General > Interface Language，选择语言
- 设置General > Choose Color Scheme，选择颜色方案(小编选的是Xterm)
- 设置 General > Fonts > Main Console Font，调整 字体 和大小
- 设置Features > Transparency > Active Window Transparency，调整活动窗口透明度
- 设置Features > Transparency > Use Separate Transparency Value For Inactive Window，调整非活动窗口透明度
配置完成后显示效果如下：半透明的 Xterm 主题，不过没有 iTerm 炫酷

打开 MacOS 自带的终端
输入 vim 命令：vim ~/.bash_profile

插入配置信息

# 启用终端导出着色
export CLICOLOR=1
# 设置终端导出颜色方案
export LSCOLORS=gxfxcxdxbxegedabagacad
# 设置提示颜色
export PS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;36m\]\w\[\033[00m\]\$'
# 启用 iTerm 着色
export TERM=xterm-color

按 esc 退出 vim 编辑模式
输入 vim 命令：:wq
重启iTerm
下载 iTerm 色彩方案 iTerm2-Color-Schemes 并解压
进入Preference > Profiles
- 设置Terminal > Report Terminal Type，选择xterm-new
- 设置 Colors > Color Presets > Import，导入iTerm2-Color-Schemes 的schemes 文件夹，选择自己喜欢的颜色方案(小编选的是Galaxy)
- 设置 Text > Font，调整 字体 、 规格 、 大小 、 行高 和行距
- 设置Window > Transparency，调整窗口透明度
- 设置Session > Status bar enabled > Configure Status Bar，拖拽需要显示的状态
配置完成后显示效果如下：各种状态显示和半透明的 Galaxy 主题，妹纸们都说很酷很好看(这个是重点)

写到最后总结得差不多了，后续如果我想起还有哪些 终端美化 遗漏的，会继续在这篇文章上补全，同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的 点个赞 或收个藏，保证你在开发时用得上。

《灵活运用》系列

灵活运用 JS 开发技巧强烈推荐收藏????

《随笔》系列

详细判断浏览器运行环境强烈推荐收藏????
H5 与 App 的通讯方式强烈推荐收藏????
1.5 万字概括 ES6 全部特性强烈推荐收藏????

关注公众号Uzero，更多前端小干货等着你喔！我是JowayYoung，喜欢分享前端技术和生活纪事，学习与生活不落下，每天进步一点点，与大家相伴成长

CmderiTerm美化你的终端

前言

Cmder 配置

iTerm 配置

结语

专栏文章