ปกติ File Explorer (sidebar) ของ VSCode จะแสดง tree view ประมาณรูปข้างล่างนี้ (ขึ้นอยู่กับ theme ที่ใช้ด้วย ผมใช้ Material Theme Darker High Contrast)
![default tree view ของ vscode](/images/vscode-indent-settings/default.png)
เวลามีไฟล์เยอะๆ หรือโปรเจ็คที่เป็น CMS หรือ Framework ที่มีโฟลเดอร์ซ้อนกันเยอะๆ อาจจะดูยากไปนิด เราสามารถทำให้มันดูง่ายกว่าเดิม ด้วยการเพิ่มระยะ indent ของ tree view
- เปิด Settings ด้วย Cmd/Ctrl + ,
- Search หาคำว่า
tree indent
จะเจอ optionWorkbench › Tree: Indent
อยู่ - ค่า default เป็น
8
(px) ลองปรับเพิ่มขึ้นดูตามชอบ
![เปิด settings หาคำว่า tree indent](/images/vscode-indent-settings/tree-indent.png)
ผมชอบที่ 20
pixel ดูกว้างไปหน่อยแต่ก็เห็นชัดดี
![หลังจากปรับ indent เป็น 20 แล้ว ดูง่ายสบายตา](/images/vscode-indent-settings/indent-adjusted.png)
จริงๆ เราสามารถเปิด Indent Guide ร่วมด้วยได้ ก็จะเห็นเส้นโยงแต่ละ folder level ได้ด้วย ก็จะเห็นชัดกว่าเดิม (แต่ปกติผมจะปิดเส้นนี้ไว้เพราะมันดูรกหูรกตา )
![indent 20 พร้อมกับเปิด indent guide](/images/vscode-indent-settings/indent-guide-on.png)
แกล้งเพื่อน
เราสามารถแกล้งเพื่อนที่ใช้ VSCode ได้ด้วยการย่องที่คอมฯ ของเพื่อน แล้วเข้าไปแอบเปลี่ยน indent size เป็น 0
แล้วทุกไฟล์/โฟลเดอร์ก็จะดูเหมือนอยู่ level เดียวกันหมด
![ปรับ indent เป็น 0](/images/vscode-indent-settings/zero-indent.png)
ไม่รับประกันว่าเพื่อนจะฮาด้วยรึเปล่านะ 🤞🏼
Related posts
![Setting up Vim](/images/setting-up-vim/9676557587_90c9c8c01e_c.jpg)
Setting up Vim
![My VSCode setup for 2023](/images/vscode-setup-2023/vscode-window.png)
My VSCode setup for 2023
![ใช้งาน Atom](/images/atom/atom-editor.png)
ใช้งาน Atom