作者：JowayYoung
倉庫：Github、CodePen
博客：官網、掘金、思否、知乎
公眾號：IQ前端
特別聲明：原創不易，未經授權不得轉載或抄襲，如需轉載可聯繫筆者授權

系列

• Cmder&iTerm美化你的終端 請戳這裏，持續更新

前言

在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
• 下載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開發技巧的前端公眾號，更多前端小乾貨等着你喔

• 關注後回覆資料免費領取學習資料
• 關注後回覆進羣拉你進技術交流羣
• 歡迎關注IQ前端，更多CSS/JS開發技巧只在公眾號推送