<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
  "translation_date": "2025-10-03T08:44:36+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "ur"
}
-->
***

# کوڈ ایڈیٹر کا استعمال: [VSCode.dev](https://vscode.dev) میں مہارت حاصل کریں

**خوش آمدید!**  
یہ سبق آپ کو [VSCode.dev](https://vscode.dev)—ایک طاقتور، ویب پر مبنی کوڈ ایڈیٹر—کے بنیادی اصولوں سے لے کر جدید استعمال تک لے جاتا ہے۔ آپ سیکھیں گے کہ کوڈ کو اعتماد کے ساتھ کیسے ایڈٹ کریں، پروجیکٹس کو منظم کریں، تبدیلیوں کو ٹریک کریں، ایکسٹینشنز انسٹال کریں، اور پروفیشنل کی طرح تعاون کریں—سب کچھ اپنے براؤزر سے، بغیر کسی انسٹالیشن کے۔

***

## سیکھنے کے مقاصد

اس سبق کے اختتام تک، آپ قابل ہوں گے:

- کسی بھی پروجیکٹ پر، کہیں بھی، کوڈ ایڈیٹر کو مؤثر طریقے سے استعمال کریں
- بلٹ ان ورژن کنٹرول کے ساتھ اپنے کام کو بغیر کسی رکاوٹ کے ٹریک کریں
- ایڈیٹر کی تخصیصات اور ایکسٹینشنز کے ذریعے اپنے ڈیولپمنٹ ورک فلو کو ذاتی بنائیں اور بہتر بنائیں

***

## ضروریات

شروع کرنے کے لیے، **ایک مفت [GitHub](https://github.com) اکاؤنٹ کے لیے سائن اپ کریں**، جو آپ کو کوڈ ریپوزیٹریز کو منظم کرنے اور دنیا بھر میں تعاون کرنے کی اجازت دیتا ہے۔ اگر آپ کے پاس ابھی تک اکاؤنٹ نہیں ہے، [یہاں ایک بنائیں](https://github.com/)۔

***

## ویب پر مبنی کوڈ ایڈیٹر کیوں استعمال کریں؟

ایک **کوڈ ایڈیٹر** جیسے VSCode.dev آپ کے کوڈ لکھنے، ایڈٹ کرنے، اور منظم کرنے کے لیے کمانڈ سینٹر ہے۔ ایک آسان انٹرفیس، بے شمار خصوصیات، اور براؤزر کے ذریعے فوری رسائی کے ساتھ، آپ کر سکتے ہیں:

- کسی بھی ڈیوائس پر پروجیکٹس ایڈٹ کریں
- انسٹالیشنز کی جھنجھٹ سے بچیں
- فوری طور پر تعاون کریں اور حصہ ڈالیں

جب آپ VSCode.dev کے ساتھ آرام دہ ہو جائیں گے، تو آپ کسی بھی وقت، کہیں بھی کوڈنگ کے کاموں کو انجام دینے کے لیے تیار ہوں گے۔

***

## VSCode.dev کے ساتھ شروعات

**[VSCode.dev](https://vscode.dev)** پر جائیں—کوئی انسٹالیشن نہیں، کوئی ڈاؤن لوڈ نہیں۔ GitHub کے ساتھ سائن ان کرنے سے مکمل رسائی حاصل ہوتی ہے، بشمول آپ کی سیٹنگز، ایکسٹینشنز، اور ریپوزیٹریز کی ہم آہنگی۔ اگر کہا جائے تو اپنا GitHub اکاؤنٹ کنیکٹ کریں۔

لوڈ ہونے کے بعد، آپ کا ورک اسپیس کچھ اس طرح نظر آئے گا:

![Default VSCode.dev](../images/default-vscode-dev تین بنیادی سیکشنز پر مشتمل ہے، بائیں سے دائیں:
- **ایکٹیویٹی بار:** آئیکنز جیسے 🔎 (تلاش)، ⚙️ (سیٹنگز)، فائلز، سورس کنٹرول وغیرہ۔
- **سائیڈ بار:** ایکٹیویٹی بار آئیکن کے منتخب ہونے پر سیاق و سباق بدلتا ہے (ڈیفالٹ *ایکسپلورر* پر ہوتا ہے تاکہ فائلز دکھائی جائیں)۔
- **ایڈیٹر/کوڈ ایریا:** سب سے بڑا سیکشن دائیں جانب—جہاں آپ اصل میں کوڈ ایڈٹ اور دیکھیں گے۔

خصوصیات کو دریافت کرنے کے لیے آئیکنز پر کلک کریں، لیکن اپنی جگہ برقرار رکھنے کے لیے _ایکسپلورر_ پر واپس آئیں۔

***

## GitHub ریپوزیٹری کھولنا

### طریقہ 1: ایڈیٹر سے

1. [VSCode.dev](https://vscode.dev) پر جائیں۔ **"Open Remote Repository"** پر کلک کریں۔

   ![Open remote repository](../../../../8-code-editor/images/open-remote-repository _کمانڈ پیلیٹ_ (Ctrl-Shift-P، یا Mac پر Cmd-Shift-P) استعمال کریں۔

   ![Palette Menu](../images/palette-menu.png "open remote repository.”
   - آپشن منتخب کریں۔
   - اپنا GitHub ریپو URL پیسٹ کریں (مثلاً، `https://github.com/microsoft/Web-Dev-For-Beginners`) اور Enter دبائیں۔

اگر کامیاب ہو، تو آپ پورا پروجیکٹ لوڈ شدہ اور ایڈٹ کرنے کے لیے تیار دیکھیں گے!

***

### طریقہ 2: URL کے ذریعے فوری طور پر

کسی بھی GitHub ریپو URL کو VSCode.dev میں براہ راست کھولنے کے لیے `github.com` کو `vscode.dev/github` سے تبدیل کریں۔  
مثال:

- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`

یہ خصوصیت کسی بھی پروجیکٹ تک فوری رسائی کو سپرچارج کرتی ہے۔

***

## اپنے پروجیکٹ میں فائلز ایڈٹ کرنا

جب آپ کا ریپو کھلا ہو، تو آپ کر سکتے ہیں:

### 1. **نئی فائل بنائیں**
- *ایکسپلورر* سائیڈ بار میں اپنی مطلوبہ فولڈر پر جائیں یا روٹ استعمال کریں۔
- _‘New file ...’_ آئیکن پر کلک کریں۔
- اپنی فائل کا نام دیں، **Enter** دبائیں، اور آپ کی فائل فوراً ظاہر ہوگی۔

![Create a new file](../images/create-new-file 2. **فائلز ایڈٹ اور محفوظ کریں**

- *ایکسپلورر* میں کسی فائل پر کلک کریں تاکہ اسے کوڈ ایریا میں کھولا جا سکے۔
- اپنی ضرورت کے مطابق تبدیلیاں کریں۔
- VSCode.dev خود بخود آپ کی تبدیلیاں محفوظ کرتا ہے، لیکن آپ دستی طور پر محفوظ کرنے کے لیے Ctrl+S دبائیں۔

![Edit a file](../images/edit-a-file.png. **ورژن کنٹرول کے ساتھ تبدیلیوں کو ٹریک اور کمیٹ کریں**

VSCode.dev میں **Git** ورژن کنٹرول شامل ہے!

- _'Source Control'_ آئیکن پر کلک کریں تاکہ تمام کی گئی تبدیلیاں دیکھ سکیں۔
- `Changes` فولڈر میں فائلز اضافے (سبز) اور حذف (سرخ) دکھاتی ہیں۔  
  ![View changes](../images/working-tree.png فائلز کے ساتھ تبدیلیوں کو کمیٹ کے لیے تیار کرنے کے لیے `+` پر کلک کریں۔
- غیر مطلوبہ تبدیلیوں کو ختم کرنے کے لیے انڈو آئیکن پر کلک کریں۔
- ایک واضح کمیٹ میسج ٹائپ کریں، پھر کمیٹ اور پش کرنے کے لیے چیک مارک پر کلک کریں۔

اپنے ریپوزیٹری پر GitHub پر واپس جانے کے لیے، اوپر بائیں جانب ہیمبرگر مینو منتخب کریں۔

![Stage & commit changes](../images/edit-vscode.dev ایکسٹینشنز کے ساتھ اپ گریڈ کریں

ایکسٹینشنز آپ کو زبانیں، تھیمز، ڈیبگرز، اور پروڈکٹیویٹی ٹولز VSCode.dev میں شامل کرنے دیتی ہیں—آپ کی کوڈنگ زندگی کو آسان اور مزیدار بناتی ہیں۔

### ایکسٹینشنز براؤز اور منظم کرنا

- ایکٹیویٹی بار میں **ایکسٹینشنز آئیکن** پر کلک کریں۔
- _'Search Extensions in Marketplace'_ باکس میں ایکسٹینشن تلاش کریں۔

  ![Extension details](../images/extension-details:
  - **انسٹال شدہ:** تمام ایکسٹینشنز جو آپ نے شامل کی ہیں
  - **مقبول:** انڈسٹری کے پسندیدہ
  - **تجویز کردہ:** آپ کے ورک فلو کے مطابق

  ![View extensions](

  

***

### 1. **ایکسٹینشنز انسٹال کریں**

- سرچ میں ایکسٹینشن کا نام درج کریں، اس پر کلک کریں، اور ایڈیٹر میں تفصیلات کا جائزہ لیں۔
- سائیڈ بار میں _یا_ مین کوڈ ایریا میں **نیلا انسٹال بٹن** دبائیں۔

  ![Install extensions](../images/install-extension 2. **ایکسٹینشنز کو حسب ضرورت بنائیں**

- اپنی انسٹال شدہ ایکسٹینشن تلاش کریں۔
- **گیئر آئیکن** پر کلک کریں → _Extension Settings_ منتخب کریں تاکہ اپنی پسند کے مطابق رویے کو بہتر بنائیں۔

  ![Modify extension settings](../images/extension-settings 3. **ایکسٹینشنز منظم کریں**
آپ کر سکتے ہیں:

- **غیر فعال کریں:** ایکسٹینشن کو عارضی طور پر بند کریں جبکہ اسے انسٹال رکھیں
- **ان انسٹال کریں:** اگر مزید ضرورت نہ ہو تو اسے مستقل طور پر ہٹا دیں

  ایکسٹینشن تلاش کریں، گیئر آئیکن دبائیں، اور ‘Disable’ یا ‘Uninstall’ منتخب کریں، یا کوڈ ایریا میں نیلے بٹن استعمال کریں۔

***

## اسائنمنٹ

اپنی مہارت آزمائیں: [VSCode.dev کا استعمال کرتے ہوئے ایک ریزیومے ویب سائٹ بنائیں](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

***

## مزید تحقیق اور خود مطالعہ

- [VSCode ویب ڈاکس](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) کے ساتھ مزید گہرائی میں جائیں۔
- ایڈوانسڈ ورک اسپیس خصوصیات، کی بورڈ شارٹ کٹس، اور سیٹنگز کو دریافت کریں۔

***

**اب آپ کوڈنگ، تخلیق، اور تعاون کے لیے تیار ہیں—کہیں بھی، کسی بھی ڈیوائس پر، VSCode.dev کا استعمال کرتے ہوئے!**

---

**ڈسکلیمر**:  
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔