VSCode: Tree Indent Settings

Armno's avatar image
Published on October 29th, 2019
By Armno P.

ปกติ File Explorer (sidebar) ของ VSCode จะแสดง tree view ประมาณรูปข้างล่างนี้ (ขึ้นอยู่กับ theme ที่ใช้ด้วย ผมใช้ Material Theme Darker High Contrast)

default tree view ของ vscode
Default Tree View ของ VSCode

เวลามีไฟล์เยอะๆ หรือโปรเจ็คที่เป็น CMS หรือ Framework ที่มีโฟลเดอร์ซ้อนกันเยอะๆ อาจจะดูยากไปนิด เราสามารถทำให้มันดูง่ายกว่าเดิม ด้วยการเพิ่มระยะ indent ของ tree view

  1. เปิด Settings ด้วย Cmd/Ctrl + ,
  2. Search หาคำว่า tree indent จะเจอ option Workbench › Tree: Indent อยู่
  3. ค่า default เป็น 8 (px) ลองปรับเพิ่มขึ้นดูตามชอบ
เปิด settings หาคำว่า tree indent
เปิด Settings ของ VSCode แล้วหาคำว่า tree indent

ผมชอบที่ 20 pixel ดูกว้างไปหน่อยแต่ก็เห็นชัดดี

หลังจากปรับ indent เป็น 20 แล้ว ดูง่ายสบายตา
Tree View หลังจากปรับ indent เป็น 20 แล้ว ดูง่ายสบายตา

จริงๆ เราสามารถเปิด Indent Guide ร่วมด้วยได้ ก็จะเห็นเส้นโยงแต่ละ folder level ได้ด้วย ก็จะเห็นชัดกว่าเดิม (แต่ปกติผมจะปิดเส้นนี้ไว้เพราะมันดูรกหูรกตา )

indent 20 พร้อมกับเปิด indent guide
Indent 20 พร้อมกับเปิด indent guide

แกล้งเพื่อน

เราสามารถแกล้งเพื่อนที่ใช้ VSCode ได้ด้วยการย่องที่คอมฯ ของเพื่อน แล้วเข้าไปแอบเปลี่ยน indent size เป็น 0

แล้วทุกไฟล์/โฟลเดอร์ก็จะดูเหมือนอยู่ level เดียวกันหมด

ปรับ indent เป็น 0
ปรับ indent เป็น 0 เพื่อแกล้งเพื่อน

ไม่รับประกันว่าเพื่อนจะฮาด้วยรึเปล่านะ 🤞🏼

Related posts