阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

您的普通 bash 可能具有您通常需要的功能,但如果您是常規終端用戶,zsh 將改變您鍵入命令的方式。

zsh、ohmyzsh 和 hyper 一起提供的功能將讓您大吃一驚。

您知道您可以從終端控制 Spotify 嗎?是的,超級插件可以讓您做到這一點。

對於初學者來說,設定這些東西可能會讓人不知所措,所以這裡有一個非常簡單的入門指南! 🤩


🔥 簡介

如果您使用的是如下所示的常規終端,則您會錯過 OhMyZsh 提供的許多功能。

Flaviocope 的 MacOS 終端

今天,您將進行終端改造,使其看起來像這樣...

我的超級終端

不僅僅是外觀,OhMyZsh 還具有豐富的功能來點亮您的程式設計之旅。

在教程結束時,這就是您可以在終端機中執行的操作...

  • NPM、Git 自動完成

  • 在終端機中輸入時自動建議

  • 語法高亮顯示指令是否已定義

  • 使用遊標編輯終端命令

  • 查看目前目錄的git branchgit status

  • 開啟與目前分頁相同目錄的新分頁

  • 使用 OhMyZsh 功能,例如不使用cd進行導航、使用ll 、更簡單的基於 Tab 鍵單擊的導航等等!


❤️ 開始吧

首先,您必須安裝zsh 。在某些情況下(取決於您正在執行的作業系統),它可能已經安裝。因此,請透過在終端機中執行zsh --version檢查它是否已安裝。

zsh在不同作業系統的安裝過程有所不同。查看Zsh 安裝指南來安裝 zsh。

安裝 Zsh 後,請確保將其設為預設 shell。為此,請在終端機中執行以下命令。

$ sudo chsh -s $(which zsh)

登出並登入回預設 shell。執行echo $SHELL並預期輸出/bin/zsh或類似內容。


🔰 安裝 OhMyZsh

請注意,zsh 和 OhMyZsh 是不同的。

透過在終端機中執行以下命令來安裝OhMyZsh

$ sudo sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

當您安裝 OhMyZsh 時,它會附帶許多插件來幫助您!

若要新增實用的插件,請在 TextEdit/Notepad/Vim/VSCode 中開啟~/.zshrc

在檔案中看到的插件清單中,只需新增一個名為npm的插件,如下所示 👇

plugins=(
  git
  bundler
  dotenv
  osx
  rake
  rbenv
  ruby
  npm # you added this
)

瞧!您已經完成了 OhMyZsh!若要查看更改,請在終端機中執行source ~/.zshrc ,現在您就擁有了 OhMyZsh shell 的功能。


🔰 依時間安裝 HyperTerm

Zeit(now.sh 和 Next.js 的建立者)為我們建立了一個很棒的終端應用程式,它是用 Electron 建置的。

這裡下載 Hyper。


⚛️ 使用 OhMyZsh 設定 Hyper

打開超級終端機。您不會看到 OhMyZsh 在那裡執行。因此,請轉到超級設定。在 OSX 上,它是Hyper > Preferences

這將在您最喜歡的編輯器中開啟一個.hyper.js檔案。該文件包含您的終端的所有設置,非常容易控制!

若要在 Hyper 中啟用 OhMyZsh 作為預設 shell,請在.hyper.js中進行此變更 👇

- shell: '/bin/bash'
+ shell: '/bin/zsh'

這將使 OhMyZsh 成為您的預設超級終端 shell!


🤩 輸入指令時自動完成

Git 將zsh-autocomplete插件複製到 OhMyZsh 插件資料夾中。

$ sudo git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

完成後,將外掛程式新增至~/.zshrc檔案的外掛程式清單中。

plugins=(
  ...
  zsh-autosuggestions
)

🎉 Zsh 語法高亮

Git 將zsh-syntax-highlighting外掛程式克隆到 OhMyZsh 外掛程式資料夾中。

$ sudo git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

並再次將其新增至.zshrc檔案的外掛程式清單。

plugins=(
  ... 
  zsh-syntax-highlighting
)

注意:若要反映您所做的每項更改,請在終端機中執行source ~/.zshrc


📯 啟用 Hyper 相關功能與主題

透過切換超級終端的設定來開啟.hyper.js

請查看plugins: [...]部分並將這些插件名稱貼到此處。

plugins: [
  ...
  'hypercwd',
  'hyper-statusline',
  'hyper-alt-click',
  'hyperterm-safepaste',
  'hyper-search',
  'hypergoogle',
  'hyperborder',
  'hyper-tab-icons',
  'hyper-hide-title',
  'shades-of-purple-hyper'
],

儲存文件,Hyper 會自動為您安裝這些外掛程式和主題。要反映更改,只需關閉並再次啟動超級終端即可。

萬歲!現在,您的終端機中已擁有本 DEV.to 文章開頭列出的所有功能。


獎勵:在 VSCode 中為整合終端設定相同的終端配置

在 VSCode 設定中,新增以下 JSON 鍵值對,然後就可以開始了!

{
  ...
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontSize": 16
}

就是這樣,夥計們!


🔥 資源


🏆 關於我

我是 Kumar Abhirup,一位來自印度的 16 歲 JavaScript React 開發人員,每天都在學習新事物。

在 Twitter 上與我聯絡 🐦

我的個人網站和作品集🖥️

請在下面評論您更好的方法以及改進本文的建議。 :)


原文出處:https://dev.to/kumareth/a-beginner-s-guide-for-setting-up-autocomplete-on-ohmyzsh-hyper-with-plugins-themes-47f2


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈