EZ Notes Logo

EZNotes

💻 Practical 4: Getting Familiar with VS Code IDE

Learn about the different parts of Visual Studio Code and how to use them.

🎯 Aim

To explore and understand the different parts of Visual Studio Code IDE.

🛠️ What You Need

  • Visual Studio Code installed on your computer

📖 Introduction

Visual Studio Code (VS Code) is a powerful code editor. It has many features that help programmers write code easily. In this practical, you will learn about the main parts of VS Code. This will help you use VS Code better for your programming projects.

📝 Steps

Step 1: Open VS Code

  1. Click the VS Code icon on your desktop or Start Menu.
  2. Wait for VS Code to open.
  3. You will see the Welcome Screen with many options.
VS Code Welcome Screen Figure 1: VS Code Welcome Screen

Step 2: Explore the Activity Bar

  1. Look at the left side of VS Code.
  2. You will see the Activity Bar with several icons.
  3. Click each icon to see what it does.

🖥️ Parts of VS Code

1️⃣ Activity Bar — The vertical bar on the left side. It has icons for:
  • Explorer (📁) — Shows your files and folders
  • Search (🔍) — Search for text in your files
  • Source Control (🔀) — For Git version control
  • Run & Debug (▶️) — Run and debug your programs
  • Extensions (🧩) — Install new features
VS Code Activity Bar Figure 2: VS Code Activity Bar
2️⃣ Side Bar — The panel next to the Activity Bar. It shows different information depending on which icon you clicked.
3️⃣ Editor — The main area in the center. This is where you write and edit your code.
VS Code Editor Figure 3: VS Code Editor Area
4️⃣ Status Bar — The bar at the bottom. It shows:
  • Your current file name
  • Language mode (e.g., HTML, C++, Python)
  • Line and column numbers
  • Git branch information
VS Code Status Bar Figure 4: VS Code Status Bar
5️⃣ Terminal — The panel at the bottom. You can open it by pressing Ctrl + ` (backtick). The terminal is used to run commands, compile programs, and see output.
VS Code Terminal Figure 5: VS Code Terminal

Step 3: Try Some Features

  1. Click the Explorer icon (📁) to see your files.
  2. Click Extensions (🧩) and search for "C++" to see available extensions.
  3. Open the terminal by pressing Ctrl + `.
  4. Type a simple command like dir (Windows) or ls (Mac/Linux) and press Enter.

📊 Observations

  • VS Code has different parts: Activity Bar, Side Bar, Editor, Status Bar, and Terminal.
  • The Activity Bar helps you switch between different tools.
  • The Editor is where you write code.
  • The Status Bar gives useful information about your file.
  • The Terminal allows you to run commands.

✅ Result

You have explored the main parts of VS Code. You now know how to use the Activity Bar, Side Bar, Editor, Status Bar, and Terminal. This will help you write and manage your code more easily.

💡 Tip: You can customize VS Code by installing extensions. Extensions add new features like support for different programming languages, themes, and tools.
📌 Important: The terminal is very useful. You can run your programs directly from the terminal after compiling them.

🎯 مقصد

Visual Studio Code IDE کے مختلف حصوں کو دریافت کرنا اور سمجھنا۔

🛠️ آپ کو کیا چاہیے

  • آپ کے کمپیوٹر پر Visual Studio Code انسٹال ہو

📖 تعارف

Visual Studio Code (VS Code) ایک طاقتور کوڈ ایڈیٹر ہے۔ اس میں بہت سی خصوصیات ہیں جو پروگرامرز کو آسانی سے کوڈ لکھنے میں مدد دیتی ہیں۔ اس عملی میں، آپ VS Code کے اہم حصوں کے بارے میں جانیں گے۔ اس سے آپ کو اپنے پروگرامنگ منصوبوں کے لیے VS Code کو بہتر طریقے سے استعمال کرنے میں مدد ملے گی۔

📝 اقدامات

پہلا قدم: VS Code کھولیں

  1. اپنے ڈیسک ٹاپ یا اسٹارٹ مینو پر VS Code آئیکن پر کلک کریں۔
  2. VS Code کے کھلنے کا انتظار کریں۔
  3. آپ کو خوش آمدید کی اسکرین نظر آئے گی جس میں بہت سے اختیارات ہوں گے۔
VS Code Welcome Screen شکل 1: VS Code خوش آمدید کی اسکرین

دوسرا قدم: ایکٹیویٹی بار کو دریافت کریں

  1. VS Code کے بائیں طرف دیکھیں۔
  2. آپ کو کئی آئیکنز کے ساتھ Activity Bar نظر آئے گا۔
  3. یہ دیکھنے کے لیے کہ یہ کیا کرتے ہیں، ہر آئیکن پر کلک کریں۔

🖥️ VS Code کے حصے

1️⃣ ایکٹیویٹی بار — بائیں طرف عمودی بار۔ اس میں آئیکنز ہیں:
  • Explorer (📁) — آپ کی فائلیں اور فولڈر دکھاتا ہے
  • Search (🔍) — آپ کی فائلوں میں متن تلاش کریں
  • Source Control (🔀) — Git ورژن کنٹرول کے لیے
  • Run & Debug (▶️) — پروگرام چلائیں اور ڈیبگ کریں
  • Extensions (🧩) — نئی خصوصیات انسٹال کریں
VS Code Activity Bar شکل 2: VS Code ایکٹیویٹی بار
2️⃣ سائڈ بار — ایکٹیویٹی بار کے ساتھ والا پینل۔ یہ اس بات پر منحصر ہے کہ آپ نے کس آئیکن پر کلک کیا ہے، مختلف معلومات دکھاتا ہے۔
3️⃣ ایڈیٹر — مرکزی علاقہ۔ یہ وہ جگہ ہے جہاں آپ اپنا کوڈ لکھتے اور ترمیم کرتے ہیں۔
VS Code Editor شکل 3: VS Code ایڈیٹر کا علاقہ
4️⃣ اسٹیٹس بار — نیچے کی بار۔ یہ دکھاتا ہے:
  • آپ کی موجودہ فائل کا نام
  • زبان کا موڈ (مثال: HTML، C++، Python)
  • لائن اور کالم نمبر
  • Git برانچ کی معلومات
VS Code Status Bar شکل 4: VS Code اسٹیٹس بار
5️⃣ ٹرمینل — نیچے کا پینل۔ آپ اسے Ctrl + ` دبا کر کھول سکتے ہیں۔ ٹرمینل کا استعمال کمانڈ چلانے، پروگرام کمپائل کرنے اور آؤٹ پٹ دیکھنے کے لیے کیا جاتا ہے۔
VS Code Terminal شکل 5: VS Code ٹرمینل

تیسرا قدم: کچھ خصوصیات آزمائیں

  1. اپنی فائلیں دیکھنے کے لیے Explorer آئیکن (📁) پر کلک کریں۔
  2. Extensions (🧩) پر کلک کریں اور دستیاب ایکسٹینشنز دیکھنے کے لیے "C++" تلاش کریں۔
  3. Ctrl + ` دبا کر ٹرمینل کھولیں۔
  4. ایک سادہ کمانڈ ٹائپ کریں جیسے dir (ونڈوز) یا ls (میک/لینکس) اور Enter دبائیں۔

📊 مشاہدات

  • VS Code کے مختلف حصے ہیں: ایکٹیویٹی بار، سائڈ بار، ایڈیٹر، اسٹیٹس بار، اور ٹرمینل۔
  • ایکٹیویٹی بار مختلف ٹولز کے درمیان سوئچ کرنے میں مدد کرتا ہے۔
  • ایڈیٹر وہ جگہ ہے جہاں آپ کوڈ لکھتے ہیں۔
  • اسٹیٹس بار آپ کی فائل کے بارے میں مفید معلومات دیتا ہے۔
  • ٹرمینل آپ کو کمانڈ چلانے کی اجازت دیتا ہے۔

✅ نتیجہ

آپ نے VS Code کے اہم حصوں کو دریافت کر لیا ہے۔ اب آپ جانتے ہیں کہ ایکٹیویٹی بار، سائڈ بار، ایڈیٹر، اسٹیٹس بار، اور ٹرمینل کا استعمال کیسے کریں۔ اس سے آپ کو اپنا کوڈ زیادہ آسانی سے لکھنے اور منظم کرنے میں مدد ملے گی۔

💡 مشورہ: آپ ایکسٹینشنز انسٹال کر کے VS Code کو اپنی مرضی کے مطابق بنا سکتے ہیں۔ ایکسٹینشنز نئی خصوصیات شامل کرتے ہیں جیسے مختلف پروگرامنگ زبانوں، تھیمز اور ٹولز کے لیے سپورٹ۔
📌 اہم: ٹرمینل بہت مفید ہے۔ آپ پروگرام کو کمپائل کرنے کے بعد براہ راست ٹرمینل سے چلا سکتے ہیں۔
⬅ Back to Practical Notebooks