มาTerminal Customize ให้เท่ขึ้น 300% ด้วย Oh My Zsh

Jakapat Boonroj
Nextzy
Published in
3 min readAug 27, 2019

คุณเคยใช้ Terminal แล้วรู้เวียนหัวเวลากลับไปอ่านcommandไหม?
คุณเคยเขียนCommand ยาวแล้วมันผิด เพราะแค่สะกดผิดไหม?
คุณเคยมีความรู้สึกว่าตัวเอง อยากดูเท่ขึ้นแบบ Developer ไหม?

https://github.com/romkatv/powerlevel10k

เราขอแนะนำ Oh My Zsh ที่ทำให้คุณรู้สึก โอ้ว้าวพระเจ้าจอร์จ คุณนี่แหละ The มหาเมพ Developer อย่างที่ Oh My Zsh กล่าวว่า

Oh My Zsh will not make you a 10x developer…but you may feel like one.

คำเตือน

  • รองรับเฉพาะ Unix-like (macOS or Linux) [ใครใช้ Windows ก็ลาก่อย]
  • เคยใช้ Terminal มาประมาณนึง
  • เราขอรับรองการันตีเลยว่าเราไม่รับประกันห่าเหวอะไรทั้งสิ้น

เริ่มเลยดีกว่า

สิ่งที่ต้องลง

  • ลง zsh มาก่อน(v.4.3.9+) หรือก็ลงตามลิ๊งค์นี้ (ติดตั้งเสร็จ แล้วตั้งให้เป็น zsh เป็น default ด้วยนะ)
  • ลง curl หรือ wget มาก่อน (ตัวเดียวก็พอ)
  • ลง git มาก่อน (เพราะเราจะ clone repo มาใช้กัน)

ขอบอกก่อนว่า ผมใช้ Ubuntu 19.04 ลงเลยอาจตกหล่นของ MacOSไปบ้าง(แต่น่าจะเหมือนๆกัน)

เริ่ม ด้วย เปิด Terminalขึ้นมาแล้ว ก๊อปโค้ดไปลงลงตามนี้

เลือก curl หรือ wget อย่างใดอย่างนึง

via curl

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

via wget

curl -Lo install.sh https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh
sh install.sh

ก็รอให้มัน clone มาแล้วติดตั้งบนเครื่องเรา เมื่อเสร็จแล้วก็ขึ้นแบบนี้

ที่นี้เราก็จะเห็นเลยว่า บรรทัดที่เรา ใส่ command มันเปลี่ยนไป

เท่านี้ก็ถือว่า ติดตั้ง Oh My Zsh เสร็จแล้วครับ

เอ้า ง่ายแค่นี้เลยหรอ? ก็ใช่ แต่นี่เรายังไม่เปิดขุมพลังมันเลย เพราะ ขุมพลังจริงๆของ Oh My Zsh คือ Plugins และ Themes ที่มีเป็น 100++ และยังมีทั้งที่เป็นInternal ที่ลงมาให้อยู่แล้ว และ External ที่ต้องลงเอง โดยผมจะแนะนำเฉพาะที่ตัวน่าสนใจละกัน

ก่อน อื่นมาเปิด Internal Plugin ที่เรากันบ่อยๆกันก่อน

sudo nano ~/.zshrc

ก็จะขึ้น โค้ดทั้งหมดที่อยู่ใน ไฟล์ .zshrc ซึ่งก็คือ config ที่เราจะจัดการมันนั่นเอง
ซึ่งจุดที่เราจะสนใจก็คือ ตรง บรรทัด Plugin เมื่อเราจะใช้ Plugin ไหน ก็แค่พิมพ์เพิ่มเข้าไป เช่น

plugins=(git
node
npm
yarn
vscode
)

จริงๆแล้ว Internal Plugin มันโคตรเยอะ เยอะจน… เอ่อ ตามเข้าไปดูในเว็บละกัน

Auto Correction

auto Correction

ตัวนี้จะตรวจสอบโค้ดเราว่าสะกดถูกไหม โดยถ้าผิด มันจะถามเราว่า คำนี้ สะกดแบบนี้หรือเปล่า ถ้าตอบใช่ มันก็จะแก้โค้อัตโนมัติแล้วรันเลย ทำให้เราไม่ต้องไปไล่โค้ดที่ละส่วน

หาบรรทัดโค้ดตามนี้ และ ลบ # ออก ก็ถือว่าเราเปิดใช้ ( ลบ comment )

#ENABLE_CORRECTION=”true”

ctrl+S เพื่อเซฟ แล้วลองปิดเปิด terminalใหม่ดู

Auto Suggestions

Auto Suggestions

Plugin นี้จะแนะนำ command ที่เราจะเขียนต่อไป โดยจะหยิบมาจาก commandที่เราพิมพ์ล่าสุด แล้วเมื่อกด → ก็จะพิพม์ครบตามที่ suggest(อาจจะแนะนำไม่ถูก แต่ทำให้เราใช้โค้ดซ้ำสะดวกขึ้น)

แต่ตัวนี้ External Plugin เราเลยต้องลงมันก่อน

git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

จากนั้นก็เข้า .zshrc แล้ว หาบรรทัด Plugin แล้วเติม zsh-autosuggestions ลงไป

plugins=(git
...
zsh-autosuggestions
)

เซฟแล้วปิดเปิด terminal ใหม่ก็ใช้ได้แล้ว

Syntax Highlighting

Syntax Highlighting

อ่านcommand สีเดียว พอมันเยอะ ก็อยากจะอ้วก แต่เจ้า External Plugin ตัวนี้มันจะ Hightlight ให้ อย่างกะตอนเขียนโค้ดเลยย แถม ถ้าสะกดคำผิดก็จะเปลี่ยนสีแดงแจ้งเราอีก

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting

แล้วก็เข้าไปเพิ่ม plugin ใน .zshrc เหมือนเดิม

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

เซฟปิดเปิดใหม่ ก็เรียบร้อย

เท่านี้เราก็ใช้ Terminal ได้สะดวกขึ้นใช้ง่ายขึ้นกว่าเดิม 300%!!

แต่มันยังไม่สวยเลยอะ!!!

งั้นก็ลงThemeเลยสิ!

เอาเข้าจริง ที่กว่าจะเจออะไรพวกนี้นี่ ของข้างบนนี่ตัวแถมทั้งนั้น จริงๆขอแค่มันส่วน มีแทบลูกศรเฟี้ยวฟ้าวกับเขาบ้างตามลิ๊งนี้

และก็พบว่า Theme ที่ติดมาด้วยมีเยอะมากก มีทั้งสาย Clean Retro Powerline เยอะแยะไปหมด แต่ตัวที่ผมถูกใจจริงคือ agnoster

agnoster

ซึ่งก็เหมือนเดิม เข้าไปแก้ใน .zshrc หาบรรทัด ZSH_THEME แล้วเปลี่ยนเป็น

ZSH_THEME=”agnoster”

แต่ พอกลับไปเปิด Terminal ใน Vscode พังซะงั้น(ตั้ง zsh เป็น default ในนี้ด้วย)

ลูกศร พังงง

เป็นเพราะว่า Vscode หา font ที่เป็นตัวลูกศรไม่เจอ วิธีแก้คือโหลด fontที่ต้องใช้มาลงก่อน

แล้ว เพิ่ม font ใน Vscode ในหน้า Setting

{
...
"terminal.integrated.fontFamily": "PowerlineSymbols,monospace",...
}

เท่านี้Terminal ทั้งเท่ขึ้น ใช้ง่ายขึ้น 300%!

FINNNNNNN

ถ้ายังไม่พอใจลองเข้าไปดูในลิ๊งค์นี้ได้เลย

--

--

Jakapat Boonroj
Nextzy
Writer for

KMITL engineering 55 | ITE19 | Front-end Web Developer