VS Code ব্যবহার করতে গেলে আমাদের প্রজেক্টের রুট ফোল্ডারে অনেক ধরনের কনফিগারেশন ফাইল জমতে থাকে। যেমন tsconfig.json, package.json, vite.config.ts, tailwind.config.js ইত্যাদি। এসব ফাইল অনেক সময় দরকারি হলেও, একসাথে ছড়িয়ে ছিটিয়ে থাকলে বিরক্তিকর লাগে এবং প্রজেক্টকে এলোমেলো দেখায়। এই ঝামেলা এড়াতে আমরা চাইলে VS Code এর file nesting ফিচার ব্যবহার করে ফাইলগুলোকে গুছিয়ে রাখতে পারি—একটা ফাইলের নিচে সংশ্লিষ্ট ফাইলগুলো নেস্টেড আকারে দেখাতে পারি।
এটা করার জন্য আপনাকে রুট ফোল্ডারে .vscode নামে একটি ফোল্ডার তৈরি করতে হবে। তার ভেতরে settings.json নামে একটি ফাইল রাখতে হবে, যেখানে ফাইল নেস্টিংয়ের প্যাটার্নগুলো উল্লেখ করবেন।
উদাহরণস্বরূপ:
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"tsconfig.json": "tsconfig.*.json, global.d.ts",
"vite.config.*": "jsconfig*, vite.config.*, cypress.config.*, playwright.config.*",
"tailwind.config.*": "tailwind.config.*, postcss.config.*, components.json",
"Dockerfile": "docker-compose.*, .dockerignore",
"vite.config.ts": "auto-imports.d.ts, .eslintrc-auto-import.json ",
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, eslint.config*, .prettier*, prettier*, .editorconfig"
}
}
এই কনফিগটি যুক্ত করলে package.json এর নিচে এর সাথে সম্পর্কিত package-lock.json, .prettierrc, eslint.config.js ইত্যাদি গুছিয়ে দেখা যাবে—ফোল্ডারের মত করে। একি ভাবে ডকার রিলেটেড ফাইল যা যা আছে মানে docker-copose, dockerignore এর সব গুলি এক সাথে দেখাবে।
নিচের স্কিনশট গুলি দেখুন: 👇
Nested সেটিং করার আগে
Nested সেটিং করার পরে
আরও সুন্দর ও পূর্ণ কনফিগারেশন চাইলে এখানে দেখে নিতে পারেন: 👇
🔗 react-ts-starter - .vscode/settings.json
এভাবে ফাইল নেস্টিং ব্যবহার করলে আপনার কোডবেস অনেক বেশি ক্লিন, মিনিমাল ও প্রফেশনাল দেখাবে ✨