รวมกลุ่มไฟล์ที่สัมพันธ์กันด้วย Explorer File Nesting ใน VSCode
Nuttavut Thongjor
VSCode

เรียนรู้การใช้งาน Explorer File Nesting ใน VSCode เพื่อรวมกลุ่มไฟล์ที่สัมพันธ์กัน

คำอธิบาย
ความคิดเห็น

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

Before File Grouping

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

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

Code
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 จะถือว่าเป็นการเปิดไฟล์ดังกล่าวโดยตรง

File Grouping

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

Expand File Grouping