Trees - ไลบรารีโอเพนซอร์สสำหรับเรนเดอร์ไฟล์ทรี

• ไลบรารีสำหรับวาด โครงสร้างไฟล์/ไดเรกทอรี คล้ายหน้าต่างไฟล์ของ VSCode
• ออกแบบโดยเน้น อิสระในการปรับแต่งสูง พร้อมทั้ง ประสิทธิภาพและความยืดหยุ่น
• มี การทำ virtualization อัตโนมัติ ในตัวเพื่อเรนเดอร์รายการนับหมื่นได้อย่างรวดเร็ว โดยจะ mount เฉพาะแถวที่มองเห็นบนหน้าจอ
• รองรับฟีเจอร์ที่จำเป็นสำหรับ tree UI แบบเครื่องมือนักพัฒนาอย่างครอบคลุม เช่น ป้ายสถานะ Git, drag and drop, การค้นหาและกรองตามชื่อ, เมนู context แบบกำหนดเอง
• รองรับ keyboard navigation, การจัดการโฟกัส และ ARIA จึงมี ความสามารถในการเข้าถึงที่ให้มาพื้นฐาน ตามมาตรฐาน WCAG 2.1
• ควบคุม รูปลักษณ์ภายนอกได้ละเอียด ด้วย CSS variables, ธีม Shiki, การปรับ density เป็นต้น
• สามารถนำไปใช้สร้าง sidebar tree ของ เครื่องมือแก้ไขโค้ด/เครื่องมือโฮสต์โค้ด ได้
• รายละเอียด ฟีเจอร์หลัก
  • flattenEmptyDirectories: รองรับ การทำทรีให้แบนลง โดยรวมสายโซ่โฟลเดอร์ที่มีลูกเพียงตัวเดียวให้อยู่ในแถวเดียว
  • gitStatus: แสดง ป้ายสถานะ Git สำหรับไฟล์ที่เพิ่ม/แก้ไข/ลบ/เปลี่ยนชื่อ/ยังไม่ติดตาม/ถูกละเว้น และแสดงตัวบ่งชี้แบบจุด (dot) อัตโนมัติบนโฟลเดอร์ที่มีรายการย่อยเปลี่ยนแปลง
  • dragAndDrop: ลากย้าย ไฟล์และโฟลเดอร์ไปยังโฟลเดอร์อื่นหรือ root ได้ โดยปลายทางจะขยายอัตโนมัติเมื่อ hover และสามารถบล็อกบางพาธได้ด้วย callback canDrag
  • รองรับการตั้งค่า เมนู context แบบกำหนดเอง สำหรับไฟล์ใหม่, โฟลเดอร์ใหม่, เปลี่ยนชื่อ, ลบ เป็นต้น
  • กรองอย่างรวดเร็วตาม ชื่อและพาธ ผ่านช่องค้นหา พร้อมรองรับ 3 โหมดคือ hide-non-matches, collapse-non-matches, expand-matches
  • มีชุดไอคอนในตัว 3 แบบคือ minimal, standard, complete
  • ปรับความสูงแถวและระยะห่างได้ในครั้งเดียวด้วยตัวเลือก density (compact, default, relaxed)

[saysealing]

ถ้าตั้ง alias ใช้แบบนี้จะสะดวกครับ

alias t='tree -N -C -L 2 -I "node_modules|cache|dist|test_"'
alias tt='tree -N -C -L 3 -I "node_modules|cache|dist|test_"'
alias ttt='tree -N -C -L 4 -I "node_modules|cache|dist|test_"'
alias tttt='tree -N -C -L 5 -I "node_modules|cache|dist|test_"'

[brainer]

tree /

ดูเหมือนจะเป็นโอเพนซอร์สที่ทั้งน่าสนุกและมีประโยชน์นะ