Trees - thư viện mã nguồn mở để render cây tệp

 (trees.software)
8 điểm bởi xguru 5 giờ trước | 2 bình luận | Chia sẻ qua WhatsApp
  • Thư viện dùng để vẽ cấu trúc tệp/thư mục tương tự cửa sổ tệp của VSCode
  • Được thiết kế tập trung vào mức độ tùy biến cao cùng hiệu năng và tính linh hoạt
  • Tích hợp ảo hóa tự động để render nhanh ngay cả với hàng chục nghìn mục, chỉ mount và xử lý các hàng đang hiển thị trên màn hình
  • Hỗ trợ rộng rãi các tính năng cần cho UI cây kiểu công cụ phát triển như huy hiệu trạng thái Git, kéo và thả, tìm kiếm/lọc theo tên, menu ngữ cảnh tùy chỉnh
  • Hỗ trợ điều hướng bằng bàn phím, quản lý focus, ARIA... nên mặc định có khả năng truy cập theo tiêu chuẩn WCAG 2.1
  • Có thể điều khiển giao diện chi tiết bằng biến CSS, theme Shiki, điều chỉnh mật độ hiển thị...
  • Có thể dùng để triển khai cây sidebar cho trình soạn thảo/công cụ lưu trữ mã nguồn
  • Chi tiết các tính năng chính
    • flattenEmptyDirectories: hỗ trợ làm phẳng cây, gộp chuỗi thư mục chỉ có một thư mục con thành một hàng
    • gitStatus: hiển thị huy hiệu trạng thái Git cho tệp được thêm, sửa, xóa, đổi tên, chưa theo dõi hoặc bị bỏ qua; với thư mục có mục con đã thay đổi sẽ tự động hiện chỉ báo chấm (dot)
    • dragAndDrop: kéo để di chuyển tệp/thư mục sang thư mục khác hoặc thư mục gốc, đích thả sẽ tự động mở rộng khi hover, có thể chặn một số đường dẫn bằng callback canDrag
    • Hỗ trợ cấu hình menu ngữ cảnh tùy chỉnh cho tạo tệp mới, thư mục mới, đổi tên, xóa...
    • Qua ô tìm kiếm có thể lọc nhanh theo tên hoặc đường dẫn, hỗ trợ ba chế độ hide-non-matches, collapse-non-matches, expand-matches
    • Cung cấp sẵn ba bộ icon: minimal, standard, complete
    • Tùy chọn density (compact, default, relaxed) giúp điều chỉnh chiều cao hàng và khoảng cách cùng lúc

Bài viết liên quan

2 bình luận

 
saysealing 2 giờ trước

Dùng alias như thế này sẽ tiện hơn.

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 4 giờ trước

tree /

Có vẻ là một mã nguồn mở vừa thú vị vừa hữu ích.