บ่อยครั้งที่โครงสร้างไฟล์ในโปรเจคดูสับสนเหตุเพราะโปรเจคมีปริมาณไฟล์ที่มากเกินไป ตัวอย่างเช่น โปรเจคหนึ่งอาจมีไฟล์ config และ dockerfile เช่นนี้

VSCode มีฟีเจอร์ที่เรียกว่า Explorer File Nesting ที่ช่วยให้เรารวมกลุ่มไฟล์ที่เกี่ยวข้องในโฟลเดอร์เดียวกันเข้าไว้ด้วยกัน

สมมติเราต้องการรวมกลุ่มของไฟล์ที่ขึ้นต้นด้วย config เข้าไว้เป็นกลุ่มของ config.yml และรวมกลุ่มของไฟล์สำหรับการตั้งค่า Docker ไว้ในกลุ่มของ dockerfile จะได้การตั้งค่าใน .vscode/settings.json (สร้างโฟลเดอร์ .vscode ในโปรเจค แล้วจึงสร้างไฟล์ settings.json พร้อมใส่โค้ดล่างนี้) ดังนี้

1{
2  "explorer.experimental.fileNesting.enabled": true,
3  "explorer.experimental.fileNesting.expand": false,
4  "explorer.experimental.fileNesting.patterns": {
5    "dockerfile": ".dockerignore, docker-compose.yml, dockerfile*",
6    "config.yml": "config.*"
7  }
8}

ผลลัพธ์ที่ได้จะเกิดการรวมกลุ่มตามภาพล่าง โดยเมื่อทำการกดโดยตรงไปที่ชื่อ config.yml หรือ dockerfile จะถือว่าเป็นการเปิดไฟล์ดังกล่าวโดยตรง

ลักษณะการแสดงผลจะเสมือนการรวมกลุ่มนั้นเป็นโฟลเดอร์ เมื่อทำการกดขยายจึงเห็นไฟล์ที่อยู่ภายใต้การรวมกลุ่มนั้น