16 KiB
کوڈ ایڈیٹر کا استعمال
یہ سبق VSCode.dev کے بنیادی اصولوں کا احاطہ کرتا ہے، جو ایک ویب بیسڈ کوڈ ایڈیٹر ہے، تاکہ آپ اپنے کوڈ میں تبدیلیاں کر سکیں اور کسی پروجیکٹ میں حصہ لے سکیں بغیر اپنے کمپیوٹر پر کچھ انسٹال کیے۔
سیکھنے کے مقاصد
اس سبق میں، آپ سیکھیں گے کہ:
- کوڈ پروجیکٹ میں کوڈ ایڈیٹر کا استعمال کیسے کریں
- ورژن کنٹرول کے ذریعے تبدیلیوں کا ریکارڈ کیسے رکھیں
- ڈیولپمنٹ کے لیے ایڈیٹر کو کسٹمائز کیسے کریں
پیشگی ضروریات
شروع کرنے سے پہلے، آپ کو GitHub پر ایک اکاؤنٹ بنانا ہوگا۔ اگر آپ کے پاس پہلے سے اکاؤنٹ نہیں ہے تو GitHub پر جائیں اور ایک اکاؤنٹ بنائیں۔
تعارف
کوڈ ایڈیٹر پروگرام لکھنے اور موجودہ کوڈنگ پروجیکٹس کے ساتھ تعاون کرنے کے لیے ایک ضروری ٹول ہے۔ ایک بار جب آپ ایڈیٹر کے بنیادی اصولوں کو سمجھ لیں اور اس کی خصوصیات کا استعمال کرنا سیکھ لیں، تو آپ انہیں کوڈ لکھنے میں لاگو کر سکیں گے۔
VSCode.dev کے ساتھ شروعات
VSCode.dev ایک ویب پر مبنی کوڈ ایڈیٹر ہے۔ اسے استعمال کرنے کے لیے آپ کو کچھ انسٹال کرنے کی ضرورت نہیں، بالکل کسی اور ویب سائٹ کو کھولنے کی طرح۔ ایڈیٹر کے ساتھ شروعات کرنے کے لیے، درج ذیل لنک کھولیں: https://vscode.dev۔ اگر آپ GitHub میں سائن ان نہیں ہیں، تو سائن ان کرنے یا نیا اکاؤنٹ بنانے کے لیے ہدایات پر عمل کریں اور پھر سائن ان کریں۔
جب یہ لوڈ ہو جائے، تو یہ کچھ اس تصویر کی طرح نظر آئے گا:
یہاں تین اہم حصے ہیں، بائیں سے دائیں کی طرف:
- ایکٹیویٹی بار، جس میں کچھ آئیکنز شامل ہیں، جیسے میگنیفائنگ گلاس 🔎، گیئر ⚙️، اور کچھ دیگر
- ایکسپینڈڈ ایکٹیویٹی بار، جو ڈیفالٹ طور پر ایکسپلورر کہلاتا ہے، اور سائیڈ بار کہلاتا ہے
- اور آخر میں، دائیں طرف کوڈ ایریا
ہر آئیکن پر کلک کریں تاکہ مختلف مینو ظاہر ہوں۔ جب ہو جائے، تو ایکسپلورر پر کلک کریں تاکہ آپ وہیں واپس آ جائیں جہاں سے آپ نے شروع کیا تھا۔
جب آپ کوڈ بنانا شروع کریں گے یا موجودہ کوڈ میں ترمیم کریں گے، تو یہ سب سے بڑے دائیں طرف کے علاقے میں ہوگا۔ آپ اس علاقے کو موجودہ کوڈ دیکھنے کے لیے بھی استعمال کریں گے، جو آپ اگلے مرحلے میں کریں گے۔
GitHub ریپوزٹری کھولیں
پہلی چیز جو آپ کو کرنی ہوگی وہ ہے ایک GitHub ریپوزٹری کھولنا۔ ریپوزٹری کھولنے کے کئی طریقے ہیں۔ اس سیکشن میں آپ دو مختلف طریقے دیکھیں گے جن کے ذریعے آپ ریپوزٹری کھول سکتے ہیں تاکہ آپ تبدیلیوں پر کام شروع کر سکیں۔
1. ایڈیٹر کے ذریعے
ایڈیٹر کا استعمال کرتے ہوئے ایک ریموٹ ریپوزٹری کھولیں۔ اگر آپ VSCode.dev پر جائیں تو آپ کو ایک "Open Remote Repository" بٹن نظر آئے گا:
آپ کمانڈ پیلیٹ کا بھی استعمال کر سکتے ہیں۔ کمانڈ پیلیٹ ایک ان پٹ باکس ہے جہاں آپ کسی کمانڈ یا ایکشن کا حصہ ٹائپ کر سکتے ہیں تاکہ صحیح کمانڈ تلاش کر سکیں۔ مینو کو اوپر بائیں طرف سے استعمال کریں، پھر View منتخب کریں، اور پھر Command Palette کو منتخب کریں، یا درج ذیل کی بورڈ شارٹ کٹ استعمال کریں: Ctrl-Shift-P (MacOS پر یہ Command-Shift-P ہوگا)۔
جب مینو کھل جائے، تو open remote repository ٹائپ کریں، اور پھر پہلا آپشن منتخب کریں۔ وہ ریپوزٹریز جن کا آپ حصہ ہیں یا جو آپ نے حال ہی میں کھولی ہیں، ظاہر ہوں گی۔ آپ ایک مکمل GitHub URL بھی استعمال کر سکتے ہیں۔ درج ذیل URL استعمال کریں اور باکس میں پیسٹ کریں:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ اگر کامیاب ہو، تو آپ اس ریپوزٹری کی تمام فائلیں ٹیکسٹ ایڈیٹر میں لوڈ ہوتی دیکھیں گے۔
2. URL کا استعمال
آپ ریپوزٹری لوڈ کرنے کے لیے براہ راست URL بھی استعمال کر سکتے ہیں۔ مثال کے طور پر، موجودہ ریپوزٹری کا مکمل URL https://github.com/microsoft/Web-Dev-For-Beginners ہے، لیکن آپ GitHub ڈومین کو VSCode.dev/github سے بدل سکتے ہیں اور ریپوزٹری کو براہ راست لوڈ کر سکتے ہیں۔ نتیجے میں URL ہوگا: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners۔
فائلز میں ترمیم کریں
جب آپ نے ریپوزٹری کو براؤزر/vscode.dev پر کھول لیا ہو، تو اگلا مرحلہ پروجیکٹ میں اپڈیٹس یا تبدیلیاں کرنا ہوگا۔
1. نئی فائل بنائیں
آپ یا تو کسی موجودہ فولڈر کے اندر فائل بنا سکتے ہیں، یا اسے روٹ ڈائریکٹری/فولڈر میں بنا سکتے ہیں۔ نئی فائل بنانے کے لیے، اس لوکیشن/ڈائریکٹری کو کھولیں جہاں آپ فائل کو محفوظ کرنا چاہتے ہیں اور 'New file ...' آئیکن کو ایکٹیویٹی بار (بائیں) پر منتخب کریں، اسے ایک نام دیں اور انٹر دبائیں۔
2. ریپوزٹری میں فائل کو ایڈٹ اور محفوظ کریں
vscode.dev کا استعمال اس وقت مددگار ہوتا ہے جب آپ اپنے پروجیکٹ میں جلدی اپڈیٹس کرنا چاہتے ہیں بغیر کسی سافٹ ویئر کو لوکل طور پر لوڈ کیے۔
اپنے کوڈ کو اپڈیٹ کرنے کے لیے، ایکٹیویٹی بار پر موجود 'Explorer' آئیکن پر کلک کریں تاکہ ریپوزٹری میں فائلز اور فولڈرز دیکھ سکیں۔
ایک فائل منتخب کریں تاکہ اسے کوڈ ایریا میں کھولا جا سکے، اپنی تبدیلیاں کریں اور محفوظ کریں۔
جب آپ اپنے پروجیکٹ کو اپڈیٹ کر لیں، تو source control آئیکن منتخب کریں، جس میں آپ کی ریپوزٹری میں کی گئی تمام نئی تبدیلیاں شامل ہوں گی۔
تبدیلیوں کو دیکھنے کے لیے، Changes فولڈر میں موجود فائل(ز) کو ایکسپینڈڈ ایکٹیویٹی بار میں منتخب کریں۔ یہ آپ کے لیے ایک 'Working Tree' کھولے گا تاکہ آپ بصری طور پر دیکھ سکیں کہ آپ نے فائل میں کیا تبدیلیاں کی ہیں۔ سرخ رنگ کسی چیز کو ہٹانے کو ظاہر کرتا ہے، جبکہ سبز رنگ کسی چیز کے اضافے کو ظاہر کرتا ہے۔
اگر آپ اپنی کی گئی تبدیلیوں سے مطمئن ہیں، تو Changes فولڈر پر ہوور کریں اور + بٹن پر کلک کریں تاکہ تبدیلیوں کو اسٹیج کیا جا سکے۔ اسٹیجنگ کا مطلب ہے کہ آپ اپنی تبدیلیوں کو GitHub پر کمیٹ کرنے کے لیے تیار کر رہے ہیں۔
اگر آپ کسی تبدیلی سے مطمئن نہیں ہیں اور اسے ختم کرنا چاہتے ہیں، تو Changes فولڈر پر ہوور کریں اور undo آئیکن منتخب کریں۔
پھر، ایک commit message ٹائپ کریں (پروجیکٹ میں کی گئی تبدیلی کی وضاحت), اور تبدیلیوں کو کمیٹ اور پش کرنے کے لیے چیک آئیکن پر کلک کریں۔
جب آپ اپنے پروجیکٹ پر کام مکمل کر لیں، تو اوپر بائیں طرف hamburger menu icon منتخب کریں تاکہ github.com پر ریپوزٹری پر واپس جا سکیں۔
ایکسٹینشنز کا استعمال
VSCode پر ایکسٹینشنز انسٹال کرنے سے آپ اپنے ایڈیٹر میں نئے فیچرز اور کسٹمائزڈ ڈیولپمنٹ ماحول کے آپشنز شامل کر سکتے ہیں تاکہ آپ کے ڈیولپمنٹ ورک فلو کو بہتر بنایا جا سکے۔ یہ ایکسٹینشنز آپ کو مختلف پروگرامنگ زبانوں کے لیے سپورٹ شامل کرنے میں بھی مدد دیتی ہیں اور اکثر یا تو عمومی ایکسٹینشنز ہوتی ہیں یا زبان پر مبنی ایکسٹینشنز۔
تمام دستیاب ایکسٹینشنز کی فہرست دیکھنے کے لیے، ایکٹیویٹی بار پر Extensions icon پر کلک کریں اور 'Search Extensions in Marketplace' کے لیبل والے ٹیکسٹ فیلڈ میں ایکسٹینشن کا نام ٹائپ کرنا شروع کریں۔
آپ کو ایکسٹینشنز کی فہرست نظر آئے گی، جن میں شامل ہوں گے: ایکسٹینشن کا نام، پبلشر کا نام، ایک جملے کی وضاحت، ڈاؤن لوڈز کی تعداد اور اسٹار ریٹنگ۔
آپ پہلے سے انسٹال شدہ ایکسٹینشنز کو Installed folder میں، زیادہ تر ڈیولپرز کے استعمال کردہ مقبول ایکسٹینشنز کو Popular folder میں، اور آپ کے لیے تجویز کردہ ایکسٹینشنز کو recommended folder میں دیکھ سکتے ہیں۔
1. ایکسٹینشنز انسٹال کریں
ایکسٹینشن انسٹال کرنے کے لیے، سرچ فیلڈ میں ایکسٹینشن کا نام ٹائپ کریں اور جب یہ ایکسپینڈڈ ایکٹیویٹی بار میں ظاہر ہو، تو اس پر کلک کریں تاکہ کوڈ ایریا میں ایکسٹینشن کے بارے میں اضافی معلومات دیکھی جا سکیں۔
آپ یا تو ایکسپینڈڈ ایکٹیویٹی بار میں نیلے انسٹال بٹن پر کلک کر کے انسٹال کر سکتے ہیں یا کوڈ ایریا میں انسٹال بٹن استعمال کر سکتے ہیں جو ایکسٹینشن منتخب کرنے پر ظاہر ہوتا ہے۔
2. ایکسٹینشنز کو کسٹمائز کریں
ایکسٹینشن انسٹال کرنے کے بعد، آپ کو اس کے رویے کو تبدیل کرنے اور اپنی ترجیحات کے مطابق اسے کسٹمائز کرنے کی ضرورت ہو سکتی ہے۔ ایسا کرنے کے لیے، ایکسٹینشنز آئیکن منتخب کریں، اور اس بار، آپ کی ایکسٹینشن Installed folder میں ظاہر ہوگی، Gear icon پر کلک کریں اور Extensions Setting پر جائیں۔
3. ایکسٹینشنز کو مینیج کریں
ایکسٹینشن انسٹال اور استعمال کرنے کے بعد، vscode.dev مختلف ضروریات کے مطابق آپ کی ایکسٹینشن کو مینیج کرنے کے آپشنز فراہم کرتا ہے۔ مثال کے طور پر، آپ یہ کر سکتے ہیں:
-
Disable: (جب آپ کو ایکسٹینشن کی عارضی طور پر ضرورت نہ ہو لیکن اسے مکمل طور پر ان انسٹال نہ کرنا چاہیں)
انسٹال شدہ ایکسٹینشن کو ایکسپینڈڈ ایکٹیویٹی بار میں منتخب کریں > گیئر آئیکن پر کلک کریں > 'Disable' یا 'Disable (Workspace)' منتخب کریں یا کوڈ ایریا میں ایکسٹینشن کھولیں اور نیلے Disable بٹن پر کلک کریں۔
-
Uninstall: انسٹال شدہ ایکسٹینشن کو ایکسپینڈڈ ایکٹیویٹی بار میں منتخب کریں > گیئر آئیکن پر کلک کریں > 'Uninstall' منتخب کریں یا کوڈ ایریا میں ایکسٹینشن کھولیں اور نیلے Uninstall بٹن پر کلک کریں۔
اسائنمنٹ
VSCode.dev کا استعمال کرتے ہوئے ایک ریزیومے ویب سائٹ بنائیں
جائزہ اور خود مطالعہ
VSCode.dev اور اس کی دیگر خصوصیات کے بارے میں مزید پڑھیں۔
ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔