ก่อนจะเริ่มสร้าง Folder Structure กัน จำเป็นที่จะต้องติดตั้งโปรแกรม tree ซะก่อน ซึ่งผมจะยกตัวอย่างมาแค่ Linux ที่เป็นตระกูล Debian กับ macOS ใครใช้ Package Manager อื่นๆ ก็สามารถทำเองได้เลย แค่ติดตั้งโปรแกรม tree ก็พอ

Install

สำหรับการติดตั้ง Tree ใน Linux สามารถใช้คำสั่งตามนี้

Debian Family

sudo apt install tree

macOS

brew install tree

Usage

สำหรับการใช้งานก็ง่ายมาก เพียงแค่เข้าไปที่ Folder ที่เราต้องการจะสร้าง Tree จากนั้นใช้คำสั่งตามนี้

tree

Ignore Directory

เราสามารถละเว้นบาง Folder ที่ไม่ต้องการให้แสดงใน Tree ได้ โดยใช้คำสั่ง -I ต่อท้าย

เช่น ถ้าเราต้องการละเว้น Folder node_modules ให้ใช้คำสั่งตามนี้

tree -I node_modules

หรือถ้าเราต้องการละเว้นหลายโฟลเดอร์พร้อมกัน เช่น node_modules, .git, และ dist เราสามารถใช้ Regular Expression แบบ OR | ได้ดังนี้

tree -I 'node_modules|.git|dist'

อย่าลืมว่าต้องใส่ pattern ทั้งหมดไว้ใน single quote ' ' เพื่อไม่ให้ shell แปลความหมายผิดพลาด

Result

ผมจะลองสร้าง Folder Structure ของ Next.js ด้วย Tree ดู โดยใช้ Ignore node_modules ถ้าเอามาด้วยมันจะเยอะมากๆ จากนั้น Export ออกมาเป็นไฟล์ Markdown ชื่อ hi.md

tree -I node_modules > hi.md

หน้าตาของ hi.md จะเป็นแบบนี้

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
├── hi.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── public
│   ├── next.svg
│   └── vercel.svg
├── tsconfig.json
└── yarn.lock
 
3 directories, 14 files