17370845950

前言

随着

npm

的发展，我们在项目开发中离不开「终端」。然而，作为一名注重美观的前端开发者，你可能对系统自带的终端界面感到不满。以下是「Windows」和「MacOS」自带终端的界面。

是否有办法美化它们或者使用替代的第三方终端工具呢？答案是肯定的。我推荐两款终端工具，分别适用于「Windows」和「MacOS」。

Windows：Cmder MacOS：iTerm 根据你的操作系统选择合适的终端工具，并从官方网站下载并安装软件。安装完成后，才是正式的开始。

Cmder配置 打开

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」那么炫酷。

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」。

下载「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主题，深受用户喜爱。

结语 「❤️关注+点赞+收藏+评论+转发❤️」，原创不易，鼓励作者创作更多优质内容。

「关注公众号

IQ前端

，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔」