Master VSCode Productivity: 10+ Powerful Extensions & Hacks

Name: Master VSCode Productivity: 10+ Powerful Extensions & Hacks
Rating: 3.9 (3 reviews)

Productive, fast, and robust

Created bySheikh Naveed

Last updated 5/2026

Urdu

What you'll learn

You will learn to make your coding and production environment more productive using vscode extentions.

Course content

2 sections • 23 lectures • 1h 26m total length

Making your vscode development environment more productive using focus extention6:29
وی ایس کوڈ میں کام کرتے ہوئے آپ کو اکثر کسی خاص کوڈ ایریا پر فوکس کرنے کی ضرورت ہوتی ہے، اس لیے بہتر یہی ہے کہ جس کوڈ پر ہم کام کر رہے ہیں، اس کے علاوہ باقی کوڈ دھندلا (ڈم) ہو جائے تاکہ فوکس کرنا آسان ہو۔ اس کے لیے ایک کوڈ کا ایکسٹینشن استعمال ہوتا ہے۔ ہم یہ ایکسٹینشن انسٹال کریں گے، پھر اس کی سیٹنگز میں جا کر دیکھیں گے کہ یہ کیسے کام کر رہا ہے۔ ایکسٹینشن تک رسائی کے لیے آپ کے پاس کئی آپشنز ہوتے ہیں، جیسے کہ لیفٹ ہینڈ سائڈ پر جو آئیکن نظر آ رہا ہے، اس پر آپ کلک کر سکتے ہیں۔
اگر آپ کریں گے تو آپ کو لکھا ہوا نظر آئے گا ایکسٹینشنز۔ دوسرا طریقہ یہ ہے کہ لیفٹ ہینڈ پر نیچے گئر آئیکن نظر آ رہا ہے، اس پر آپ کلک کریں گے تو یہاں پر بھی ایکسٹینشنز کو آپ ایکسیس کر سکتے ہیں۔ تیسرا طریقہ یہ ہے کہ اس کوڈ پر آپ کلک کریں گے، پریفرنسز، ایکسٹینشنز۔ اس کی شارٹ کٹ ہے کمانڈ شفٹ ایکس برائے ایکسٹینشنز۔ اور جس ایکسٹینشن کی ہم بات کر رہے ہیں اسے کہتے ہیں وی ایس کوڈ ڈیمّر۔ یہاں پر لکھا ہوا آ رہا ہے کوڈر۔ یہ ایکسٹینشن میں نے انسٹال کیا ہوا ہے، اسی وجہ سے اس کے آگے انسٹال کا بٹن نظر نہیں آ رہا، ورنہ جو ایکسٹینشن انسٹال نہیں ہے۔
ان کے آگے انسٹال کا بٹن آتا ہے، اس پر ہم کلک کریں گے اور انسٹال کر لیں گے۔ چونکہ پہلے سے انسٹال ہے، اس لیے یہاں ان انسٹال یا ڈس ایبل کا بٹن نظر آ رہا ہے۔ انسٹال کرنے کے بعد ہم واپس جائیں گے، اسے بند کریں گے اور اپنے اکاؤنٹ میں جائیں گے۔ اسے چلانے کا طریقہ یہ ہے کہ آپ ویو میں جائیں، پھر کمانڈ پیلیٹ میں جائیں، اور وہاں لکھیں گے "ڈمر ٹوگل" جو کہ اس ایکسٹینشن کا نام ہے۔ اس پر کلک کریں گے تو آپ دیکھیں گے کہ اس نے ڈمر ٹوگل کر دیا، یعنی جس کوڈ پر ہمارا کرسر ہے اسے ہائیلائٹ کر دیا۔
باقی تمام لائنز کو ڈِم کر دو، اگر دوبارہ اسے ٹوگل کرنا ہو تو پھر ہم ویو پر جائیں گے، کمانڈ پیلیٹ میں جائیں گے اور دوبارہ ٹوگل ڈِمر لکھ کر اسے ایکسس کریں گے، تو یہ سارا کوڈ دوبارہ ٹوگل ہو جائے گا۔ یا پھر کمانڈ پیلیٹ پر دوبارہ جائیں، یہاں اس کی شارٹ کٹ لکھی ہوئی ہے، کمانڈ شفٹ پی کو دبائیں گے تو دوبارہ آپ اسے ٹوگل کر سکتے ہیں بار بار۔ یہاں آپ کو ڈِمر لکھنے کی ضرورت نہیں کیونکہ وہ سارا کوڈ جو آپ نے حال ہی میں یوز کیا ہو، یہاں ریسنٹلی یوز کرکے شو کر دیا جاتا ہے۔ اب اگر ہمیں بار بار کوڈ کو ٹوگل کرنا ہو تو…
हम बार-बार यहां व्यू में जाएंगे, कमांड पैलेट खोलेंगे, और ये बड़ा सिरदर्द बन जाता है। इससे बचने का तरीका ये है कि हम इस टॉगल या VS कोड डिमर एक्सटेंशन को किसी की के साथ बाइंड कर दें। इसके लिए जरूरी है کہ آپ کی بورڈ شارٹ کٹ میں جا کر اسے بدلیں۔ کی بورڈ شارٹ کٹ میں جانے کا طریقہ یہ ہے کہ آپ کوڈ میں Preferences میں جائیں، پھر Keyboard Shortcuts پر کلک کریں۔ اس کا ایک طریقہ یہی ہے، اور دوسرا یہ کہ آپ لیفٹ سائڈ میں گئیر آئیکن پر کلک کریں اور وہاں سے Keyboard Shortcuts منتخب کریں۔ اس کے آگے اس کا شارٹ کٹ بھی لکھا ہوتا ہے، جو کہ Command + Command + S ہے۔
اگر آپ کی بورڈ کمانڈز کے بارے میں جاننا چاہتے ہیں تو "एस" شارٹ کٹ پر کلک کریں، پھر یہاں "डिमर ममर" لکھیں، اس سے آپ کو ڈِمر کے کی بورڈ شارٹ کٹس دکھائی دیں گے۔ ڈِمر ٹوگل کے پاس آپ کو بائیں طرف پلس کا آئیکون نظر آئے گا، اس پر کلک کریں یا رائٹ کلک کریں اور یہاں اپنا نیا کی بورڈ شارٹ کٹ بنا سکتے ہیں۔ آپ اس کو اپنی مرضی کے مطابق بائنڈ کر سکتے ہیں۔ جب ہو جائے تو انٹر یا ریٹرن دبائیں (ونڈوز کے لیے)۔ پھر واپس اپنے کوڈ میں جائیں اور آٹومیٹکلی یہ ٹوگل ہو جائے گا۔
پھر سے ٹوگل ہو گیا، اب ہمیں بار بار ویو میں جا کے کمانڈ پیلیٹ میں جا کے اسے دوبارہ چلانے کی ضرورت نہیں ہے۔ ایک اور بات جو ہم دیکھتے ہیں، اگر ہم اسے دوبارہ L سے ٹوگل کریں تو آپ دیکھیں گے کہ اس نے اوپر کی تقریباً چند لائنز کو ٹوگل کر دیا ہے، نیچے کی لائنز بھی ٹوگل کرنی ہوتی ہیں، صرف ہائیلائٹ چھوڑ کر۔ جب ہم اصل ماحول میں کام کر رہے ہوتے ہیں تو ہمیں کم از کم اوپر سے دو تین لائنز اور نیچے سے دو تین لائنز ہونی چاہییں جو ہمیں نظر آ سکیں، ہائیلائٹ تاکہ ہمیں پتہ چل سکے کہ کہاں ہے۔
ہم کانٹیکٹ میں کام کر رہے ہیں، تو اگر ہم ایسا کرنا چاہتے ہیں یا اس ایکسٹینشن کی سیٹنگز بدلنی ہیں تو ہمیں اس کی سیٹنگز میں جانا پڑے گا۔ سیٹنگز کے مینو میں جانے کے تین طریقے ہیں۔ اب یہ تیسرے قدم کے طور پر ہوگا کہ آپ کون سے آپشن میں جائیں گے۔ پہلا ہے پریفرنسز، دوسرا طریقہ ہے کہ گیئر پر کلک کریں اور سیٹنگز منتخب کریں، اور تیسرا طریقہ ہے شارٹ کٹ کمانڈ کومہ دبانا۔ یہاں سیٹنگز کھل جائے گی۔ سیٹنگز میں آ کر آپ کو اس ایکسٹینشن کا نام لکھنا ہوگا جس کی سیٹنگ آپ بدلنا چاہتے ہیں۔ ہمارے کیس میں یہ ہے...
ٹمر یہاں بتا رہا ہے کہ ایکسٹینشنز کے مینو میں دو ایکسٹینشنز انسٹال ہیں، ایٹ اور بی ایس کوڈ ڈمر۔ ہم ان پر کلک کریں گے اور کہیں گے کہ کم از کم جہاں ہمارا کرسر ہے، اس کے اوپر اور نیچے تین لائنیں ہائی لائٹ ہو گئی ہیں۔ اب چلتے ہیں اپنے کوڈ پر، تو آپ دیکھیں گے کہ یہاں ایک لائن سلیکٹ کی ہوئی ہے، تو اوپر کی تین لائنیں بھی ہائی لائٹ ہو گئی ہیں اور نیچے کی تین لائنیں بھی ہائی لائٹ ہیں، باقی سب ڈم ہو گئی ہیں۔ اگر یہ آپ کو زیادہ پریشان کر رہا ہے تو آپ اس کی اوپیسٹی بھی تبدیل کر سکتے ہیں، کی بورڈ شارٹ کٹس میں جا کر سیٹنگز میں۔
ہم جائیں گے اور آپ اس کی اوپیسٹی تھوڑی کم کر دیں گے۔ مثلاً یہ 25 ہونی چاہیے۔ HTML میں جائیں گے تو آپ دیکھیں گے کہ اس کی اوپیسٹی مزید کم ہو گئی ہے۔ تو امید ہے یہ ویڈیو آپ کو فوکس کرنے اور اپنے پروڈکشن اور ڈیولپمنٹ کے ماحول کو زیادہ مؤثر بنانے میں بہت مدد دے گی۔ دیکھنے کا شکریہ۔
Change border color of vscode window using extention peacock1:52
وی ایس کوڈ میں کام کرتے ہوئے آپ کو اکثر کسی خاص کوڈ ایریا پر فوکس کرنے کی ضرورت ہوتی ہے، اس لیے بہتر یہی ہے کہ جس کوڈ پر ہم کام کر رہے ہیں، اس کے علاوہ باقی کوڈ دھندلا (ڈم) ہو جائے تاکہ فوکس کرنا آسان ہو۔ اس کے لیے ایک کوڈ کا ایکسٹینشن استعمال ہوتا ہے۔ ہم یہ ایکسٹینشن انسٹال کریں گے، پھر اس کی سیٹنگز میں جا کر دیکھیں گے کہ یہ کیسے کام کر رہا ہے۔ ایکسٹینشن تک رسائی کے لیے آپ کے پاس کئی آپشنز ہوتے ہیں، جیسے کہ لیفٹ ہینڈ سائڈ پر جو آئیکن نظر آ رہا ہے، اس پر آپ کلک کر سکتے ہیں۔
اگر آپ کریں گے تو آپ کو لکھا ہوا نظر آئے گا ایکسٹینشنز۔ دوسرا طریقہ یہ ہے کہ لیفٹ ہینڈ پر نیچے گئر آئیکن نظر آ رہا ہے، اس پر آپ کلک کریں گے تو یہاں پر بھی ایکسٹینشنز کو آپ ایکسیس کر سکتے ہیں۔ تیسرا طریقہ یہ ہے کہ اس کوڈ پر آپ کلک کریں گے، پریفرنسز، ایکسٹینشنز۔ اس کی شارٹ کٹ ہے کمانڈ شفٹ ایکس برائے ایکسٹینشنز۔ اور جس ایکسٹینشن کی ہم بات کر رہے ہیں اسے کہتے ہیں وی ایس کوڈ ڈیمّر۔ یہاں پر لکھا ہوا آ رہا ہے کوڈر۔ یہ ایکسٹینشن میں نے انسٹال کیا ہوا ہے، اسی وجہ سے اس کے آگے انسٹال کا بٹن نظر نہیں آ رہا، ورنہ جو ایکسٹینشن انسٹال نہیں ہے۔
ان کے آگے انسٹال کا بٹن آتا ہے، اس پر ہم کلک کریں گے اور انسٹال کر لیں گے۔ چونکہ پہلے سے انسٹال ہے، اس لیے یہاں ان انسٹال یا ڈس ایبل کا بٹن نظر آ رہا ہے۔ انسٹال کرنے کے بعد ہم واپس جائیں گے، اسے بند کریں گے اور اپنے اکاؤنٹ میں جائیں گے۔ اسے چلانے کا طریقہ یہ ہے کہ آپ ویو میں جائیں، پھر کمانڈ پیلیٹ میں جائیں، اور وہاں لکھیں گے "ڈمر ٹوگل" جو کہ اس ایکسٹینشن کا نام ہے۔ اس پر کلک کریں گے تو آپ دیکھیں گے کہ اس نے ڈمر ٹوگل کر دیا، یعنی جس کوڈ پر ہمارا کرسر ہے اسے ہائیلائٹ کر دیا۔
باقی تمام لائنز کو ڈِم کر دو، اگر دوبارہ اسے ٹوگل کرنا ہو تو پھر ہم ویو پر جائیں گے، کمانڈ پیلیٹ میں جائیں گے اور دوبارہ ٹوگل ڈِمر لکھ کر اسے ایکسس کریں گے، تو یہ سارا کوڈ دوبارہ ٹوگل ہو جائے گا۔ یا پھر کمانڈ پیلیٹ پر دوبارہ جائیں، یہاں اس کی شارٹ کٹ لکھی ہوئی ہے، کمانڈ شفٹ پی کو دبائیں گے تو دوبارہ آپ اسے ٹوگل کر سکتے ہیں بار بار۔ یہاں آپ کو ڈِمر لکھنے کی ضرورت نہیں کیونکہ وہ سارا کوڈ جو آپ نے حال ہی میں یوز کیا ہو، یہاں ریسنٹلی یوز کرکے شو کر دیا جاتا ہے۔ اب اگر ہمیں بار بار کوڈ کو ٹوگل کرنا ہو تو…
हम बार-बार यहां व्यू में जाएंगे, कमांड पैलेट खोलेंगे, और ये बड़ा सिरदर्द बन जाता है। इससे बचने का तरीका ये है कि हम इस टॉगल या VS कोड डिमर एक्सटेंशन को किसी की के साथ बाइंड कर दें। इसके लिए जरूरी है کہ آپ کی بورڈ شارٹ کٹ میں جا کر اسے بدلیں۔ کی بورڈ شارٹ کٹ میں جانے کا طریقہ یہ ہے کہ آپ کوڈ میں Preferences میں جائیں، پھر Keyboard Shortcuts پر کلک کریں۔ اس کا ایک طریقہ یہی ہے، اور دوسرا یہ کہ آپ لیفٹ سائڈ میں گئیر آئیکن پر کلک کریں اور وہاں سے Keyboard Shortcuts منتخب کریں۔ اس کے آگے اس کا شارٹ کٹ بھی لکھا ہوتا ہے، جو کہ Command + Command + S ہے۔
اگر آپ کی بورڈ کمانڈز کے بارے میں جاننا چاہتے ہیں تو "एस" شارٹ کٹ پر کلک کریں، پھر یہاں "डिमर ममर" لکھیں، اس سے آپ کو ڈِمر کے کی بورڈ شارٹ کٹس دکھائی دیں گے۔ ڈِمر ٹوگل کے پاس آپ کو بائیں طرف پلس کا آئیکون نظر آئے گا، اس پر کلک کریں یا رائٹ کلک کریں اور یہاں اپنا نیا کی بورڈ شارٹ کٹ بنا سکتے ہیں۔ آپ اس کو اپنی مرضی کے مطابق بائنڈ کر سکتے ہیں۔ جب ہو جائے تو انٹر یا ریٹرن دبائیں (ونڈوز کے لیے)۔ پھر واپس اپنے کوڈ میں جائیں اور آٹومیٹکلی یہ ٹوگل ہو جائے گا۔
پھر سے ٹوگل ہو گیا، اب ہمیں بار بار ویو میں جا کے کمانڈ پیلیٹ میں جا کے اسے دوبارہ چلانے کی ضرورت نہیں ہے۔ ایک اور بات جو ہم دیکھتے ہیں، اگر ہم اسے دوبارہ L سے ٹوگل کریں تو آپ دیکھیں گے کہ اس نے اوپر کی تقریباً چند لائنز کو ٹوگل کر دیا ہے، نیچے کی لائنز بھی ٹوگل کرنی ہوتی ہیں، صرف ہائیلائٹ چھوڑ کر۔ جب ہم اصل ماحول میں کام کر رہے ہوتے ہیں تو ہمیں کم از کم اوپر سے دو تین لائنز اور نیچے سے دو تین لائنز ہونی چاہییں جو ہمیں نظر آ سکیں، ہائیلائٹ تاکہ ہمیں پتہ چل سکے کہ کہاں ہے۔
ہم کانٹیکٹ میں کام کر رہے ہیں، تو اگر ہم ایسا کرنا چاہتے ہیں یا اس ایکسٹینشن کی سیٹنگز بدلنی ہیں تو ہمیں اس کی سیٹنگز میں جانا پڑے گا۔ سیٹنگز کے مینو میں جانے کے تین طریقے ہیں۔ اب یہ تیسرے قدم کے طور پر ہوگا کہ آپ کون سے آپشن میں جائیں گے۔ پہلا ہے پریفرنسز، دوسرا طریقہ ہے کہ گیئر پر کلک کریں اور سیٹنگز منتخب کریں، اور تیسرا طریقہ ہے شارٹ کٹ کمانڈ کومہ دبانا۔ یہاں سیٹنگز کھل جائے گی۔ سیٹنگز میں آ کر آپ کو اس ایکسٹینشن کا نام لکھنا ہوگا جس کی سیٹنگ آپ بدلنا چاہتے ہیں۔ ہمارے کیس میں یہ ہے...
ٹمر یہاں بتا رہا ہے کہ ایکسٹینشنز کے مینو میں دو ایکسٹینشنز انسٹال ہیں، ایٹ اور بی ایس کوڈ ڈمر۔ ہم ان پر کلک کریں گے اور کہیں گے کہ کم از کم جہاں ہمارا کرسر ہے، اس کے اوپر اور نیچے تین لائنیں ہائی لائٹ ہو گئی ہیں۔ اب چلتے ہیں اپنے کوڈ پر، تو آپ دیکھیں گے کہ یہاں ایک لائن سلیکٹ کی ہوئی ہے، تو اوپر کی تین لائنیں بھی ہائی لائٹ ہو گئی ہیں اور نیچے کی تین لائنیں بھی ہائی لائٹ ہیں، باقی سب ڈم ہو گئی ہیں۔ اگر یہ آپ کو زیادہ پریشان کر رہا ہے تو آپ اس کی اوپیسٹی بھی تبدیل کر سکتے ہیں، کی بورڈ شارٹ کٹس میں جا کر سیٹنگز میں۔
ہم جائیں گے اور آپ اس کی اوپیسٹی تھوڑی کم کر دیں گے۔ مثلاً یہ 25 ہونی چاہیے۔ HTML میں جائیں گے تو آپ دیکھیں گے کہ اس کی اوپیسٹی مزید کم ہو گئی ہے۔ تو امید ہے یہ ویڈیو آپ کو فوکس کرنے اور اپنے پروڈکشن اور ڈیولپمنٹ کے ماحول کو زیادہ مؤثر بنانے میں بہت مدد دے گی۔ دیکھنے کا شکریہ۔
Managing keybinding (keyboard shortcuts) conflicts in vscode1:48
بی ایس کوڈ میں کی بائنڈنگز کے کاندھوں کا مسئلہ بھی ہوتا ہے۔ کی بورڈ شارٹ کٹس کے کاندھوں کو حل کرنے کے لیے ضروری ہے کہ آپ کی بورڈ شارٹ کٹس میں جائیں، انہیں تلاش کریں اور مسئلہ حل کریں۔ کی بورڈ شارٹ کٹس یا کی بائنڈنگز ایک ہی بات ہیں۔ اس کا ایک طریقہ یہ ہے کہ آپ چاہیں تو یہاں کوڈ ریفرنسز میں کی بورڈ شارٹ کٹس دیکھ سکتے ہیں۔ دوسرا طریقہ یہ ہے کہ آپ لیفٹ پر موجود گئر آئیکن پر جائیں، جو کی بورڈ شارٹ کٹس کا ہے۔ تیسرا طریقہ یہ ہے کہ ہمارے پاس شارٹ کٹ کمانڈ F کے لیے، کی بورڈ کمانڈ S کے لیے شارٹ کٹس ہوتے ہیں۔ جب آپ یہاں آئیں گے تو آپ دیکھیں گے کہ کون سی کی بائنڈنگز آپس میں ٹکراتی ہیں۔
اس کو کنفیگر کرنے کے لیے ہم اس رائٹ ہینڈ کے آئیکون پر کلک کریں گے اور یہاں کوئی کی بائنڈنگ لکھ کر آ جائے گی۔ اب ہم کوئی بھی کی پریس کریں گے تو یہ ریکارڈنگ شروع کر دے گا۔ جیسے میں نے کمانڈ پریس کیا، اس نے کمانڈ کو ریکارڈ کر لیا، اور کمانڈ کے ساتھ سی بھی پریس کرتا ہوں، یعنی کمانڈ سی۔ تو یہ ہمیں دکھا دے گا کہ کمانڈ سی کی کی بائنڈنگ سے یہ کمانڈ اٹیچ ہو گئی ہے۔ اب ظاہر ہے جب میں کمانڈ سی پریس کرتا ہوں تو یہ ساری کمانڈز چل جائیں گی جو کہ نہیں ہونی چاہئیں، اور اس لیے مجھے ضروری ہے کہ میں ان کمانڈز کو ڈیلیٹ کر دوں۔
ایک سیدھا سا طریقہ ہے کہ جس کمانڈ کی بائنڈنگ آپ کو نہیں کرنی، اس پر رائٹ کلک کریں، جیسے کہ "کاپی پورٹ ایڈریس"۔ میں اس پر رائٹ کلک کروں گا، "ری سیٹ کی بائنڈنگ" پر کلک کریں، دیکھیں یوں وہ چلا گیا، یعنی اس کمانڈ کی جو بائنڈنگ تھی وہ ختم ہو گئی۔ اگر مجھے "کاپی آل" بھی ہٹانا ہے تو میں "کاپی آل" پر رائٹ کلک کروں گا اور پھر "ری سیٹ کی بائنڈنگ" پر کلک کروں گا۔
Comparing two files side by side inside vscode1:20
بی ایس کوڈ میں کی بائنڈنگز کے کاندھوں کا مسئلہ بھی ہوتا ہے۔ کی بورڈ شارٹ کٹس کے کاندھوں کو حل کرنے کے لیے ضروری ہے کہ آپ کی بورڈ شارٹ کٹس میں جائیں، انہیں تلاش کریں اور مسئلہ حل کریں۔ کی بورڈ شارٹ کٹس یا کی بائنڈنگز ایک ہی بات ہیں۔ اس کا ایک طریقہ یہ ہے کہ آپ چاہیں تو یہاں کوڈ ریفرنسز میں کی بورڈ شارٹ کٹس دیکھ سکتے ہیں۔ دوسرا طریقہ یہ ہے کہ آپ لیفٹ پر موجود گئر آئیکن پر جائیں، جو کی بورڈ شارٹ کٹس کا ہے۔ تیسرا طریقہ یہ ہے کہ ہمارے پاس شارٹ کٹ کمانڈ F کے لیے، کی بورڈ کمانڈ S کے لیے شارٹ کٹس ہوتے ہیں۔ جب آپ یہاں آئیں گے تو آپ دیکھیں گے کہ کون سی کی بائنڈنگز آپس میں ٹکراتی ہیں۔
اس کو کنفیگر کرنے کے لیے ہم اس رائٹ ہینڈ کے آئیکون پر کلک کریں گے اور یہاں کوئی کی بائنڈنگ لکھ کر آ جائے گی۔ اب ہم کوئی بھی کی پریس کریں گے تو یہ ریکارڈنگ شروع کر دے گا۔ جیسے میں نے کمانڈ پریس کیا، اس نے کمانڈ کو ریکارڈ کر لیا، اور کمانڈ کے ساتھ سی بھی پریس کرتا ہوں، یعنی کمانڈ سی۔ تو یہ ہمیں دکھا دے گا کہ کمانڈ سی کی کی بائنڈنگ سے یہ کمانڈ اٹیچ ہو گئی ہے۔ اب ظاہر ہے جب میں کمانڈ سی پریس کرتا ہوں تو یہ ساری کمانڈز چل جائیں گی جو کہ نہیں ہونی چاہئیں، اور اس لیے مجھے ضروری ہے کہ میں ان کمانڈز کو ڈیلیٹ کر دوں۔
ایک سیدھا سا طریقہ ہے کہ جس کمانڈ کی بائنڈنگ آپ کو نہیں کرنی، اس پر رائٹ کلک کریں، جیسے کہ "کاپی پورٹ ایڈریس"۔ میں اس پر رائٹ کلک کروں گا، "ری سیٹ کی بائنڈنگ" پر کلک کریں، دیکھیں یوں وہ چلا گیا، یعنی اس کمانڈ کی جو بائنڈنگ تھی وہ ختم ہو گئی۔ اگر مجھے "کاپی آل" بھی ہٹانا ہے تو میں "کاپی آل" پر رائٹ کلک کروں گا اور پھر "ری سیٹ کی بائنڈنگ" پر کلک کروں گا۔
Colorize code block to make coding experience more easy using Bracket Pair Color2:03
بی ایس کوڈ میں کی بائنڈنگز کے کاندھوں کا مسئلہ بھی ہوتا ہے۔ کی بورڈ شارٹ کٹس کے کاندھوں کو حل کرنے کے لیے ضروری ہے کہ آپ کی بورڈ شارٹ کٹس میں جائیں، انہیں تلاش کریں اور مسئلہ حل کریں۔ کی بورڈ شارٹ کٹس یا کی بائنڈنگز ایک ہی بات ہیں۔ اس کا ایک طریقہ یہ ہے کہ آپ چاہیں تو یہاں کوڈ ریفرنسز میں کی بورڈ شارٹ کٹس دیکھ سکتے ہیں۔ دوسرا طریقہ یہ ہے کہ آپ لیفٹ پر موجود گئر آئیکن پر جائیں، جو کی بورڈ شارٹ کٹس کا ہے۔ تیسرا طریقہ یہ ہے کہ ہمارے پاس شارٹ کٹ کمانڈ F کے لیے، کی بورڈ کمانڈ S کے لیے شارٹ کٹس ہوتے ہیں۔ جب آپ یہاں آئیں گے تو آپ دیکھیں گے کہ کون سی کی بائنڈنگز آپس میں ٹکراتی ہیں۔
اس کو کنفیگر کرنے کے لیے ہم اس رائٹ ہینڈ کے آئیکون پر کلک کریں گے اور یہاں کوئی کی بائنڈنگ لکھ کر آ جائے گی۔ اب ہم کوئی بھی کی پریس کریں گے تو یہ ریکارڈنگ شروع کر دے گا۔ جیسے میں نے کمانڈ پریس کیا، اس نے کمانڈ کو ریکارڈ کر لیا، اور کمانڈ کے ساتھ سی بھی پریس کرتا ہوں، یعنی کمانڈ سی۔ تو یہ ہمیں دکھا دے گا کہ کمانڈ سی کی کی بائنڈنگ سے یہ کمانڈ اٹیچ ہو گئی ہے۔ اب ظاہر ہے جب میں کمانڈ سی پریس کرتا ہوں تو یہ ساری کمانڈز چل جائیں گی جو کہ نہیں ہونی چاہئیں، اور اس لیے مجھے ضروری ہے کہ میں ان کمانڈز کو ڈیلیٹ کر دوں۔
ایک سیدھا سا طریقہ ہے کہ جس کمانڈ کی بائنڈنگ آپ کو نہیں کرنی، اس پر رائٹ کلک کریں، جیسے کہ "کاپی پورٹ ایڈریس"۔ میں اس پر رائٹ کلک کروں گا، "ری سیٹ کی بائنڈنگ" پر کلک کریں، دیکھیں یوں وہ چلا گیا، یعنی اس کمانڈ کی جو بائنڈنگ تھی وہ ختم ہو گئی۔ اگر مجھے "کاپی آل" بھی ہٹانا ہے تو میں "کاپی آل" پر رائٹ کلک کروں گا اور پھر "ری سیٹ کی بائنڈنگ" پر کلک کروں گا۔
Make a list of todos inside your coding document and manage there using vscode e3:23
ڈیولپمنٹ انوائرمنٹ میں کام کرتے ہوئے، جب ڈاکیومنٹ بہت زیادہ بڑا یا لمبا ہو جاتا ہے یا ہمارے پاس کوڈ کی لائنز بہت زیادہ ہو جاتی ہیں، تو ہم بھول جاتے ہیں کہ کس جگہ پر کیا چیز فکس یا انجیکٹ کرنی تھی۔ اس لیے ہمیں کچھ نہ کچھ نوٹس لکھ کے رکھنے پڑتے ہیں یا کچھ چیزیں ہائی لائٹ کرنی پڑتی ہیں۔ مثال کے طور پر، اگر ہم HTML کے ڈاکیومنٹ میں کام کر رہے ہیں تو ہم یہاں پر کمنٹ ایڈ کر دیتے ہیں، لیکن پھر وہ کمنٹس بھی بہت سارے کمنٹس کے اندر دبا جاتے ہیں، جیسے کہ یہ۔
بِگِن نیو دیس اینڈ نیو وہ کمنٹ بھی وی پاس اینڈ ہو جاتا ہے، اس کا طریقہ کار یوں ہوتا ہے کہ اسے بہتر طریقے سے مینیج کرنے کے لیے ہم VS کوڈ میں ایک ایکسٹینشن استعمال کرتے ہیں۔ اس کا نام ہے۔ آپ ایکسٹینشن میں جائیں گے، ایکسٹینشن ونڈو میں شارٹ کٹ کمانڈ شفٹ ایکس استعمال کریں گے، اور یہاں آ کر ہم لکھیں گے "ٹو ڈو ہائیلائٹ"۔ یہاں آپ دیکھیں گے ایک ایکسٹینشن ہے جس کا نام ہے "ٹو ڈو ہائیلائٹ"، رائٹر کا نام ہے یل۔ اس پر کلک کریں، اس کے 1.5 ملین سے زیادہ ڈاؤن لوڈ ہیں، اور ہم اسے انسٹال کر لیتے ہیں۔ اس کی جو بیسک پری بلٹ سیٹنگز ہیں ان کے اندر دو چیزیں ہیں جن کا آپ...
آپ اس کا استعمال کر سکتے ہیں۔ اب دیکھتے ہیں اس ایکسٹینشن کے یوز کیس سینریو کو۔ یہاں آپ دیکھ رہے ہیں کہ "Begin Footer" لکھا ہوا ہے۔ اگر اس فٹر میں مجھے اپنے لیے کوئی ریمائنڈر سیٹ کرنا ہو تو میں "TO DO" بڑے حروف میں لکھ دوں گا اور ایک کولن D لگا دوں گا۔ جیسے ہی میں کولن D لگاتا ہوں، آپ دیکھیں کہ اس نے اسے ہائی لائٹ کر دیا۔ اور VS کوڈ میں میں اسے کمانڈ فل کے ذریعے ایک طرح کا کمنٹ بنا دیتا ہوں اور T میں لکھ دیتا ہوں اپنا کام جو مجھے کرنا ہے، مثلاً "Make this footer mobile responsive"۔ تو جتنے بھی TO DO اس لمبے ڈاکیومنٹ کے اندر ہوں گے، ہم انہیں TO DO کے طور پر یہاں دیکھ سکتے ہیں۔
کیپٹل لیٹر میں لکھ سکتے ہیں، یعنی "ٹو ڈو"۔ یہ ایکسٹینشن انسٹال کرنے کے بعد، "ٹو ڈو" کو ہائی لائٹ کریں اور پھر "کالَم" لکھ دیں۔ اس طریقے سے جو بھی ہمارا ٹو ڈو ہوگا پورے ڈاکیومنٹ میں ہائی لائٹ ہو جائے گا اور ہمیں کہیں اور جیسے لائک جی، نوٹشن یا کسی اور ڈاکیومنٹ مینجمنٹ سسٹم میں اپنا ٹو ڈو لکھنے کی ضرورت نہیں پڑے گی۔ کیونکہ ہم وہاں ٹو ڈو لکھیں گے، یہاں آ کر ہم کریں گے کہ ہمیں کیا کرنا ہے۔ ورنہ وقت اور ذہنی توانائی ضائع ہوتی ہے۔ اس لیے بہتر ہے کہ ہم یہی کریں۔
لیکن اپنے ٹو ڈو کو منظم کریں اور ٹو ڈو کے ساتھ ایک اور چیز ہے جس کے اندر جو ہے وہ بہت زبردست ہے، آپ یہاں لکھ سکتے ہیں کوئی ایسا کام جو واقعی فکس کرنا ہو تو آپ لکھ دیں فکس می FIX ME اور اس کے بعد کولن، لیکن اس کا رنگ کچھ اور ہوتا ہے اور ٹو ڈو کا رنگ کچھ اور ہوتا ہے۔ یہ بنیادی سیٹنگ ہے، ڈیفالٹ سیٹنگ ہے اس ٹو ڈو ہائی لائٹ کی۔ پھر میں کمانڈ + / سے اسے کمنٹ بنا دوں گا اور اس میں لکھوں گا ایڈ سوشل آئیکنز۔ تو یہ ہے کہ یہ ایکسٹینشن کیسے کام کرتا ہے اور یہ آپ کے کوڈنگ ماحول میں کچھ پروڈکٹیویٹی بڑھاتا ہے۔
Rename starting and enclosing tags automatically in vscode - Auto Rename Tag ext2:05
ڈیولپمنٹ انوائرمنٹ میں کام کرتے ہوئے، جب ڈاکیومنٹ بہت زیادہ بڑا یا لمبا ہو جاتا ہے یا ہمارے پاس کوڈ کی لائنز بہت زیادہ ہو جاتی ہیں، تو ہم بھول جاتے ہیں کہ کس جگہ پر کیا چیز فکس یا انجیکٹ کرنی تھی۔ اس لیے ہمیں کچھ نہ کچھ نوٹس لکھ کے رکھنے پڑتے ہیں یا کچھ چیزیں ہائی لائٹ کرنی پڑتی ہیں۔ مثال کے طور پر، اگر ہم HTML کے ڈاکیومنٹ میں کام کر رہے ہیں تو ہم یہاں پر کمنٹ ایڈ کر دیتے ہیں، لیکن پھر وہ کمنٹس بھی بہت سارے کمنٹس کے اندر دبا جاتے ہیں، جیسے کہ یہ۔
بِگِن نیو دیس اینڈ نیو وہ کمنٹ بھی وی پاس اینڈ ہو جاتا ہے، اس کا طریقہ کار یوں ہوتا ہے کہ اسے بہتر طریقے سے مینیج کرنے کے لیے ہم VS کوڈ میں ایک ایکسٹینشن استعمال کرتے ہیں۔ اس کا نام ہے۔ آپ ایکسٹینشن میں جائیں گے، ایکسٹینشن ونڈو میں شارٹ کٹ کمانڈ شفٹ ایکس استعمال کریں گے، اور یہاں آ کر ہم لکھیں گے "ٹو ڈو ہائیلائٹ"۔ یہاں آپ دیکھیں گے ایک ایکسٹینشن ہے جس کا نام ہے "ٹو ڈو ہائیلائٹ"، رائٹر کا نام ہے یل۔ اس پر کلک کریں، اس کے 1.5 ملین سے زیادہ ڈاؤن لوڈ ہیں، اور ہم اسے انسٹال کر لیتے ہیں۔ اس کی جو بیسک پری بلٹ سیٹنگز ہیں ان کے اندر دو چیزیں ہیں جن کا آپ...
آپ اس کا استعمال کر سکتے ہیں۔ اب دیکھتے ہیں اس ایکسٹینشن کے یوز کیس سینریو کو۔ یہاں آپ دیکھ رہے ہیں کہ "Begin Footer" لکھا ہوا ہے۔ اگر اس فٹر میں مجھے اپنے لیے کوئی ریمائنڈر سیٹ کرنا ہو تو میں "TO DO" بڑے حروف میں لکھ دوں گا اور ایک کولن D لگا دوں گا۔ جیسے ہی میں کولن D لگاتا ہوں، آپ دیکھیں کہ اس نے اسے ہائی لائٹ کر دیا۔ اور VS کوڈ میں میں اسے کمانڈ فل کے ذریعے ایک طرح کا کمنٹ بنا دیتا ہوں اور T میں لکھ دیتا ہوں اپنا کام جو مجھے کرنا ہے، مثلاً "Make this footer mobile responsive"۔ تو جتنے بھی TO DO اس لمبے ڈاکیومنٹ کے اندر ہوں گے، ہم انہیں TO DO کے طور پر یہاں دیکھ سکتے ہیں۔
کیپٹل لیٹر میں لکھ سکتے ہیں، یعنی "ٹو ڈو"۔ یہ ایکسٹینشن انسٹال کرنے کے بعد، "ٹو ڈو" کو ہائی لائٹ کریں اور پھر "کالَم" لکھ دیں۔ اس طریقے سے جو بھی ہمارا ٹو ڈو ہوگا پورے ڈاکیومنٹ میں ہائی لائٹ ہو جائے گا اور ہمیں کہیں اور جیسے لائک جی، نوٹشن یا کسی اور ڈاکیومنٹ مینجمنٹ سسٹم میں اپنا ٹو ڈو لکھنے کی ضرورت نہیں پڑے گی۔ کیونکہ ہم وہاں ٹو ڈو لکھیں گے، یہاں آ کر ہم کریں گے کہ ہمیں کیا کرنا ہے۔ ورنہ وقت اور ذہنی توانائی ضائع ہوتی ہے۔ اس لیے بہتر ہے کہ ہم یہی کریں۔
لیکن اپنے ٹو ڈو کو منظم کریں اور ٹو ڈو کے ساتھ ایک اور چیز ہے جس کے اندر جو ہے وہ بہت زبردست ہے، آپ یہاں لکھ سکتے ہیں کوئی ایسا کام جو واقعی فکس کرنا ہو تو آپ لکھ دیں فکس می FIX ME اور اس کے بعد کولن، لیکن اس کا رنگ کچھ اور ہوتا ہے اور ٹو ڈو کا رنگ کچھ اور ہوتا ہے۔ یہ بنیادی سیٹنگ ہے، ڈیفالٹ سیٹنگ ہے اس ٹو ڈو ہائی لائٹ کی۔ پھر میں کمانڈ + / سے اسے کمنٹ بنا دوں گا اور اس میں لکھوں گا ایڈ سوشل آئیکنز۔ تو یہ ہے کہ یہ ایکسٹینشن کیسے کام کرتا ہے اور یہ آپ کے کوڈنگ ماحول میں کچھ پروڈکٹیویٹی بڑھاتا ہے۔
create meaningful consol log comment uncomment and delete them using shortcuts -4:02
ڈویلپمنٹ کے دوران آپ کو اکثر اپنے ویری ایبل کو کنسول میں لاک کرنے کی ضرورت پڑتی ہے، خاص طور پر جب آپ کسی بڑی فائل پر کام کر رہے ہوں جس میں بہت زیادہ لائنز آف کوڈ ہوں۔ ایسے میں کنسول کو لاک کرنا آپ کے لیے ایک درد سر بن جاتا ہے، اور خاص طور پر جب آپ کسی ایسے ویری ایبل کو لکھ رہے ہوں جس کا نام بہت لمبا ہو۔ عام طور پر ہم ڈویلپرز کیا کرتے ہیں، ایک جاوا اسکرپٹ کی فائل کھول لیتے ہیں، جس میں ایک ویری ایبل ہوتا ہے جیسے "کیٹی لے آؤٹ سرچ"۔ عام طور پر ہم کیا کرتے ہیں، لکھتے ہیں کنسول ڈایلاگ پر، پھر "اوپن کیٹی"۔ اب مجھے اسے مکمل یا...
تو پھر ٹائپ کرنا پڑے گا یا اسے کاپی پیسٹ کرنا پڑے گا، اسی طرح جا کے کنسول میں لاگ ہوگا اور جتنے بھی ویریبلز ہیں اگر مجھے ڈی بگ کرنا ہے اور اس کا ریسپانس دیکھنا ہے تو یہ کام مجھے بار بار کرنا پڑے گا۔ اس اپروچ کا دوسرا نقصان یہ ہے کہ مجھے معلوم نہیں ہو پائے گا کہ یہ ویریبل کون سی لائن پر ہے اور کون سی فائل میں موجود ہے۔ تو اس کے لیے ہم کیا کرتے ہیں؟ سی ایس کوڈ میں ایک ایکسٹینشن استعمال ہوتا ہے، جو ہم اپنے ایکسٹینشن ڈائریکٹری میں جان کر بھی ایکسیس کر سکتے ہیں۔
یہ سیٹنگز کے مینو میں ہے، یہاں سے ایکسس کر سکتے ہیں اور کوٹ کے درمیان رفرنس سے بھی ایکسس کر سکتے ہیں۔ ایکسٹینشن کا شارٹ کٹ ہے کمانڈ شفٹ ایکس۔ یہاں جائیں گے اور لکھیں گے ٹربو لاگ۔ تو آپ دیکھ رہے ہیں کہ ایک ٹربو کنسول لاگ کے نام سے ایک ایکسٹینشن ہے، اس کے 195000 ڈاؤنلوڈز ہیں، 4.5 ریویوز ہیں، اور اسٹار ریویوز بھی ہیں۔ اسے انسٹال کریں۔ انسٹال کرنے کے بعد اپنی فائل میں واپس آ جائیں۔ اب دیکھتے ہیں کہ ہمارے لیے کام کرنا کتنا آسان ہو گیا ہے۔ اس کنسول لاگ کو ڈیلیٹ کریں، ویریبل کو سلیکٹ کریں اور شارٹ کٹ پریس کریں۔
آلٹ کنٹرول ایل کریں، دیکھو یہ ویریئبل کا کنسول خود بخود بن گیا ہے۔ یہاں یہ ویریئبل آگیا ہے، جس سے ہمارا کام کافی آسان ہو گیا ہے۔ یہاں ایک اور ویریئبل ہے، کے ٹی لے آؤٹ اسکرول ٹاپ، اسے بھی آلٹ کنٹرول ایل کریں۔ دیکھو، ایک اور کنسول لاگ بن گیا ہے۔ اس کا دوسرا فائدہ یہ ہے کہ یہ لاگ نہ صرف خود بخود بن رہا ہے، بلکہ اس کنسول لاگ والے ویریئبل کے بارے میں بھی بتا رہا ہے کہ یہ کس لائن پر ہے، 1096، اور کس فائل میں ہے، جیسے اسکرپٹ بَنڈل۔
اگر آپ چاہتے ہیں کہ ڈیبگنگ آسان ہو جائے اور آپ کا کام کرنے کا ماحول بہتر بن جائے، تو اگر آپ کو سارے کنسول لوگز ڈیلیٹ کرنے ہوں تو کنسول ڈیلیٹ کرنے کا طریقہ یہ ہے کہ یا تو آپ اسے کمنٹ کر دیں یعنی کمانڈ + فارورڈ سلیش لگائیں۔ اور اگر بہت سارے ہوں تو آپ کو ہر جگہ جا کے اسے فائنڈ کر کے کمنٹ کرنا پڑے گا۔ لیکن اگر آپ نے یہ ایکسٹینشن انسٹال کی ہوئی ہے تو اس کے لیے آپ لڈ شفٹ سی دبائیں، تو دیکھیں جو دونوں لائنز اس ایکسٹینشن سے بنی تھیں وہ دونوں کمنٹ ہو جائیں گی۔
اگر کمنٹ کرنا ہے تو میں پریس کروں گا آلٹ شفٹ Y یو فار کمنٹ، اور دیکھو دونوں کمنٹ ہو گئے۔ اگر مجھے اس کنسول لاک کو ڈیلیٹ کرنا ہے تو آلٹ شفٹ D دباؤ۔ شارٹ کٹس بہت آسان ہیں۔ ہر چیز آلٹ سے شروع ہوتی ہے یا میک یوزرز کے لیے آپشن سے۔ آپشن کلک کرو گے یا ونڈوز یوزرز آلٹ کلک کریں گے۔ آلٹ کنٹرول L فار کنسول لاگ، آلٹ شفٹ C فار کمنٹ، آلٹ شفٹ Y فار انکمنٹ، اور آلٹ شفٹ D فار ڈیلیٹ۔ بس، تھینک یو۔
making live changes to coding files using live server vscode extention2:41
ڈویلپمنٹ کے دوران آپ کو اکثر اپنے ویری ایبل کو کنسول میں لاک کرنے کی ضرورت پڑتی ہے، خاص طور پر جب آپ کسی بڑی فائل پر کام کر رہے ہوں جس میں بہت زیادہ لائنز آف کوڈ ہوں۔ ایسے میں کنسول کو لاک کرنا آپ کے لیے ایک درد سر بن جاتا ہے، اور خاص طور پر جب آپ کسی ایسے ویری ایبل کو لکھ رہے ہوں جس کا نام بہت لمبا ہو۔ عام طور پر ہم ڈویلپرز کیا کرتے ہیں، ایک جاوا اسکرپٹ کی فائل کھول لیتے ہیں، جس میں ایک ویری ایبل ہوتا ہے جیسے "کیٹی لے آؤٹ سرچ"۔ عام طور پر ہم کیا کرتے ہیں، لکھتے ہیں کنسول ڈایلاگ پر، پھر "اوپن کیٹی"۔ اب مجھے اسے مکمل یا...
تو پھر ٹائپ کرنا پڑے گا یا اسے کاپی پیسٹ کرنا پڑے گا، اسی طرح جا کے کنسول میں لاگ ہوگا اور جتنے بھی ویریبلز ہیں اگر مجھے ڈی بگ کرنا ہے اور اس کا ریسپانس دیکھنا ہے تو یہ کام مجھے بار بار کرنا پڑے گا۔ اس اپروچ کا دوسرا نقصان یہ ہے کہ مجھے معلوم نہیں ہو پائے گا کہ یہ ویریبل کون سی لائن پر ہے اور کون سی فائل میں موجود ہے۔ تو اس کے لیے ہم کیا کرتے ہیں؟ سی ایس کوڈ میں ایک ایکسٹینشن استعمال ہوتا ہے، جو ہم اپنے ایکسٹینشن ڈائریکٹری میں جان کر بھی ایکسیس کر سکتے ہیں۔
یہ سیٹنگز کے مینو میں ہے، یہاں سے ایکسس کر سکتے ہیں اور کوٹ کے درمیان رفرنس سے بھی ایکسس کر سکتے ہیں۔ ایکسٹینشن کا شارٹ کٹ ہے کمانڈ شفٹ ایکس۔ یہاں جائیں گے اور لکھیں گے ٹربو لاگ۔ تو آپ دیکھ رہے ہیں کہ ایک ٹربو کنسول لاگ کے نام سے ایک ایکسٹینشن ہے، اس کے 195000 ڈاؤنلوڈز ہیں، 4.5 ریویوز ہیں، اور اسٹار ریویوز بھی ہیں۔ اسے انسٹال کریں۔ انسٹال کرنے کے بعد اپنی فائل میں واپس آ جائیں۔ اب دیکھتے ہیں کہ ہمارے لیے کام کرنا کتنا آسان ہو گیا ہے۔ اس کنسول لاگ کو ڈیلیٹ کریں، ویریبل کو سلیکٹ کریں اور شارٹ کٹ پریس کریں۔
آلٹ کنٹرول ایل کریں، دیکھو یہ ویریئبل کا کنسول خود بخود بن گیا ہے۔ یہاں یہ ویریئبل آگیا ہے، جس سے ہمارا کام کافی آسان ہو گیا ہے۔ یہاں ایک اور ویریئبل ہے، کے ٹی لے آؤٹ اسکرول ٹاپ، اسے بھی آلٹ کنٹرول ایل کریں۔ دیکھو، ایک اور کنسول لاگ بن گیا ہے۔ اس کا دوسرا فائدہ یہ ہے کہ یہ لاگ نہ صرف خود بخود بن رہا ہے، بلکہ اس کنسول لاگ والے ویریئبل کے بارے میں بھی بتا رہا ہے کہ یہ کس لائن پر ہے، 1096، اور کس فائل میں ہے، جیسے اسکرپٹ بَنڈل۔
اگر آپ چاہتے ہیں کہ ڈیبگنگ آسان ہو جائے اور آپ کا کام کرنے کا ماحول بہتر بن جائے، تو اگر آپ کو سارے کنسول لوگز ڈیلیٹ کرنے ہوں تو کنسول ڈیلیٹ کرنے کا طریقہ یہ ہے کہ یا تو آپ اسے کمنٹ کر دیں یعنی کمانڈ + فارورڈ سلیش لگائیں۔ اور اگر بہت سارے ہوں تو آپ کو ہر جگہ جا کے اسے فائنڈ کر کے کمنٹ کرنا پڑے گا۔ لیکن اگر آپ نے یہ ایکسٹینشن انسٹال کی ہوئی ہے تو اس کے لیے آپ لڈ شفٹ سی دبائیں، تو دیکھیں جو دونوں لائنز اس ایکسٹینشن سے بنی تھیں وہ دونوں کمنٹ ہو جائیں گی۔
اگر کمنٹ کرنا ہے تو میں پریس کروں گا آلٹ شفٹ Y یو فار کمنٹ، اور دیکھو دونوں کمنٹ ہو گئے۔ اگر مجھے اس کنسول لاک کو ڈیلیٹ کرنا ہے تو آلٹ شفٹ D دباؤ۔ شارٹ کٹس بہت آسان ہیں۔ ہر چیز آلٹ سے شروع ہوتی ہے یا میک یوزرز کے لیے آپشن سے۔ آپشن کلک کرو گے یا ونڈوز یوزرز آلٹ کلک کریں گے۔ آلٹ کنٹرول L فار کنسول لاگ، آلٹ شفٹ C فار کمنٹ، آلٹ شفٹ Y فار انکمنٹ، اور آلٹ شفٹ D فار ڈیلیٹ۔ بس، تھینک یو۔
saving and syncing your settings and coding environment and replicating in other3:58
ڈویلپمنٹ کے دوران آپ کو اکثر اپنے ویری ایبل کو کنسول میں لاک کرنے کی ضرورت پڑتی ہے، خاص طور پر جب آپ کسی بڑی فائل پر کام کر رہے ہوں جس میں بہت زیادہ لائنز آف کوڈ ہوں۔ ایسے میں کنسول کو لاک کرنا آپ کے لیے ایک درد سر بن جاتا ہے، اور خاص طور پر جب آپ کسی ایسے ویری ایبل کو لکھ رہے ہوں جس کا نام بہت لمبا ہو۔ عام طور پر ہم ڈویلپرز کیا کرتے ہیں، ایک جاوا اسکرپٹ کی فائل کھول لیتے ہیں، جس میں ایک ویری ایبل ہوتا ہے جیسے "کیٹی لے آؤٹ سرچ"۔ عام طور پر ہم کیا کرتے ہیں، لکھتے ہیں کنسول ڈایلاگ پر، پھر "اوپن کیٹی"۔ اب مجھے اسے مکمل یا...
تو پھر ٹائپ کرنا پڑے گا یا اسے کاپی پیسٹ کرنا پڑے گا، اسی طرح جا کے کنسول میں لاگ ہوگا اور جتنے بھی ویریبلز ہیں اگر مجھے ڈی بگ کرنا ہے اور اس کا ریسپانس دیکھنا ہے تو یہ کام مجھے بار بار کرنا پڑے گا۔ اس اپروچ کا دوسرا نقصان یہ ہے کہ مجھے معلوم نہیں ہو پائے گا کہ یہ ویریبل کون سی لائن پر ہے اور کون سی فائل میں موجود ہے۔ تو اس کے لیے ہم کیا کرتے ہیں؟ سی ایس کوڈ میں ایک ایکسٹینشن استعمال ہوتا ہے، جو ہم اپنے ایکسٹینشن ڈائریکٹری میں جان کر بھی ایکسیس کر سکتے ہیں۔
یہ سیٹنگز کے مینو میں ہے، یہاں سے ایکسس کر سکتے ہیں اور کوٹ کے درمیان رفرنس سے بھی ایکسس کر سکتے ہیں۔ ایکسٹینشن کا شارٹ کٹ ہے کمانڈ شفٹ ایکس۔ یہاں جائیں گے اور لکھیں گے ٹربو لاگ۔ تو آپ دیکھ رہے ہیں کہ ایک ٹربو کنسول لاگ کے نام سے ایک ایکسٹینشن ہے، اس کے 195000 ڈاؤنلوڈز ہیں، 4.5 ریویوز ہیں، اور اسٹار ریویوز بھی ہیں۔ اسے انسٹال کریں۔ انسٹال کرنے کے بعد اپنی فائل میں واپس آ جائیں۔ اب دیکھتے ہیں کہ ہمارے لیے کام کرنا کتنا آسان ہو گیا ہے۔ اس کنسول لاگ کو ڈیلیٹ کریں، ویریبل کو سلیکٹ کریں اور شارٹ کٹ پریس کریں۔
آلٹ کنٹرول ایل کریں، دیکھو یہ ویریئبل کا کنسول خود بخود بن گیا ہے۔ یہاں یہ ویریئبل آگیا ہے، جس سے ہمارا کام کافی آسان ہو گیا ہے۔ یہاں ایک اور ویریئبل ہے، کے ٹی لے آؤٹ اسکرول ٹاپ، اسے بھی آلٹ کنٹرول ایل کریں۔ دیکھو، ایک اور کنسول لاگ بن گیا ہے۔ اس کا دوسرا فائدہ یہ ہے کہ یہ لاگ نہ صرف خود بخود بن رہا ہے، بلکہ اس کنسول لاگ والے ویریئبل کے بارے میں بھی بتا رہا ہے کہ یہ کس لائن پر ہے، 1096، اور کس فائل میں ہے، جیسے اسکرپٹ بَنڈل۔
اگر آپ چاہتے ہیں کہ ڈیبگنگ آسان ہو جائے اور آپ کا کام کرنے کا ماحول بہتر بن جائے، تو اگر آپ کو سارے کنسول لوگز ڈیلیٹ کرنے ہوں تو کنسول ڈیلیٹ کرنے کا طریقہ یہ ہے کہ یا تو آپ اسے کمنٹ کر دیں یعنی کمانڈ + فارورڈ سلیش لگائیں۔ اور اگر بہت سارے ہوں تو آپ کو ہر جگہ جا کے اسے فائنڈ کر کے کمنٹ کرنا پڑے گا۔ لیکن اگر آپ نے یہ ایکسٹینشن انسٹال کی ہوئی ہے تو اس کے لیے آپ لڈ شفٹ سی دبائیں، تو دیکھیں جو دونوں لائنز اس ایکسٹینشن سے بنی تھیں وہ دونوں کمنٹ ہو جائیں گی۔
اگر کمنٹ کرنا ہے تو میں پریس کروں گا آلٹ شفٹ Y یو فار کمنٹ، اور دیکھو دونوں کمنٹ ہو گئے۔ اگر مجھے اس کنسول لاک کو ڈیلیٹ کرنا ہے تو آلٹ شفٹ D دباؤ۔ شارٹ کٹس بہت آسان ہیں۔ ہر چیز آلٹ سے شروع ہوتی ہے یا میک یوزرز کے لیے آپشن سے۔ آپشن کلک کرو گے یا ونڈوز یوزرز آلٹ کلک کریں گے۔ آلٹ کنٹرول L فار کنسول لاگ، آلٹ شفٹ C فار کمنٹ، آلٹ شفٹ Y فار انکمنٹ، اور آلٹ شفٹ D فار ڈیلیٹ۔ بس، تھینک یو۔
Make vscode working environment more visually appealing and user experience bett1:36
بی ایس کوڈ کے ماحول کو زیادہ پرودکٹیو اور دیکھنے میں دلکش بنانے کے لیے، یوزر ایکسپیریئنس کو بہتر کرنے کے لیے ہم اس میں ایک اور ایکسٹینشن شامل کر سکتے ہیں۔ آپ بائیں طرف دیکھ رہے ہیں، ہم نے فائل ایکسپلورر کھولا ہوا ہے، یہاں CSS کی فائلز ہیں، HTML ہے، نیچے MP4 فائل ہے، جن فائلز ہیں اور کچھ فولڈرز وغیرہ ہیں۔ اسے بہتر طریقے سے آسانی سے پہچاننے کے لیے ایکسٹینشن استعمال کی جاتی ہے۔ ہم ایکسٹینشنز کے سیکشن میں جائیں گے اور وہاں سرچ کریں گے، ایکسٹینشنز میں جا کر لکھیں گے "آئیکن"، یہاں آپ کو دو ریپوزیٹریز نظر آئیں گی۔
آئے گا ایک میٹریل آئیکن تھیم جس کے 6.2 ملین ڈاؤنلوڈز ہیں اور پانچ ستارے کی ریٹنگ ہے، اور دوسرا وی ایس کوڈ آئیکن ہے۔ آپ ان دونوں میں سے کوئی بھی استعمال کر سکتے ہیں۔ میں ذاتی طور پر میٹریل والا پسند کرتا ہوں، تو اس پر کلک کرتے ہیں اور اسے انسٹال کرتے ہیں۔ چلیں دیکھتے ہیں کہ کیا تبدیلیاں نظر آتی ہیں۔ دوبارہ آتے ہیں ایکسپلورر میں، تو دیکھیں یہاں سب فولڈرز اور فائلز کے آئیکنز بدل گئے ہیں۔ لے آؤٹ میں لے آؤٹ کی قسم کا آئیکن آ گیا ہے۔ جاوا اسکرپٹ فائل کے پیچھے "JS" لکھا ہوا آ رہا ہے، HTML فائل کے پیچھے اس کا اپنا آئیکن ہے، اور ویڈیو فائل کے پیچھے ویڈیو کا آئیکن۔
یہ جاوا اسکرپٹ فائل ہے اور یہ JSON فائل ہے۔ جب ہر قسم کے ٹولز کے پیچھے ٹولز کے آئیکنز ہوتے ہیں تو یہ زیادہ بہتر اور دیکھنے میں اچھا لگتا ہے، اور اس سے یوزر کا تجربہ بھی بہتر ہو سکتا ہے جب آپ کام کرتے جائیں۔
cdnjs extention VSCode - How to use any cdn library directly inside vscode4:23
عام طور پر جب ہم گٹ ہب کی کوئی ریپوزیٹری یا اوپن سورس کوڈ وغیرہ استعمال کرتے ہیں تو اس کے لیے ایک لمبا سا پروسیس ہوتا ہے۔ مثلاً آپ گٹ ہب پر گئے اور دیکھا کہ یہاں پر کوئی CSS کی لائبریری ملتی ہے، جیسے کہ Airbnb کی بہترین میچز کو شارٹ آؤٹ کرتی ہے، سب سے زیادہ اسٹارز والی لائبریریز دیکھیں، جیسے Bootstrap جو کہ 149,000 اسٹارز کے ساتھ سب سے اوپر ہے۔ پھر بہترین Electron JS ہے جس کے اوپر خود VS Code بنایا گیا ہے۔ VS Code بھی اسی کے اوپر بنا ہوا ہے۔ یہ اصل میں کراس پلیٹ فارم ڈیسک ٹاپ ایپس بنانے کی لائبریری ہے جو جاوا اسکرپٹ اور HTML پر مبنی ہے۔
سی ایس ایس کے ذریعے وی ایس کوڈ کا کمال یہ ہے کہ یہ جاوا اسکرپٹ کے ذریعے بنایا گیا ہے، ایچ ٹی ایم ایل اور سی ایس ایس پر مبنی ہے۔ اس میں کوئی بیک اینڈ کی زبان یا جاوا وغیرہ استعمال نہیں ہوئی۔ کوئی ڈیسک ٹاپ زبان بھی استعمال نہیں ہوئی۔ صرف ایچ ٹی ایم ایل، سی ایس ایس اور جاوا اسکرپٹ کے ذریعے ہی اسے بنایا گیا ہے۔ تو یہ الیکٹران جے ایس کے اوپر بیس کرتا ہے۔ یہ ایک لائبریری ہے جو ہمیں نظر آ رہی ہے، ایمیٹ سی ایس ایس، اور اس کا ورژن 69.3 ہے۔ بہت زبردست اینیمیشن کی لائبریری ہے، اس سے بہتر لائبریری اس وقت موجود نہیں ہے۔ عام طور پر اگر ہم سی ایس ایس کی بات کریں۔۔۔
اگر آپ اس لائبریری کو اپنے کوڈ میں استعمال کرنا چاہتے ہیں تو اس کے دو تین طریقے ہوتے ہیں۔ ایک یہ کہ آپ اسے کسی CDN سے لے کر اس کا لنک اپنے کوڈ میں پیسٹ کر دیں۔ دوسرا طریقہ یہ ہے کہ آپ اس کوڈ کو اپنے پاس ڈاؤنلوڈ کریں، اس کی فائلز کو اپنے CSS فولڈر میں رکھیں اور JS کی فائلز کو JS فولڈر میں ڈالیں، پھر انہیں لنک کر دیں۔ لیکن یہ طریقہ کافی لمبا اور پیچیدہ لگتا ہے۔ انہوں نے انسٹالیشن کا طریقہ بھی دیا ہوا ہے۔ اگر آپ npm استعمال کر رہے ہیں تو ہم آپ کو ایک آسان سا طریقہ بتاتے ہیں۔
اب ہم VS کوڈ میں جائیں گے اور اس کے ایکسٹینشن کے مینو میں جائیں گے، وہاں جا کر ہم لکھیں گے "CDN JS"۔ یہاں آپ دیکھ سکتے ہیں کہ ایک ایکسٹینشن بنا ہوا ہے "CDN JS" کا، اسے انسٹال کر لیتے ہیں۔ انسٹال کرنے کے بعد ہم واپس اپنے کوڈ میں آئیں گے، HTML فائل کو بند کر دیں گے اور اپنی سائیڈ بار بھی بند کر دیں گے۔ اب یہاں ہمیں وہ Animate.css استعمال کرنی ہے، وہ بھی VS کوڈ کے اندر ہی۔ اس کے لیے ہمیں کیا کرنا ہوگا؟ ہم "Command + Shift + P" پریس کریں گے اور وہاں لکھیں گے "CDN JS"۔
دیکھو یہاں تین آپشن آ رہے ہیں، سرچ فار لائبریری پر ہم انٹر پریس کریں گے، اور یہاں ہم اپنی لائبریری کا نام لکھیں گے جو گٹ ہب پر اوپن سورس پڑی ہوئی ہے۔ اینیمیٹ۔ اب یہ بتا رہا ہے کہ ایٹ کے نام سے بہت سی صحیح لائبریریاں ہیں، ہمیں in.css استعمال کرنی ہے، اسے کلک کرتے ہیں، اور اس کے اندر جو اس کا تازہ ترین ورژن ہے، 4.1.1، اسے استعمال کرتے ہیں۔ اس کے اندر ہم اٹھاتے ہیں add min.css۔ اب یہ ہمیں آپشن دے رہا ہے کہ کیا اس کا لنک ڈاکیومنٹ میں انسرت کرنا ہے؟ ہاں، ہمیں اس کا لنک ہی انسرت کرنا ہے کیونکہ آپ دیکھ رہے ہیں کہ۔۔۔
یہاں پر لنک کس طرح انسرت ہو رہا ہے، ہم یہ سب کچھ لکھنا نہیں چاہتے۔ ہم یہ HREF والا لنک بھی کہیں سے اٹھا کر کاپی پیسٹ نہیں کرنا چاہتے۔ ہم چاہتے ہیں کہ یہ سارا کام آٹومیشن سے خود بخود اسی طرح کے فارمیٹ میں ہو جائے، اور اسے ہم یہاں بھی پیسٹ کر سکیں، کہیں اور بھی پیسٹ کر سکیں۔ تیسرا طریقہ یہ ہے کہ اس کا URL ڈاکیومنٹ کے اندر یہاں انسرت ہو جائے۔ اگر ہم اس URL کو سلیکٹ کریں گے تو صرف وہی URL آئے گا اور یہ لنک ہمیں اور اس کا ریلیشن وغیرہ ساری چیزیں خود سے لکھنی پڑیں گی۔
اسی طرح ہم اسے براؤزر میں CDN کے ذریعے اوپن کرنا چاہتے ہیں، لیکن ہمیں وہ نہیں کرنا۔ ہمارا کام ہوگا کہ لنک ڈاکیومنٹ میں انسرت کریں۔ اب دیکھیں، یہ CDN سرور سے یا کلاؤڈ فلیر کے سرور سے انہوں نے CDN اٹھا لی ہے، یعنی min.css کی، اور یہ پورا کوڈ انہوں نے خود لکھ دیا ہے۔ اب اگر min.css کا کوئی بھی built-in کوڈ اس کی ڈاکیومنٹیشن پڑھ کے GitHub پر جا کے میں استعمال کرنا چاہوں، تو وہاں جا کے اس کی ڈاکیومنٹیشن پڑھ کر میں اسے استعمال کر سکتا ہوں۔
یہاں پر آپ آسانی سے استعمال کر سکتے ہیں۔
VScode extention - liveshare4:09
کل ایکسٹینشن کے بارے میں بات کریں گے، جو کہ لائف شیئر ہے۔ لائف شیئر کے ذریعے آپ کیا کرتے ہیں؟ آپ ایک اسکرین کو شیئر کرتے ہیں متعدد کولیگز کے ساتھ تاکہ وہ آپ کے ساتھ مل کر کوڈ ایڈیٹ کر سکیں یا آپ کا کوڈ دیکھ سکیں، یا آپ کسی کو گائیڈ کرنا چاہتے ہیں، آن لائن اپنا کوڈ اور اسکرین دکھا کر۔ تو آپ یہ سب کر سکتے ہیں۔ یہ دونوں طریقے سے ہو سکتا ہے۔ ظاہر ہے آپ اس کے لیے کوئی بھی اسکرین شیئرنگ ایپلیکیشن بھی استعمال کر سکتے ہیں، جیسے کہ زوم کال، لیکن زوم میں وہ آپ کی اسکرین کے ساتھ مل کر...
اسے ایڈٹ نہیں کر سکے گا، تو لائیو شیئر کا ایک اچھا فائدہ یہ ہے کہ آپ کئی ڈیولپرز ایک ہی فائل پر کام کر سکتے ہیں۔ اس کے لیے آپ کو کیا کرنا ہوتا ہے کہ آپ ایکسٹینشنز میں جاتے ہیں اور وہاں لکھتے ہیں لائیو۔ یہاں لائیو شیئر کا ایک ایکسٹینشن نظر آئے گا جو مائیکروسافٹ کا ہے، نیچے لکھا ہوگا 4 ملین ڈاؤن لوڈز اور 4.5 کی ریٹنگ۔ اس پر کلک کریں گے اور انسٹال کریں گے۔ انسٹال ہونے کے بعد یہاں آ جائے گا، انسٹال ہوتے ہی آپ کو جانا ہے اور اپنی اسکرین شیئر کرنی ہے۔ جیسے ہی آپ شیئر کریں گے...
جب آپ بٹن پر کلک کریں گے تو یہ آپ سے آتھنٹیکیشن مانگے گا، یا تو گٹ ہب کی یا مائیکروسافٹ کے اکاؤنٹ کی۔ اسے اپنے گٹ ہب یا مائیکروسافٹ اکاؤنٹ سے آتھنٹیکیٹ کروا لیں۔ نیچے آپ دیکھیں گے کہ "سٹارٹنگ کوبرا کولیب سیشن" لکھا ہوا ہے اور یہ بتا رہا ہے کہ انوائٹیشن لنک کلپ بورڈ پر کاپی کر دیا گیا ہے۔ آپ یہ لنک کسی کو بھی بھیج سکتے ہیں۔ اگر آپ دوبارہ انوائٹیشن لنک کو کاپی کرنا چاہیں تو "کاپی اگین" کے بٹن پر کلک کر دیں۔ لیکن اگر آپ نہیں کرنا چاہتے تو اسے بند بھی کر سکتے ہیں۔ اس کے بعد ہم یہاں جائیں گے اور اسے اوپن کریں گے۔
کوئی سی فائل اوپن کریں، فولڈر میں جائیں اور چلیں ڈیسک ٹاپ پر جہاں ایک فائل رکھی ہے index.htm۔ اس کو ہم نے اوپن کیا، پھر سائڈ بار کو کمانڈ بی سے بند کر دیا۔ اب ایک دوسرے ڈیولپر کی اسکرین دکھاتے ہیں جس کو آپ یہ لنک شیئر کرنے والے ہیں۔ فرض کریں وہ دوسرا ڈیولپر ہے، تو اسے ہم ڈیولپر ٹو کہہ لیتے ہیں، یا ڈیولپر بی کہہ سکتے ہیں، یا کولیب بھی کہہ سکتے ہیں۔ لائیو شیئر کا ایکسٹینشن اسے بھی انسٹال کرنا پڑے گا۔ اس کے بعد آپ کیا کریں گے کہ انسٹال کرنے کے بعد وہ دوسرا ڈیولپر اس پر کلک کرے گا اور جوائن کے بٹن پر کلک کرے گا یہاں۔
جیسے ہی آپ "جوائن" کے بٹن پر کلک کریں گے، یہ پوچھے گا کہ کون سا لنک ہے، تو دوسرے ڈیولپر کو آپ WhatsApp میں دو بار کر کے، "Ctrl + B" کریں اور دیکھیں یہ دوسرے ڈیولپر کی اسکرین ہے۔ اگر یہ دوسرا ڈیولپر یہاں پر لکھتا ہے "Add Header Status" اور دیکھیں اس کا کرسر یہاں پر ہے، "Hair" کے آگے۔ پہلے ڈیولپر کی اسکرین چیک کرتے ہیں تو دیکھیں پہلے ڈیولپر کی اسکرین پر بھی یہ کوڈ آ گیا، حالانکہ یہ پہلے وہاں نہیں تھا۔ اور دوسرے ڈیولپر کا جو کرسر ہے وہ یہاں پر ہے، یہ نارنجی رنگ کا آپ کو دکھ رہا ہے۔ اسی طرح اگر پہلا ڈیولپر...
یہاں پر کوئی یول ایل آئی ایڈ کرتا ہے، مثال کے طور پر پہلے ڈیولپر نے ایڈ کیا، اور پہلے ڈیولپر کا جو کرسر ہے وہ بلکل حرکت کر رہا ہے۔ اب ایل آئی کے درمیان دوسرے ڈیولپر کی اسکرین پر چلتے ہیں، تو آپ دیکھیں دوسرے ڈیولپر کی اسکرین پر بھی یہی کوڈ آ گیا ہے، اور پہلے ڈیولپر کا جہاں کرسر ہے وہ پنک کلر میں یہاں دکھائی دے رہا ہے۔ تو اس طرح آپ چیزیں سیو کر سکتے ہیں، دونوں ڈیولپرز مل کے کام کر سکتے ہیں، اور اپنے کلائنٹ کے ساتھ بھی اسکرین شیئر کر سکتے ہیں۔

Understanding Workspaces in VScode3:11
چلو بات کرتے ہیں ورک اسپیس کی۔ ورک اسپیس ایک طرح کا اسمارٹ فولڈر ہوتا ہے جس میں آپ مختلف جگہوں سے بے تعلق کئی فولڈرز شامل کر سکتے ہیں تاکہ اگلی بار آپ کو الگ الگ جگہوں سے فولڈرز اٹھا کر ایک جگہ جمع نہ کرنا پڑے۔ یہ آپ کے ورک فلو کو آسان بنا دیتا ہے اور آپ کے کوڈنگ کے وقت میں کچھ بچت ہو جاتی ہے۔ ذہنی الجھن اور توانائی بھی اس طرح بچائی جا سکتی ہے۔ تو اس کے لیے آپ کیا کرتے ہیں؟ آپ آتے ہیں اوپن میں، یا اگر آپ اوپن نہیں کرنا چاہتے تو براہ راست فائل کے فولڈر پر کلک کریں۔
فائل کے مینو پر جا کر "Add Folder to Workspace" منتخب کریں، اس میں ہم دو مختلف فولڈرز شامل کریں گے۔ پہلا فولڈر ڈیسک ٹاپ کا ہے، جو کہ ڈیسک ٹاپ پر موجود ہے، اور اس میں "Live Share" ایس کوڈ کا فولڈر بھی شامل کریں گے۔ آپ بائیں ہاتھ پر ایکسپلورر کے پین پر کلک کریں گے تو آپ دیکھیں گے کہ "Live Share Support" کے نام سے فولڈر ورک اسپیس میں شامل ہو چکا ہے، جو ابھی "Untitled" ہے، اور اس کے اندر ایک ہی فائل ہے، "index.htm"۔ دوبارہ فائل میں جا کر "Add Folder to Workspace" منتخب کریں اور اب ہم اپنی سیکنڈری ڈرائیو میں جائیں گے۔ پہلے ہم نے پرائمری ڈرائیو سے فولڈر لیا تھا، اب سیکنڈری ڈرائیو سے دوسرا فولڈر شامل کریں گے، یہ فولڈر "fonts" ہے۔
ہم ایڈ کرائیں گے، اب آپ دیکھیں گے کہ دوسرا فولڈر بھی یہاں آ چکا ہے۔ یہ دو الگ الگ فولڈرز ہیں اور بالکل مختلف جگہوں پر، بلکہ بالکل مختلف ڈرائیوز پر۔ اس ورک اسپیس کو ہم سیو کر دیتے ہیں۔ سیو ورک اسپیس۔ چلیں ڈاکیومنٹس پر چلتے ہیں اور وہاں اس کا نام رکھتے ہیں "HTML Coding"۔ سیو کر کے بند کر دیتے ہیں۔ اب SASS کوڈ کو دوبارہ کھولتے ہیں۔ فرض کریں کہ آپ کو اگلی بار تین چار دن بعد انہی فولڈرز پر کام کرنا ہے جو مختلف جگہوں پر تھے اور آپ نے پہلے ہی کھول رکھے تھے، تو آپ کو بار بار انہی فولڈرز کو...
فولڈرز کو کھول کر دیکھنے کی ضرورت نہیں ہے، آپ سیدھا فائل کے مینو میں جائیں گے اور ورک اسپیس اوپن کریں گے۔ بس آپ کو یہ معلوم ہونا چاہیے کہ آپ نے اپنا ورک اسپیس کہاں سیو کیا ہوا ہے۔ ہم نے اسے ڈاکیومنٹس کے فولڈر میں "ایچ ٹی ایم ایل کوڈنگ" کے نام سے سیو کیا تھا۔ یہاں پر لکھا ہوا ہے کہ اس کوڈ میں ویژوئل اسٹوڈیو کوڈ ڈاکیومنٹس کے اندر ہے۔ اب ہم اسے کھولیں گے، جیسے ہی ہم اسے اوپن کرتے ہیں اور اپنے ایکسپلورر کے مینو میں جاتے ہیں، تو آپ دیکھیں گے کہ "ایچ ٹی ایم ایل کوڈنگ" کے نام سے ہمارا ورک اسپیس کھل گیا ہے۔
اس کے اندر یہ دونوں فولڈرز آ گئے ہیں جو بالکل مختلف جگہ سے ہیں، تو اس طریقے سے آپ کئی ورک اسپیسز سیو کر سکتے ہیں۔ تو اس کی جو عملی اپلیکیشن ہو سکتی ہے وہ یہ ہے کہ اگر آپ کوئی موبائل ایپلیکیشن کوڈنگ کر رہے ہیں تو اس کا الگ ورک اسپیس بنایا ہوا ہے، اگر آپ کوئی ایچ ٹی ایم ایل کا فرنٹ اینڈ دستاویز لکھ رہے ہیں تو اس کا الگ ورک اسپیس ہوگا، اور اگر آپ کوئی ویب ایپلیکیشن لکھنا چاہتے ہیں تو اس کا بھی بالکل الگ ورک اسپیس ہوگا۔ یا پھر مختلف کلائنٹس کے لیے بھی مختلف مختلف ورک اسپیسز ہو سکتے ہیں۔
using emmet in vscode4:18
وی ایس کوڈ کا ایک زبردست فیچر جو ہمارے کام آتا ہے وہ ہے اس کا "ایمٹ ایبریوی ایشن"۔ ایمٹ ایک قسم کا ایبریوی ایشن ہوتا ہے جو ہم کسی بھی طرح کے کوڈ میں استعمال کرتے ہیں۔ ہم تھوڑا سا کوڈ لکھتے ہیں اور وہ خود بخود بڑھ جاتا ہے۔ یہ وی ایس کوڈ کے اندر بلٹ ان فیچر ہے، اس کے لیے ہمیں کوئی ایمٹ انسٹال کرنے یا استعمال کرنے کی ضرورت نہیں پڑتی۔ اس کو استعمال کرنے کا طریقہ یہ ہے کہ مثال کے طور پر، اگر میں کوئی نیا ای ٹی ایل ڈاکیومنٹ بنانے جا رہا ہوں تو میں یہاں ایکسکلیمیشن مارک لکھوں گا۔
رہا ہے ایکسکلیمیشن مارک کے باہر رائٹ ہینڈ سائیڈ پہ ایٹ ای بی این، اگر میں انٹر دباتا ہوں تو آپ دیکھیں یہ پورا جو ایکسکلیمیشن مارک تھا وہ پورے ڈاکیومنٹ کے اندر کنورٹ ہو گیا اور مجھے سارا مواد دوبارہ لکھنے کی ضرورت نہیں جو عام طور پر مجھے کاپی پیسٹ کرنا پڑتا یا یاد رکھنا پڑتا جو آسان کام نہیں ہوتا۔ تو باڈی کے اندر نیچے آتے ہیں اور ہم کوشش کرتے ہیں کچھ مزید ایچ ٹی ایم ایل کوڈ لکھنے کی۔ تو ڈی آئی وی میں لکھتے ہیں، تو رائٹ ہینڈ سائیڈ پر پھر سے ایٹ ای بی این لکھا جا رہا ہے، اگر میں اس پر انٹر دباتا ہوں تو آپ دیکھتے ہیں کہ ڈی آئی وی پوری این...
کلوزنگ ڈی اور انیشیل ڈیف کے اندر کنورٹ ہو گئی اور اس کے سارے مارکس اور گرینٹر دین اور سمولر دین کے جو رولز ہیں وہ یہاں اپلائی ہو گئے۔ اگر میں اسی ڈیف کے اندر مزید ایک ایچ وی بنانا چاہتا ہوں اور اس ایچ وی کی کلاس ہو نیو، تو مجھے ڈاٹ لگانا پڑے گا h1 کے بعد اور پھر اس کی کلاس کا نام لکھنا پڑے گا۔ اور یوں ہمارے پاس ایک ایسا ایچ وی آ گیا جس کی کلاس ہے نیو۔ اسی طرح ہم آئی ڈی بھی بنا سکتے ہیں۔ جیسے اسپین کے لیے ہم ہیش (#) استعمال کرتے ہیں۔ اور جو آئی ڈی آپ دیکھ رہے ہیں، وہ ’آندر‘ کے نام سے بن گئی اور اسپین بھی بن گیا اسی طریقے سے۔
تو ہم ایٹ کو یوز کرتے ہوئے چائلڈ ایلیمنٹس بھی بنا سکتے ہیں، جیسے یول یل کے بعد ہم لکھیں گے "گریٹر دن" اور ایل آئی ایل آئی کو مجھے چائلڈ ایلیمنٹ بنانا ہے یل کا۔ اگر میں اسے پریس کروں گا تو آپ دیکھ رہے ہیں کہ ایل نے اسے چائلڈ ایلیمنٹ بنا دیا، کس کا؟ یل کا۔ اسی طرح سے سبلنگ ایلیمنٹس بھی آپ بنا سکتے ہیں ایٹ کے اندر۔ تو اگر میں ایپل کے لیے بنانا چاہوں، ڈی ڈی کے بعد پی پی کے بعد اسپین، تو میں لکھوں گا ڈیو ف پلس اسپین پلس ایو۔ تو یہ سبلنگ ایلیمنٹس بنا دے گا، یعنی آپ دیکھ رہے ہیں کہ اس نے اسپین کو ڈیو کا سبلنگ بنا دیا۔
دیے گئے اسپن اور ڈیف کا جب کہ یہاں پر ایل آئی جو تھا وہ چائلڈ ایلیمنٹ تھا یل ایل آئی کا اگر اسی طرح مجھے ایک سے زیادہ ایل آئی بنانی ہوں تو میں کیا کروں گا کہ یل گریٹر دین ایل آئی اور ایل کے بعد ہم کر دیں گے ملٹیپلائی بائی مثال کے طور پر تو یہ تین ایل آئی بنائے گا یہ تین ایل آئی بنیں گی جو کہ چائلڈ ایلیمنٹ ہوں گی یل کا آپ تین سے زیادہ بھی بنا سکتے ہیں تو آپ دیکھیں گے انہوں نے اسے کنورٹ کر دیا ہے تین چائلڈ ایلیمنٹ بنا دیے اور ایک یول ہے اسی طرح اگر آپ تین ای آئی کے ایلیمنٹ بنانا چاہتے ہیں اور ان تینوں کو مثال کے طور پر کوئی آئی ڈی دینی ہو تو
اگر آپ ایسا کریں گے تو یہاں ہماری طرف سے آئی ڈی آ جائے گی، لیکن آپ کو پتہ ہے کہ آئٹمز اور پھر آئٹمز اور پھر آئٹمز تینوں کی آئی ڈی ایک جیسی نہیں ہو سکتی۔ اس میں ایمیٹ کے اندر ایک اور فنکشن ہے کہ آپ نے ایک یول بنائی، اس کی چائلڈ بنائی ایل آئی، اور یہ تینوں ایل آئی ہم نے بنائے ہیں، اور ہر ایل آئی کو ہم نے ایک نام، ایک آئی ڈی دی ہے آئٹم کی۔ اگر ہم اس کے آگے $ لکھ دیں تو یہ سارے آئٹمز کو کچھ نہ کچھ آئی ڈی نمبر دے دے گا۔ اب یہ ہوگا آئٹم ون، آئٹم ٹو، آئٹم تھری، آئٹم تھری۔ اسی طرح کی اپروچ سی ایس ایس میں بھی استعمال کی جا سکتی ہے کیونکہ یہ سارے فنکشن بلٹ ان ہوتے ہیں۔
بی ایس کوڈ کے اندر آپ اس کی ڈاکیومنٹیشن پڑھ سکتے ہیں۔ آدھ تک اس کا یہ ڈیمو ہے، ڈیمو دیکھ سکتے ہیں۔ اور ڈیمو کے علاوہ اس کی تمام سینٹیکس یا سنپٹس ان کی ویب سائٹ پر لکھی ہوئی ہیں۔ یہ ہے ڈاکیومنٹیشن اور کچھ ڈاؤن لوڈ کریں اگر آپ کوئی اور آئی ڈی ای استعمال کر رہے ہیں وی ایس کوڈ کے علاوہ۔
vscode shortcuts for basic editing6:34
چلو بات کرتے ہیں شارٹ کٹس کی، زندگی کے شارٹ کٹس کی نہیں بلکہ بیسک شارٹ کٹس کی۔ تو میں اس پر زیادہ تفصیل میں نہیں جاوں گا کیونکہ ہر شارٹ کٹ کام کا نہیں ہوتا، بس جو ریلیونٹ شارٹ کٹس ہیں جو ہمارا بہت وقت بچا سکتے ہیں، انہی پر بات کریں گے۔ تو یہ ویڈیو بیسک ایڈیٹنگ فیچرز کو کور کرتی ہے اور بیسک ایڈیٹنگ میں آپ شارٹ کٹس کو کیسے استعمال کر سکتے ہیں، یہ بتاتی ہے۔ اکثر ایسا ہوتا ہے کہ جیسے آپ دیکھ رہے ہیں، ہم ابھی ایک کوڈ بلاک پر ہیں جس کا نام ہے آٹ گروپ۔ اگر ہم رائٹ ہینڈ سائیڈ پر دیکھیں، کسی کوڈ کے بیچ میں ہو اور...
اگر ہمیں لائن کے نیچے والی لائن پر آ کر ایک اور کوڈ لکھنا ہو تو عام طور پر ہم کمانڈ کے ساتھ رائٹ کلک کرتے ہیں تاکہ کرسر دائیں ہاتھ کی طرف آجائے، پھر انٹر دباتے ہیں، اس طرح دوسری لائن شروع ہو جاتی ہے۔ اس کے بعد ہم اپنا کوڈ ٹائپ کرنا شروع کرتے ہیں، یہ ایک عام طریقہ ہے۔ لیکن اگر ہم بار بار ایسا کریں اور بہت ساری فائلز پر کام کر رہے ہوں تو یہ مشکل ہو جائے گا، اس لیے ہم شارٹ کٹ استعمال کرتے ہیں، یعنی کمانڈ + انٹر۔ ابھی میں اس لائن کے بلکل بیچ میں ہوں، اب میں کمانڈ + انٹر دباؤں گا تو نہ صرف میرا کرسر دوسری لائن پر چلا جائے گا۔
میں اندر آ گیا، بلکہ اس نے لائن بھی نہیں توڑی۔ لیکن اگر میں بالکل اسی جگہ کرسر رکھوں اور صرف انٹر دباوں، تو یہاں کیا ہوتا؟ یہ لائن ٹوٹ جاتی ہے اور دوسری لائن پر آ جاتی ہے۔ تو نیچے جانے کے لیے ہمیں کیا کرنا ہے؟ دوسری لائن میں جانے کے لیے ہمیں کمانڈ + انٹر پریس کرنا ہے۔ اسی طرح اگر میں لائن کے بیچ میں ہوں اور مجھے لائن کے بالکل شروع میں جانا ہے، تو عام طور پر کیا کرنا پڑتا ہے؟ آپ کو کمانڈ + لیفٹ دبانا ہوتا ہے۔ جب بھی میں کمانڈ کہوں، تو وہ میک یوزرز کے لیے ہے، اور جب آپ ونڈوز استعمال کر رہے ہوں تو کمانڈ کی جگہ...
آپ کنٹرول استعمال کر سکتے ہیں، عام طور پر ایسا ہوتا ہے کہ اوپر مجھے لائن ایڈ کرنی ہوتی ہے تو مجھے کمانڈ دبا کر لیفٹ ہینڈ پر جانا پڑتا ہے، پھر انٹر پریس کرنا پڑتا ہے۔ اب یہاں پر کوئی نئی لائن ایڈ کرتے ہیں، لیکن اس کا ایک آسان طریقہ یہ ہے کہ اگر میں لائن کے بیچ میں ہوں تو میں کمانڈ شفٹ انٹر پریس کروں گا۔ کمانڈ شفٹ انٹر سے جس لائن میں میں ہوں، چاہے وہ بیچ میں ہو یا آخر میں، کہیں بھی ہوں، اوپر ایک اور لائن ایڈ ہو جائے گی۔ اسی طرح اگر آپ کسی لائن کو نیچے کی طرف موو کرنا چاہتے ہیں تو اس کے لیے...
عام طور پر ایسا ہوتا ہے کہ فار ایگزامپل جب آپ لائن دیکھ رہے ہوتے ہیں لیفٹ ہینڈ سائیڈ پر 144 ہے، یہ والی لائن لے لیتے ہیں آؤ گروپ کو، یہ لائن ہمارے پاس 141 ہے، ہائی لائٹ ہوئی ہے۔ اگر میں اس لائن کو نیچے لانا چاہتا ہوں آپشن والی لائن کے نیچے تو عام طور پر ہمارے پاس بہت سارے سٹیپس ہوتے ہیں۔ نمبر ون: کمانڈ لےفٹ کر کے ہم رائٹ ہینڈ سائیڈ پائیں گے، کمانڈ رائٹ کر کے، کمانڈ شفٹ رائٹ کر کے سیلیکٹ کریں گے، کنٹرول ایکس کر کے کٹ کریں گے، پھر نیچے آئیں گے، پھر وہاں پر انٹر پریس کریں گے، پھر اوپر جائیں گے، پھر کمانڈ بھی پریس کریں گے، اس کے بعد لائن موو ہو جائے گی۔
اوپر والی لائن کو نیچے والی لائن میں لے جانا ممکن ہے، لیکن اگر مجھے یہ کام بار بار کرنا پڑے کیونکہ جب آپ کوڈنگ کر رہے ہوتے ہیں تو آپ کو یہ کام اکثر کرنا پڑتا ہے۔ اس کا ایک طریقہ یہ ہے کہ آپ آپشن یا آلٹر دبائیں اور پھر نیچے کی طرف کی بورڈ پر "ڈاؤن" کی کو بار بار دبائیں۔ تو آپ دیکھیں گے کہ جو لائن اوپر تھی وہ نیچے آ رہی ہے۔ اسی طرح ہم اس کا الٹ بھی کر سکتے ہیں، یعنی جس لائن پر ہمارا کرسر ہوتا ہے، اسے اوپر لے جانا، اوپر والی لائن کے ساتھ سوئپ کرنا ہو تو آلٹ، شفٹ اور اپ دبائیں۔
آلٹ شفٹ اپ کا مطلب ہے کہ چیزیں اوپر کی طرف جائیں گی۔ معاف کرنا، یہ ایل ٹی شفٹ اپ نہیں ہے، یہ صرف آلٹ شفٹ اپ ہے۔ اور ایل ٹی شفٹ ڈاؤن کا استعمال اسی لائن کو اگلی لائن میں کاپی کرنے کے لیے ہوتا ہے۔ مثال کے طور پر اگر میں CSS کی اس لائن پر ہوں اور آلٹ ڈاؤن دباؤں تو یہ لائن نیچے آ جائے گی، لیکن اگر میں آلٹ شفٹ ڈاؤن دباؤں تو یہ لائن کاپی ہو جائے گی۔ تو کسی لائن کو کاپی یا ڈپلیکٹ کرنے کا یہ ایک بہت آسان طریقہ ہے کیونکہ عام طور پر ایسا ہوتا ہے کہ اگر آپ یہ نہ کریں۔
اگر آپ کو کرنا ہو تو آپ کمانڈ دبا کر بائیں ہاتھ پر جاتے ہیں، اور پھر کمانڈ شفٹ دبا کر دائیں ہاتھ پر جاتے ہیں، اس کے بعد آپ اسے کاپی کرتے ہیں کمانڈ سی سے، پھر دائیں کلک کرتے ہیں، پھر انٹر دباتے ہیں، پھر کنٹرول وی یا میک یوزرز کے لیے کمانڈ وی کرتے ہیں۔ لیکن آسان طریقہ یہ ہے کہ آپ کو اتنی ساری چیزیں کرنے کی ضرورت نہیں، صرف آلڈ شفٹ دبا کر رکھیں، اور ہماری جو لائن ہے وہ آسانی سے ڈپلیکٹ ہو جائے گی۔ اچھا یہاں آپ دیکھ رہے ہیں کہ کافی کوڈ کی فارمیٹنگ خراب ہو گئی ہے، تو آپ کوڈ...
پورا فارم بھرنا نہیں چاہتے بلکہ کوئی خاص لائن ہوتی ہے جس پر آپ کو عام طور پر کام کرنا پڑتا ہے۔ اب اگر اس کی انڈینٹیشن خراب ہو گئی ہے تو اس کے لیے مجھے کیا کرنا پڑے گا؟ میں کمانڈ اور لیفٹ بریکٹ دباوں گا۔ کمانڈ اور لیفٹ بریکٹ پریس کرنے سے یہ انڈینٹ کرے گا۔ پھر کمانڈ اور رائٹ بریکٹ، یہ بھی انڈینٹ کرے گا۔ اگر مجھے اسے آؤٹڈینٹ کرنا ہو تو کمانڈ اور لیفٹ بریکٹ دبانا پڑے گا۔ اسی طرح کمانڈ اور رائٹ بریکٹ بھی کر سکتے ہیں۔ اس کا ایک اور طریقہ بھی ہے۔
ایسا ہوتا ہے کہ ہم کوڈ کو پورا سلیکٹ کر لیتے ہیں اور پھر یہاں پر ایک "فارمیٹ کوڈ" کا آپشن ہوتا ہے، لیکن ابھی ہم اس بارے میں بات نہیں کر رہے کیونکہ ہم بات کر رہے ہیں کہ کسی بھی کوڈ کے اندر لائنز کو کیسے انڈینٹ کیا جائے۔ ایک آخری چیز جو بیسک ایڈیٹنگ میں بہت زیادہ کام آتی ہے وہ یہ ہے کہ جب ہم کوئی کام کر رہے ہوتے ہیں تو ہمیں اس دوران کسی لائن یا کوڈ کو کمنٹ کرنے کی ضرورت پڑتی ہے، یا اس کوڈ کے اوپر یا نیچے ہمیں کمنٹ ایڈ کرنے کی ضرورت ہوتی ہے، تو یہ بہت ہی زیادہ استعمال ہونے والا فیچر ہوتا ہے، عام طور پر ہم اسے...
ہم جب بار بار استعمال کرتے ہیں تو اس کے لیے ہم "کمانڈ فور سلیش" یعنی "کمانڈ + /" استعمال کرتے ہیں۔ جس لائن کے اوپر آپ کا کرسر ہوگا، وہ لائن کمنٹ میں تبدیل ہو جائے گی۔ اور اگر آپ اس لائن کو کمنٹ میں تبدیل نہیں کرنا چاہتے بلکہ اس کے اوپر کوئی اور کمنٹ دینا چاہتے ہیں، مثال کے طور پر "دس از آپٹ گروپ"، تو یہ ایک اور کمنٹ بنا دے گا۔ تو یہ ہمارے تقریبا بیسک ایڈیٹنگ کے فیچرز کے شارٹ کٹس ہیں۔ شارٹ کٹس سیکھنا اس لیے ضروری ہے کیونکہ یہ آپ کا بہت وقت بچاتے ہیں۔ ورنہ آپ کو ہمیشہ ماؤس کے اوپر ہاتھ رکھنا پڑتا ہے اور بہت سی چیزیں آسان ہو جاتی ہیں۔
vscode Navigation Shortcuts10:21
چلو بات کرتے ہیں نیویگیشن شارٹ کٹس کی، اور اس میں ہم نیویگیشن سے جڑی چیزوں کے بارے میں بات کریں گے جن کے لیے ہمیں زیادہ ماؤس استعمال کرنا پڑتا ہے، لیکن شارٹ کٹس سے یہ کام کیسے ہو سکتے ہیں۔ سب سے پہلا کام ہے فائل پر جانا اور کوئیک اوپن کرنا، اور اس کے لیے ہمیں کمانڈ پ پریس کرنا پڑتا ہے، پھر اس فائل کا نام لکھتے ہیں جو ہمیں کھولنی ہے۔ مثال کے طور پر، ہو سکتا ہے کچھ ایسا ہو کہ لگن hl1 کا ایک فولڈر ہے، اور اس کے اندر ڈسٹریبیوشن کا فولڈر ہے جس میں فائل رکھی ہوئی ہے، لوگو ڈیٹا۔ ہم اسے کلک کریں گے تو ہمارے پاس لوگو لگن ڈیٹا کھل جائے گا۔
سامنے آ گئی کمانڈ پی، پھر پریس کریں گے گو ٹو فائل کے لیے یا کوئیک اوپن کے لیے۔ پھر میسجز کے نام سے ہمارے پاس ایک ایچ ٹی ایم ایل ہے، اس کو کمانڈ پی سے ہم استعمال کرتے ہیں کوئیک اوپن یا گو ٹو فائل کے لیے یا فائل کو کھولنے کے لیے۔ ان فائلز کے درمیان ہمیں نیویگیٹ کرنا ہوتا ہے تو ہمارے پاس کنٹرول کا بٹن ہوتا ہے، کنٹرول کو ہم پریس کرکے رکھیں گے اور پریس کریں گے ٹیب۔ ٹیب پریس کرنے کے بعد یہ لاگ ان ٹیسٹ ایچ ٹی ایم ایل آپ دیکھ رہے ہیں کہ کس طریقے سے ایک دوسرے کے اندر فائل آپ نیویگیٹ کر سکتے ہیں۔ جب آپ کسی فائل میں کام کر رہے ہوتے ہیں تو بعض اوقات آپ کو کیا کرنا پڑتا ہے۔
اگر آپ کے پاس ہزاروں لائنز کا کوڈ ہو تو آپ کو بڑی تیزی سے کسی اور لائن پر جانا پڑتا ہے جو آپ کی موجودہ لائن سے کافی دور ہو۔ فرض کریں آپ سیدھا لائن نمبر 300 پر جانا چاہتے ہیں تو اس کے لیے ہم کمانڈ استعمال کرتے ہیں، کنٹرول جی۔ یہ اس ویڈیو کی دوسری کمانڈ ہے، پہلی کمانڈ تھی وائی کمانڈ، پھر کنٹرول جی۔ جب ہم کنٹرول جی دبائیں گے تو یہاں ہمیں بتائے گا کہ ہمیں کس لائن نمبر پر جانا ہے۔ اب دیکھیں، ہمارے کرسر کی موجودہ لائن 64 ہے، جو یہاں ہائیلائٹ ہو رہی ہے۔
کرسر یہاں پر ہے اور کرکٹر نمبر 24 پر ہمارا کرسر ہے اور یہ بتا رہا ہے کہ آپ کوئی بھی لائن ٹائپ کریں ایک سے لے کر 254 تک کیونکہ یہ پورا کوڈ ٹیسٹ ڈی اے ٹی کی فائل کے 254 لائنز اپنے اندر لیے ہوئے ہے۔ تو چلو چلتے ہیں لائن نمبر 5 پر، جیسے میں ٹائپ کرتا ہوں مجھے انٹر دبانے کی ضرورت نہیں ہوتی بلکہ یہ ڈائریکٹلی مجھے پِپ نمبر کی اس لائن پر لے جاتا ہے اور اسے ہائی لائٹ بھی کر دیتا ہے۔ اگر میں انٹر دوں گا تو میرا کرسر یہاں آ جائے گا اور یہ نمبر بھی ہائی لائٹ ہو جائے گا۔ چلو ایک اور لائن ٹرائی کرتے ہیں، چلتے ہیں لائن پر کنٹرول جی کے ساتھ اور اب ہم آگے بڑھتے ہیں۔
اگر آپ لائن نمبر 300 کی طرف دیکھ رہے ہیں تو ہم لائن 300 کے اوپر آ چکے ہیں۔ اور اچھا یہ ہوتا ہے کہ جب کوڈ پ لائیو کام کر رہے ہوتے ہیں، یعنی ڈیولپمنٹ کر رہے ہوتے ہیں، تو آپ کو بہت زیادہ بیک اینڈ اور فرنٹ اینڈ دونوں جگہ تبدیلیاں کرنی پڑتی ہیں۔ اکثر آپ کو بالکل فائل کے نیچے اپنے اسکرپٹ یا جاوا اسکرپٹ پر کام کرنا پڑتا ہے اور اوپر HTML پر بھی کام کرنا ہوتا ہے، اس لیے آپ کو بیک اینڈ اور فرنٹ اینڈ کے درمیان بار
فرض کریں کہ آپ کا HTML کوڈ لائن نمبر 300 پر ہے اور آپ کا جاوا اسکرپٹ کوڈ تقریباً لائن نمبر 3000 کے قریب نیچے ہے، تو آپ آسانی سے آگے پیچھے جا سکتے ہیں۔ لیکن ایک اور مسئلہ یہ ہے کہ اگر ہم بار بار Ctrl+G دباتے رہیں اور 300 پھر 3000 لائن نمبر ٹائپ کرتے رہیں، تو یہ کافی محنت طلب کام لگتا ہے۔ اس کے لیے VS Code میں ایک کمانڈ ہوتی ہے جسے کہتے ہیں "Go Back"۔ اس کے لیے ہم دوبارہ Ctrl استعمال کرتے ہیں اور مائنس کا بٹن دباتے ہیں۔ اب دیکھیں، ہم فی الحال لائن نمبر 30 پر ہیں، میں کمانڈ...
جب میں کنٹرول مائنس دباتا ہوں تو یہ واپس چلا گیا، جیسے آپ براؤزر میں کسی ویب سائٹ کو کھولتے ہیں اور پھر اس کے کسی اندرونی لنک پر جاتے ہیں، پھر جب آپ واپس جاتے ہیں تو آپ پچھلے لنک پر دوبارہ آ جاتے ہیں۔ تو 301 لائن پر پہنچنے سے پہلے ہم لائن نمبر 55 پر تھے، اور اس سے بھی پہلے کہیں اور۔ اگر میں دوبارہ کنٹرول مائنس دباتا ہوں تو دیکھیں میرا کرسر کہاں آ گیا، لائن نمبر 64 پر جہاں سے ہم نے شروع کیا تھا۔ اب اگر میں چاہوں کہ پھر سے لائن نمبر 55 پر جا سکوں، تو کنٹرول شفٹ مائنس دبانا ہوگا۔
دو بار پریس کروں گا یہ پی ایف کیپر میرا کر گیا اب کنٹرول شفٹ مائنس دو بار پریس کروں گا تو لائن نمبر 55 کے بعد ہم نے کام کیا تھا لائن نمبر 30 پر تو یہ بیک اینڈ فورث آپ اس پر آسانی سے کر سکتے ہیں ایک تیسری چیز جو ہمارے پاس اس میں استعمال ہوتی ہے وہ ہم جسے کہتے ہیں سمبل اور اس کے لیے ہم ایک شارٹ کٹ استعمال کرتے ہیں کمانڈ شفٹ او یہ سمبل دراصل کے ایلیمنٹس ہیں آپ انہیں سمبل کہہ لیں یا ایلیمنٹس کہہ لیں لائیک اگر میں ایچ ٹی ایم ایل پر کلک کرتا ہوں تو دیکھیں یہ سب سے اوپر ای ٹی ٹیگ کے اوپر آ جائے گا کمانڈ شفٹ
دوبارہ پریس کرتا ہوں تو اور جاتا ہوں، میں ٹائٹل پر، تو ٹائٹل پر میرا کَس آ گیا۔ کمانڈ شفٹ میں پھر دوبارہ پریس کرتا ہوں تو کسی بھی ڈیپاتھ وغیرہ پر جا سکتے ہیں۔ یہ بات زیادہ تر وہاں استعمال ہوتی ہے جہاں آپ کروم کے ڈیویلپر ٹولز کو استعمال کرتے ہوئے اپنی CSS لکھتے ہیں یا کسی آبجیکٹ یا ٹیگ کو انسپیکٹ کرتے ہیں اور اسے یہاں پر ریپلیکٹ کرنا پڑتا ہے۔ مثال کے طور پر، میں نے کروم ڈیویلپر ٹول میں کچھ چینجز کیں، اب میں چاہتا ہوں کہ وہ چینجز اپنے VS کوڈ میں ریپلیکٹ کروں، اور مثال کے طور پر وہ ایک...
ٹैگ تھا اسپن کے نام سے، اب میں کلک کرتا ہوں، میں ٹائپ کرتا ہوں اسپن، اور اسپن ٹائپ کرنے کے بعد مجھے یاد آتا ہے کہ اس کی کلاس تھی مین ٹیکسٹ۔ تو چلیں دیکھتے ہیں کہ مین ٹیکسٹ کلاس کہاں ہے۔ آپ دیکھیں یہاں پر مین ٹیکسٹ کے نام سے اسپن لایا گیا ہے، اسپن پر مین ٹیکسٹ کلاس ہے۔ اگر میں اس پر کلک کروں گا تو میرا کرسر سیدھا کہاں لے جائے گا؟ ایک اسپن پر جس کی کلاس ہے مین ٹیکسٹ۔ تو یہ نیویگیشن ہے۔ اس طرح آپ اپنی نیویگیشن کو بہت آسان بنا سکتے ہیں۔ اگر آپ کو یہ شارٹ کٹ یاد رکھنا مشکل ہو رہا ہے، جیسے کنٹرول جی یاد...
یاد رکھنا مشکل ہو رہا ہے جو کوٹ لائن کا کوڈ تھا جو ہم نے VS Code میں یوز کیا تھا، کنٹرول جی یا آپ کو کمانڈ شفٹ او۔ یاد رکھنا مشکل ہو رہا ہے تو آپ نوٹ کر لیں، ان میں ایک چھوٹا سا فیچر ہے کہ یہ ایک سرچ بار یا ان پٹ باکس اوپر لے آتا ہے اور اس میں آپ کوئی کوڈ ٹائپ کر سکتے ہیں۔ سب سے بہتر یہ ہے کہ آپ یاد کر لیں اپنی کمانڈ پیلیٹ کا کوڈ، یعنی کمانڈ شفٹ پی۔ یہ کمانڈ پیلیٹ آپ کے سامنے کھل جائے گی۔ اس پر ہم نے پچھلی ویڈیوز میں بات کی ہے جس میں آپ کسی بھی قسم کی کمانڈ دے سکتے ہیں جو آپ کے VS Code سے متعلق ہو۔
دیکھیں یہاں پر ایک بڑا ڈن کا نشان لگا ہوا ہے جب یہ کمانڈ پیلیٹ کھل جاتی ہے۔ آپ کمانڈ + شفٹ + پی دبائیں گے تو کمانڈ پیلیٹ کھل جائے گا، اور یہاں پر آپ کالن (:) دبائیں گے تو آپ دیکھیں گے کہ یہ ویسا ہی برتاؤ کر رہا ہے جیسا آپ توقع کر رہے تھے۔ جیسے آپ کنٹرول + جی دباکر "گو ٹو لائن" کے لیے استعمال کرتے ہیں، ویسا ہی آپ یہاں بھی کر سکتے ہیں۔ تو کنٹرول + جی کے بجائے آپ کنٹرول + شفٹ + پی استعمال کر سکتے ہیں، یہاں کالن دبائیں، اور پھر لائن نمبر کہیں بھی داخل کریں، جیسے لائن نمبر 600۔ یہ ہمارا پاس ہے۔
اچھا، اسی طرح اگر ہمیں سمبل استعمال کرنے ہوتے تو ہم کمانڈ شفٹ استعمال کرتے، اس کی بجائے ہم کمانڈ شفٹ اور اس greater than کے سمبل کو ڈیلیٹ کرکے ی رےٹ کر دیں گے، اور ہمارے پاس ی پر سارے کمانڈز یا سمبلز یا ایلیمینٹس آ جائیں گے جن کو ہمیں ایکسیس کرنا ہے۔ اور اگر ہمیں کمانڈ پیلیٹ کو ڈائریکٹلی ایکسیس کرنا ہے تو کمانڈ پریس کریں گے، تو یہ greater than کا سمبل بتا رہا ہے کہ یہاں ہم کچھ ی پر کمانڈ وغیرہ دے سکتے ہیں۔ آخری بات نیویگیشن سیکشن کے شارٹ کٹس میں، چلیں بات کرتے ہیں پرابلمز کی اور ہم پرابلمز شو کرتے ہیں۔
ایک فائل یہاں کھولتے ہیں، ہم کوئی اور فائل، مثال کے طور پر کمانڈ پی دوبارہ، اور پھر ایکسڈی ایل کو ہم اوپن کرتے ہیں۔ ایکسڈی ایم ایل کو اوپن کرنے کے بعد ہم دیکھتے ہیں کہ اس لائن کے اس پورے ڈاکیومنٹ میں پبلشنگ سے پہلے یا پروڈکشن سے پہلے کوئی مسئلہ تو نہیں جسے ہمیں حل کرنا ہو۔ تو اس کے لیے کمانڈ استعمال کرتے ہیں، کمانڈ شفٹ ٹو شو پرابلم، کمانڈ شفٹ اے۔ اب دیکھیں، اس میں تین پرابلمز ہیں اور ان تینوں پرابلمز کو آپ حل کر سکتے ہیں۔ ابھی ہم صرف شارٹ کٹس کی بات کر رہے ہیں کہ کسی بھی چیز کو کیسے دکھائیں اور کریں۔
شارٹ کٹس استعمال کر رہے ہیں بغیر ماس اور مینوز کے، لیکن چلیں یہاں مسئلے کی بات کرتے ہیں۔ اگر میں یہاں کلک کرتا ہوں تو لکھا ہوا ہے "میری رُول سیٹ استعمال نہ کریں"۔ یہ لائن نمبر 127 اور کرسر نمبر 78 سے تعلق رکھتی ہے۔ اگر میں اس پر کلک کرتا ہوں تو یہ بتا رہا ہے کہ "میری رُول سیٹ استعمال نہ کریں"۔ میری رُول سیٹ کیا ہے؟ یہاں اس نے ہائیلائٹ کر کے بتا دیا ہے کہ یہ رُول سیٹ ہے، جس کا نام "ایم ٹی اسٹائل" ہے۔ یہ کام کا ہے، مجھے اسے ڈیلیٹ کر دینا چاہیے۔ اگر ایسا کروں گا تو مسئلہ حل ہو جائے گا۔
اسی طریقے سے دوسری پرابلم بھی یہاں پر ہے، پھر MT رول سیٹ کریں، اور تیسری پرابلم یہ ہے کہ اگر میں ان سب کو ایک ایک کر کے ڈیلیٹ کر دوں تو جو ہمارے تین پرابلمز یہاں شو ہو رہے تھے وہ یہاں نہیں رہیں گے، اور ہمارا ڈاکیومنٹ فائنل رزلٹ کے لیے تیار ہو جائے گا۔ تو ہم اسے یہاں سے بند بھی کر سکتے ہیں، یا پھر ہم وہی کمانڈ Shift + A دوبارہ پریس کر سکتے ہیں تاکہ دوبارہ بند ہو جائے۔ تو اس سمری میں ہم نے اس ویڈیو میں بات کی ہے کہ سمبلز کے حوالے سے، ایلیمنٹس کے حوالے سے، اور کس طرح ملٹی پل ایلیمنٹس کے درمیان ہم...
ہم کمینڈ شفٹ او دباکر نیویگیٹ کر سکتے ہیں۔ ہم نے یہ بھی بات کی کہ ہم وہی ان پٹ پینل استعمال کر سکتے ہیں۔ کمینڈ شفٹ پی دباکر کمینڈ پیلیٹ لے آئیں گے اور وہاں سیدھا استعمال کر لیں گے تاکہ ہم سمبل پر جا سکیں۔ ہم نے بات کی کہ ہم کس طرح تیزی سے متعدد لائنز کے درمیان حرکت کر سکتے ہیں، خاص طور پر اگر ہمیں لائن نمبر یاد ہو تو کنٹرول جی دباکر۔ اور ہم نے گو بیک اور گو فارورڈ کے بارے میں بھی بات کی، کنٹرول مائنس اور کنٹرول شفٹ مائنس کے ذریعے۔
vscode Display shortcuts4:23
اسٹیٹس بار نے ساری چیزوں کو لیفٹ ہینڈ سائیڈ پر لے آیا، بی ایس کوٹ کے جتنی بھی چیزیں تھیں، وہ سب اس نے بالکل ختم کر دیں۔ پھر جن موڈ، یعنی ٹوٹلی فوکس موڈ، میں لے آیا۔ اس کا کمانڈ یہ ہے: اینڈ، پھر جے ڈی۔ اگر آپ کو اس جن موڈ سے باہر آنا ہو، تو کوڈی کے جے ڈی موڈ سے، تو آپ کو اسکیپ پریس کرنا پڑتا ہے ایک بار۔ اور اگر آپ اس کو دو بار پریس کریں گے تو باہر آ جائیں گے۔ لیکن بار بار اس کمانڈ کو یاد رکھنا مشکل ہوتا ہے، یا پھر اس کو پریس کرنا بھی مشکل لگتا ہے، تو آپ کیا کر سکتے ہیں؟
وہی ایک رول آف تھمب ہے کہ کمانڈ پیلیٹ کھولنے کے لیے کمانڈ شفٹ پی دبائیں۔ جو آخری ایکٹیویٹی آپ نے کی تھی، جیسے ٹوگل سین موڈ، اسے دوبارہ انٹر دبانے سے دوبارہ جن موڈ آن ہو جائے گا۔ تو آپ کمانڈ اینڈ جے استعمال کرکے جن موڈ کر سکتے ہیں، یا کمانڈ شفٹ پی سے کمانڈ پیلیٹ کھول سکتے ہیں، اور باہر نکلنے کے لیے اسپیس دبائیں۔ اسی طرح جب ہم کام کر رہے ہوتے ہیں تو اس کا بیسک لیول یہی ہوتا ہے۔ ابھی میں چار انچ کے مانیٹر پر ہوں اور اس کو 100% لیول پر رکھا ہوا ہے۔
جب میں دیکھتا ہوں تو تھوڑی دیر کام کرنے کے بعد مجھے مسئلہ شروع ہو جاتا ہے کیونکہ یہ آپ کے سر میں درد کروا سکتا ہے۔ تو یہی بات ہے، یہ اس بات پر منحصر ہے کہ آپ نے اپنا مانیٹر اپنی آنکھ سے کتنا دور رکھا ہے، اس کی پکسل ریزولوشن اور پکسل ڈینسٹی کتنی ہے، یعنی PPI کتنا ہے۔ اسی کے حساب سے آپ کو اپنی زوم سیٹنگ تبدیل کرنی پڑتی ہے۔ جس طرح آپ براؤزر میں زوم آؤٹ یا زوم ان کرتے ہیں، ویسا ہی آپ VS کوڈ میں بھی کر سکتے ہیں۔ تو ہم یہاں کمانڈ پلس پریس کریں گے، تو آپ دیکھ رہے ہیں کہ زوم ہو رہا ہے۔ ہم اپنے...
فائلز کو بڑا کر سکتے ہیں، کافی زیادہ بڑا کر سکتے ہیں، لیکن دیر کی کوئی ضرورت نہیں ہے۔ بڑی سائز اور کمانڈ مائنس کرکے ہم اسے چھوٹا بھی کر سکتے ہیں۔ تو زوم ان اور زوم آؤٹ دونوں فنکشنز اس میں موجود ہوتے ہیں۔ اگر میں دو بار پریس کروں سکپ تو آپ دیکھیں گے کہ لیفٹ ہینڈ سائڈ پر ہمارا سائیڈ بار آ جاتا ہے اور اب ہم جن موڈ سے باہر آ گئے ہیں۔ زیادہ تر وہ چیزیں جو ہمیں عام طور پر استعمال کرنی پڑتی ہیں وہ لیفٹ ہینڈ کے سائیڈ بار میں ہوتی ہیں۔ ایک تو یہ ایکسپلورر ہے، دوسرا یہ فائنڈر ہے، تیسرا ایک۔ تو ان تینوں چیزوں کو یاد رکھنے کے لیے ہم ان کے پہلے لیٹر یعنی شارٹ کٹ یاد رکھ سکتے ہیں۔
تو ان کا پہلا لیٹر یاد رکھنا ضروری ہے، ای یعنی ایکسپلورر کے لیے، ایف یعنی فائنڈر کے لیے، اور ایکس یعنی ایکسٹینشن کے لیے۔ اس سے پہلے ہم لگائیں گے کمانڈ اور شفٹ۔ تو کمانڈ شفٹ ای ہوگا ایکسپلورر کے لیے، کمانڈ شفٹ ایف فائنڈر کے لیے، اور کمانڈ شفٹ ایکس ایکسٹینشن کے لیے۔ اس طرح آپ کو یاد رکھنے میں آسانی ہوتی ہے۔ آپ اسی طریقے سے کمانڈ پیلیٹ کو بھی ایکسیس کرتے ہیں، کمانڈ شفٹ پی کمانڈ پیلیٹ کے لیے، کمانڈ شفٹ ایکس ایکسٹینشن کے لیے، کمانڈ شفٹ ایف فائنڈر کے لیے، اور کمانڈ شفٹ ای ایکسپلورر کے لیے۔ اب جب آپ اسے بند کرنا چاہیں، اور دوبارہ کھولنا ہو تو کمانڈ شفٹ ایکس پریس کریں، تو یہ کام ہو جائے گا۔
سائیڈ بار کو نہیں دکھائے گا بلکہ اس کے لیے ایک اور کمانڈ استعمال کی جاتی ہے جسے کہتے ہیں کمانڈ بی بی برائے بیٹ۔ اگر میں کمانڈ بی دباوں گا تو ہمارا سائیڈ بار یہاں سے غائب ہو جائے گا۔ تو یہ چند شارٹ کٹ ہیں جن کی آپ کو بار بار ضرورت پڑ سکتی ہے کیونکہ کبھی کبھار آپ کو فائل کھولنی پڑتی ہے، کبھی کوئی کام کرتے ہوئے ایکسٹینشن تلاش کرنی پڑتی ہے، کبھی فائنڈ، سرچ، ریپلیس جیسی چیزیں کرنی پڑتی ہیں۔ تو یہ کچھ ڈسپلے اور ویو پورٹ سے متعلق شارٹ کٹس ہیں جو آپ کی کوڈنگ کے ماحول کو بہتر بنانے میں بہت مدد دے سکتے ہیں۔
How to find replace text in vscode6:09
اس ویڈیو میں ہم VS Code کے سرچ اینڈ ریپلیس فیچر کے بارے میں بات کریں گے۔ یہاں ہم کرتے کیا ہیں کہ command+F پریس کرتے ہیں، میک کے لیے، اور ونڈوز میں control+F، پھر کوئی بھی لفظ سرچ کرواتے ہیں۔ مثال کے طور پر ہمارے پاس یہ لفظ ہے "light CSS"، میں اسے سرچ کرتا ہوں "light CSS"۔ تو یہ بتا رہا ہے کہ پورے ڈاکیومنٹ میں "light CSS" چار بار لکھا ہوا ہے، اور CSS میں سے ایک "background" بھی ہے۔ اگر ہم next پریس کریں تو دوسرا میچ آ جاتا ہے، یہ دوسرا میچ ہے، یہ تیسرا ہے اور یہ چوتھا ہے۔ اس طرح ہم اس میں…
ڈاکیومنٹ میں جہاں جہاں "لائٹ" لکھا ہوا ہے، آپ اسے چیک کر سکتے ہیں۔ اگر ہم صرف "لائٹ" کو چیک کرنا چاہیں تو یہ بتا رہا ہے کہ اس ڈاکیومنٹ میں یہ 67 دفعہ لکھا گیا ہے۔ HTML میں بھی یہی بات ہے اور ہم پانچویں پوزیشن پر کھڑے ہیں، یہاں پانچواں نمبر دکھا رہا ہے۔ آپ دیکھ رہے ہیں کہ اس نے اسے گرے کر کے ہائی لائٹ کر دیا ہے۔ دائیں ہاتھ جانب ایک چھوٹا سا آئیکن بھی دیا ہے جو بتا رہا ہے کہ اگر ہمیں کسی لفظ کا کیس میچ کرنا ہو تو ہم اسے پریس کر دیں۔ مثال کے طور پر، آپ دیکھ رہے ہیں کہ "L" بھی چھوٹا ہے اور آخر تک تمام الفاظ چھوٹے حروف (سمال لیٹر کیس) میں ہیں۔
کیمِل کیس میں بھی ہو سکتا تھا اور سینٹنس کیس میں بھی ہو سکتا تھا۔ مثال کے طور پر اگر میں یہاں لکھوں LIGIST، جہاں L کیپٹل ہے، تو پھر بھی یہ کہے گا کہ اس ڈاکیومنٹ میں لفظ "لائٹ" 67 بار آیا ہے۔ جب آپ دیکھ رہے ہیں کہ یہاں L چھوٹا ہے اور یہاں L بڑا ہے۔ تو اگر میں کیپٹل L کے ساتھ پورے ڈاکیومنٹ میں چیک کرنا چاہوں کہ کوئی لفظ لکھا ہے یا نہیں، تو میں "میچ کیس" کا آپشن کلک کروں گا، اور یہ بتا رہا ہے کہ پورے ڈاکیومنٹ میں کیپٹل L کے ساتھ کوئی بھی لفظ نہیں لکھا گیا۔ اگر میں ایسا کروں...
لائٹ کو میں یہاں ڈی ایکٹیویٹ کرتا ہوں اور اس لائٹ ڈاٹ سی ایس ایس کو، مثال کے طور پر، میں ریپلیس کرنا چاہتا ہوں۔ اگر مجھے لائٹ سی ایس ایس کو کسی اور لفظ سے ریپلیس کرنا ہو، جیسے لائٹر ڈاٹ سی ایس ایس، تو میں یہاں کلک کروں گا۔ یہاں لکھا ہے "ٹگل ریپلیس موڈ"، یعنی یہ سرچ موڈ کو ریپلیس موڈ میں بدل دے گا۔ اس کے بعد اگر میں یہاں کچھ لکھوں، مثال کے طور پر "LIGTH CSS"، تو آپ دائیں طرف دیکھیں، وہاں ہمیں بتا رہا ہے کہ ریپلیس کیا جائے گا۔ یعنی اس نے پورے ڈاکیومنٹ میں اس کا چار بار انسٹینس ڈھونڈ لیا ہے۔
ٹوتھ فور میں یہ پہلی کو ریپلیس کر دے گا، اور اگر میں چاہتا ہوں کہ جتنی بھی انسٹینسز اس نے ڈھونڈی ہیں، سب کو ایک ساتھ ریپلیس کر دوں تو ریپلیس آل کا بٹن کلک کروں گا، تو وہ سارے ایک ساتھ ہو جائیں گے۔ اسی طرح سے بآجت ایسا ہوتا ہے کہ آپ جس ورک اسپیس یا فولڈر میں کام کر رہے ہوتے ہیں، اس فولڈر یا ورک اسپیس میں آپ کو تمام فائلوں کے اندر کچھ چینجز کرنی پڑتی ہیں، جو کہ بہت زیادہ ہو سکتی ہیں، سینکڑوں بار ہو سکتی ہیں۔ تو اسے کرنے کے لیے ہم کیا کرتے ہیں؟ ہمارے پاس لیفٹ ہینڈ سائڈ پر ایک آئیکن ہوتا ہے، سرچ کا، جسے آپ ایکسیس کرتے ہیں۔
آپ اس کو کلک کر کے بھی ایکسیس کر سکتے ہیں۔ میک کے لیے کمانڈ شفٹ ایس اور ونڈوز کے لیے کنٹرول شفٹ ایف ہے۔ یہاں اگر آپ لکھیں S@S تو یہ ہمیں بتائے گا کہ ہمارے پورے ورک اسپیس یا فولڈر میں تقریباً 227 فائلوں میں 567 بار "لائڈ سی ایس" والا لفظ استعمال ہوا ہے۔ اگر میں اس "لائڈ سی ایس" کو ریپلیس کرنا چاہوں تو میں ٹائپ کروں گا ریڈ سی ایس۔ آپ دیکھ رہے ہیں اس نے یہاں پریویو میں دکھا دیا کہ جس ڈی سی کا بیک گراؤنڈ ریڈ کیا گیا ہے وہ ڈیلیٹ ہو جائے گا اور لائڈ سی...
جس کا بیک گراؤنڈ گرین ہے وہ ایڈ ہو جائے گا، اور اگر میں اسے بند کرتا ہوں تو آپ دیکھ رہے ہیں کہ اسے دوبارہ اوپن کرتے ہیں۔ یہ رائٹ ہینڈ پ آئیکن ہے، آپ دیکھ رہے ہیں یہ ریپلیس آل کا آئیکن ہے، مطلب کہ 567 بار، 277 فائلوں میں ایک ساتھ لائٹر سی ایس ایس ریپلیس ہو جائے گا۔ اگر میں یہاں کلک کرتا ہوں، لیکن اگر میں چاہتا ہوں کہ یہ چینج صرف کچھ خاص فائلوں میں ہو، جیسے کہ میں چاہتا ہوں کہ ایکس ڈی [موسیقی] html.com سے ایک بار اس لائن میں ہو، تو مجھے دوبارہ کلک کرنا پڑے گا، اس لائن میں تیسری بار، اور اس پوری فائل میں چینجز کریں۔
جو بھی ٹیکسٹس اس میں آئے ہیں، میں یہاں پر ریپلیس کرنے کے لیے کلک کروں گا۔ یہ سارے ڈاکیومنٹس، تقریباً 567 فائلز میں ریپلیس کرنے کے لیے میں یہاں کلک کروں گا تو یہ سب چیزیں یہاں پر بدل جائیں گی۔ اس سائڈ بار کو بند کرتے ہیں۔ میک میں یہ کام کرنے کے لیے کمانڈ بی دبائیں، اور ونڈوز میں کنٹرول بی۔ ایسا ہوتا ہے کہ کبھی کوئی لفظ تھوڑا بڑا ہوتا ہے اور دوبارہ ٹائپ کرنے میں تھوڑی محنت لگتی ہے، تو ہمیں کمانڈ ایف پریس کرنا پڑے گا، پھر وہ لفظ لکھنا پڑے گا۔ اس سے بہتر ہے کہ...
میں پہلے سے وہ لفظ سیلیکٹ کر لیتا ہوں جیسے "دس رِٹن ہئیر ہیڈر موبائل"۔ اگر میں اسے فائنڈ یا ریپلیس کرنا چاہوں تو پہلے اسے سیلیکٹ کروں گا، پھر کمانڈ ایف دباؤں گا۔ دیکھیں، اس نے یہ لفظ یہاں اٹھا کر پیسٹ بھی کر دیا، اسے سرچ بھی کر لیا اور بتا دیا کہ اس پورے ڈاکومنٹ میں کتنی بار آیا ہے۔ تو امید ہے کہ یہ ویڈیو آپ کو تھوڑا بہت بہتر پروگرامر بننے میں مدد دے گی۔ پی ایس: شکریہ دیکھنے کا۔
Installing themes3:43
چلو تھیمز کے بارے میں بات کرتے ہیں۔ تھیمز بہت اہم ہوتے ہیں کیونکہ آپ کو اپنے کوڈنگ ماحول میں کافی وقت گزارنا پڑتا ہے۔ اگر وہ خوبصورت اور ویژولی اپیلنگ ہو تو کام کرنے میں مزہ آتا ہے۔ تو ہم تھیمز کو چینج کر سکتے ہیں۔ سب سے پہلے ہم کمانڈ پیلیٹ کو اوپن کریں گے، کمانڈ شفٹ پی سے کمانڈ پیلیٹ کھلے گا، اور یہاں آپ لکھیں گے "کلر تھیمز"۔ کلر تھیمز آپ کو پریفرنسز میں نظر آ جائے گا۔ یہاں پر آپ کی انسٹال شدہ تمام کلر تھیمز نظر آنے لگیں گی۔ VS کوڈ کے اندر ایک بہت اچھا...
بات یہ ہے کہ جیسے ہی آپ کوئی کلر تھیم منتخب کرتے ہیں، وہ فوراً اپلائی ہو جاتی ہے اور آپ دیکھ سکتے ہیں کہ اس کا پریویو کیسا آ رہا ہے۔ چلیں اوپر سے شروع کرتے ہیں ڈارک ویوز سے۔ یہ ایک بہترین اور خوبصورت تھیمز میں سے ہے۔ اب نائٹ آول بھی ایک بہت پیاری تھیم ہے، آپ دیکھ سکتے ہیں کہ اس میں کتنے زیادہ فلیٹ آئیکنز ہیں اور اس کا لک پچھلی تھیم کے مقابلے میں بہت بہتر نظر آ رہا ہے۔ اب نائٹ میں پرپل اور ونٹر میں ڈارک بلو کے شیڈز ہیں۔ یہ تینوں تھیمز دیکھنے میں بہت خوبصورت ہیں۔
یہ نائٹ اوول بہت زبردست ہے اور سردی آ رہی ہے، آپ اسے کئی طریقوں سے انسٹال کر سکتے ہیں۔ تو میں آپ کو ایک طریقہ بتانے جا رہا ہوں، جو آپ دیکھ سکتے ہیں۔ چلو شروع کرتے ہیں۔ اب دیکھتے ہیں کہ تھیم کیسے لگائی جا سکتی ہے۔ تھیم لگانے کے لیے آپ کو ایکسٹینشن میں جانا پڑے گا۔ دوبارہ یہاں کلک کریں یا گئر آئیکن پر کلک کر کے ایکسٹینشن پر جائیں، یا پھر اس کی شارٹ کٹ ہے، کمانڈ + شفٹ + ایکس۔ ایکسٹینشن میں جا کر آپ یہاں لکھ سکتے ہیں 'یو پی تھیم' تاکہ تھیم سامنے آجائے۔
یہ طریقہ سے آپ کے سامنے تھیمز آ سکتی ہیں۔ دوسرا، آپ یہاں کلک کر سکتے ہیں اور کیٹیگری میں جا سکتے ہیں، یہاں سے تھیمز کو سلیکٹ کر سکتے ہیں۔ اسی طرح آپ سب سے زیادہ مقبول تھیمز اور ایکسٹینشنز بھی تلاش کر سکتے ہیں۔ لیکن ابھی کے لیے کیونکہ ہم صرف تھیمز ڈھونڈ رہے ہیں، اور تھیم ایکسٹینشن کا بھی حصہ ہے، تو آپ یہاں چیک کر سکتے ہیں کہ اس کے 3 ملین ڈاؤن لوڈز ہیں، اس کے فور اسٹار ریویوز ہیں۔ مٹیریل کے 2 ملین ڈاؤن لوڈز ہیں، اور اسی طرح آپ انہیں کرونولوجیکل آرڈر میں دیکھ سکتے ہیں، ان کا پریویو بھی چیک کر سکتے ہیں، جیسے۔
اس میٹیریل تھیم کے رائٹ ہینڈ سائیڈ پر ہم دیکھ سکتے ہیں کہ تھیم کیسا دکھائی دے رہا ہے۔ اگر انہوں نے اپنا پریویو یہاں شیئر کیا ہے، تو آپ ٹم وان ڈارک تھیم رائٹ ہینڈ پر دیکھ سکتے ہیں۔ کیا آپ کو یہ پریویو پسند آیا؟ اگر پسند آیا تو آپ انسٹال کا بٹن کلک کر کے اسے انسٹال کر سکتے ہیں۔ جب تھیم ایک بار انسٹال ہو جائے گا تو آپ دوبارہ کمانڈ شفٹ پ پریس کریں گے، پھر پریفرنسز میں جائیں گے، کلر تھیمز میں جائیں گے اور اپنی من پسند تھیم پر اسے اپلائی کر دیں گے۔ یہ ہو گئی، آپ اسے چیک کر سکتے ہیں، کمانڈ پلس کر کے اس کا ویو بڑا کر سکتے ہیں۔
ہم یہ کرتے ہیں اور یہاں ہمارے پاس ایک ایکسڈ ہے، دیکھتے ہیں اس کا اوورال پریویو کیسا آ رہا ہے۔ کمانڈ بی دبا کر سائیڈ بار کو بند کریں اور پریویو دیکھیں۔
Developer Screen Cast Mode in VSCode - How to make your pressed-key visible on s1:41
چلو تھیمز کے بارے میں بات کرتے ہیں۔ تھیمز بہت اہم ہوتے ہیں کیونکہ آپ کو اپنے کوڈنگ ماحول میں کافی وقت گزارنا پڑتا ہے۔ اگر وہ خوبصورت اور ویژولی اپیلنگ ہو تو کام کرنے میں مزہ آتا ہے۔ تو ہم تھیمز کو چینج کر سکتے ہیں۔ سب سے پہلے ہم کمانڈ پیلیٹ کو اوپن کریں گے، کمانڈ شفٹ پی سے کمانڈ پیلیٹ کھلے گا، اور یہاں آپ لکھیں گے "کلر تھیمز"۔ کلر تھیمز آپ کو پریفرنسز میں نظر آ جائے گا۔ یہاں پر آپ کی انسٹال شدہ تمام کلر تھیمز نظر آنے لگیں گی۔ VS کوڈ کے اندر ایک بہت اچھا...
بات یہ ہے کہ جیسے ہی آپ کوئی کلر تھیم منتخب کرتے ہیں، وہ فوراً اپلائی ہو جاتی ہے اور آپ دیکھ سکتے ہیں کہ اس کا پریویو کیسا آ رہا ہے۔ چلیں اوپر سے شروع کرتے ہیں ڈارک ویوز سے۔ یہ ایک بہترین اور خوبصورت تھیمز میں سے ہے۔ اب نائٹ آول بھی ایک بہت پیاری تھیم ہے، آپ دیکھ سکتے ہیں کہ اس میں کتنے زیادہ فلیٹ آئیکنز ہیں اور اس کا لک پچھلی تھیم کے مقابلے میں بہت بہتر نظر آ رہا ہے۔ اب نائٹ میں پرپل اور ونٹر میں ڈارک بلو کے شیڈز ہیں۔ یہ تینوں تھیمز دیکھنے میں بہت خوبصورت ہیں۔
یہ نائٹ اوول بہت زبردست ہے اور سردی آ رہی ہے، آپ اسے کئی طریقوں سے انسٹال کر سکتے ہیں۔ تو میں آپ کو ایک طریقہ بتانے جا رہا ہوں، جو آپ دیکھ سکتے ہیں۔ چلو شروع کرتے ہیں۔ اب دیکھتے ہیں کہ تھیم کیسے لگائی جا سکتی ہے۔ تھیم لگانے کے لیے آپ کو ایکسٹینشن میں جانا پڑے گا۔ دوبارہ یہاں کلک کریں یا گئر آئیکن پر کلک کر کے ایکسٹینشن پر جائیں، یا پھر اس کی شارٹ کٹ ہے، کمانڈ + شفٹ + ایکس۔ ایکسٹینشن میں جا کر آپ یہاں لکھ سکتے ہیں 'یو پی تھیم' تاکہ تھیم سامنے آجائے۔
یہ طریقہ سے آپ کے سامنے تھیمز آ سکتی ہیں۔ دوسرا، آپ یہاں کلک کر سکتے ہیں اور کیٹیگری میں جا سکتے ہیں، یہاں سے تھیمز کو سلیکٹ کر سکتے ہیں۔ اسی طرح آپ سب سے زیادہ مقبول تھیمز اور ایکسٹینشنز بھی تلاش کر سکتے ہیں۔ لیکن ابھی کے لیے کیونکہ ہم صرف تھیمز ڈھونڈ رہے ہیں، اور تھیم ایکسٹینشن کا بھی حصہ ہے، تو آپ یہاں چیک کر سکتے ہیں کہ اس کے 3 ملین ڈاؤن لوڈز ہیں، اس کے فور اسٹار ریویوز ہیں۔ مٹیریل کے 2 ملین ڈاؤن لوڈز ہیں، اور اسی طرح آپ انہیں کرونولوجیکل آرڈر میں دیکھ سکتے ہیں، ان کا پریویو بھی چیک کر سکتے ہیں، جیسے۔
اس میٹیریل تھیم کے رائٹ ہینڈ سائیڈ پر ہم دیکھ سکتے ہیں کہ تھیم کیسا دکھائی دے رہا ہے۔ اگر انہوں نے اپنا پریویو یہاں شیئر کیا ہے، تو آپ ٹم وان ڈارک تھیم رائٹ ہینڈ پر دیکھ سکتے ہیں۔ کیا آپ کو یہ پریویو پسند آیا؟ اگر پسند آیا تو آپ انسٹال کا بٹن کلک کر کے اسے انسٹال کر سکتے ہیں۔ جب تھیم ایک بار انسٹال ہو جائے گا تو آپ دوبارہ کمانڈ شفٹ پ پریس کریں گے، پھر پریفرنسز میں جائیں گے، کلر تھیمز میں جائیں گے اور اپنی من پسند تھیم پر اسے اپلائی کر دیں گے۔ یہ ہو گئی، آپ اسے چیک کر سکتے ہیں، کمانڈ پلس کر کے اس کا ویو بڑا کر سکتے ہیں۔
ہم یہ کرتے ہیں اور یہاں ہمارے پاس ایک ایکسڈ ہے، دیکھتے ہیں اس کا اوورال پریویو کیسا آ رہا ہے۔ کمانڈ بی دبا کر سائیڈ بار کو بند کریں اور پریویو دیکھیں۔
Use CODE RUNNER extention of VS CODE to run your code and inspect in terminall3:18
اس ویڈیو میں ہم VS کوڈ کے ایک ایکسٹینشن کے بارے میں بات کریں گے جس سے آپ اپنی کسی بھی پروگرامنگ زبان کا کوڈ رن کر کے ٹرمینل میں چیک کر سکتے ہیں۔ اس کے کئی طریقے ہوتے ہیں، لیکن چونکہ آپ چاہتے ہیں کہ جہاں آپ کوڈنگ کر رہے ہوں وہیں پر اپنے کوڈ کو بار بار چیک بھی کر سکیں، تو ایک آسان طریقہ ہے۔ اس کے لیے آپ VS کوڈ کے ایکسٹینشنز میں جائیں گے، جسے آپ Ctrl+Shift+X سے بھی کھول سکتے ہیں۔ وہاں پر آپ لکھیں گے "Code Runner" یا "کوڈ رنر" اور اوپر آپ کو یہ ایکسٹینشن مل جائے گا۔
3.9 ملین ڈاؤن لوڈز ہو چکے ہیں اور 4.5 اسٹار کی ریٹنگ ہے، اور جتنی بھی زبانیں آپ یہاں دیکھ رہے ہیں جیسے C، C++، پائتھن، جاوا، PHP، یہ سب کے سب کے نتائج آپ کو جنریٹ کر کے دکھا سکتا ہے۔ یہ ایکسٹینشن میرے پاس انسٹال ہے اسی وجہ سے یہاں ان انسٹال اور ڈس ایبل کا بٹن آرہا ہے۔ اگر یہ آپ کے پاس انسٹال نہیں ہے تو یہاں انسٹال کا بٹن آئے گا جس پر کلک کر کے آپ اسے اپنے کمپیوٹر پر انسٹال کر سکتے ہیں۔ ان کا ایک پبلک چیٹنگ اکاؤنٹ بھی ہے جہاں آپ کسی بھی قسم کی بات چیت کر سکتے ہیں اور معلومات حاصل کر سکتے ہیں۔ اس ایکسٹینشن کے حوالے سے یہ ڈاکیومنٹیشن ہے۔
یہ تھوڑا سا کوڈ ہے جسے آپ پڑھ سکتے ہیں، میں نے اپنے پاس یہ رن کیا ہوا ہے۔ انسٹالیشن کے بعد میں یہ کرتا ہوں، ایک چھوٹا سا کوڈ ہے جس کا مجھے رزلٹ معلوم کرنا ہے۔ میرے پاس دو تین طریقے ہیں۔ سب سے پہلے تو یہ کہ جب آپ انسٹال کرتے ہیں تو یہاں "رن کوڈ" کے نام سے ایک بٹن آ جاتا ہے، اسے آپ سیدھے سیدھے پریس کر سکتے ہیں۔ اس سے ہمیں اس کوڈ کا تھوڑا سا اوورویو آؤٹ پٹ میں دکھا دے گا۔ میں یہ کرتا ہوں۔ کلئیر۔ دوسرا طریقہ یہ ہے کہ آپ کنسول لاگ کو سیلیکٹ کریں اور یا تو...
آپ یہاں رائٹ کلک کریں گے تو "رن کوڈ" لکھا ہوا آئے گا، اسے آپ ڈائریکٹلی سلیکٹ بھی کر سکتے ہیں۔ یہاں لکھا ہے "نمبر اری ایز ناٹ ڈیفائنڈ"، اس لیے کیونکہ یہ کوڈ صحیح نہیں ہے۔ اب اگر میں دوبارہ اسے رن کرتا ہوں تو آپ دیکھ سکتے ہیں کہ اس نے کوڈ رن کر دیا ہے۔ نمبر اری ٹ یہاں پر پلوٹ ہو گیا ہے، اور میں نے پش کے ذریعے اس میں 3 ایڈ کیا ہے۔ تو یہ پورا کنسول ڈاٹ لاگ نمبر اری کا رزلٹ یہاں دکھا رہا ہے۔ تو ایک طریقہ اس ایکسٹینشن کو استعمال کرنے کا یہ ہے کہ آپ یہاں ڈائریکٹ بٹن دبا دیں۔
دوسرا طریقہ یہ ہے کہ آپ سیدھے کنٹرول آلٹ این پریس کریں۔ کنٹرول آلٹ این، یہاں آپ دیکھ رہے ہیں کہ یہ اس کا نتیجہ ظاہر کر رہا ہے۔ اس کے علاوہ ایک تیسرا طریقہ جو اس میں ہے وہ یہ ہے کہ آپ ایف 1 دبائیں، پھر یہاں لکھیں "رن بائی لینگویج"۔ اس پر کلک کریں اور جاوا اسکرپٹ منتخب کر لیں اگر آپ کا جاوا اسکرپٹ کوڈ ہے تو یہاں یہ اس کا نتیجہ دکھا دے گا۔ امید ہے یہ ویڈیو آپ کے لیے بہت مددگار ثابت ہوگی۔ دیکھنے کا بہت شکریہ۔
vscode is the most popular cross platform extendable light weight free IDE based3:09
کوڈ ایک آئی ڈی ہے جس میں آپ اپنا کوڈنگ یا ڈیولپمنٹ کا ماحول بنا سکتے ہیں، اسے بڑھا سکتے ہیں، اور اس کے ایکسٹینشن استعمال کر سکتے ہیں۔ یہ بالکل فری اور اوپن سورس ہے۔ اس وقت یہی سب سے زیادہ پاپولر آئی ڈی ہے جسے سب سے زیادہ لوگ استعمال کرتے ہیں۔ یہ کراس پلیٹ فارم بھی ہے، جیسا کہ آپ دیکھ سکتے ہیں یہاں "ڈاؤن لوڈ فار میک" لکھا ہے کیونکہ میں میک پر ہوں، لیکن اسے لینکس اور ونڈوز پر بھی استعمال کیا جا سکتا ہے۔ اس کے دو ورژن ہیں: اسٹेबल بلڈ اور انسائیڈر ایڈیشن۔ دونوں میں تھوڑا فرق یہ ہے کہ اسٹेबल بلڈ ٹیسٹڈ ہوتی ہے اور۔۔۔
इनसाइडर वर्जन में कुछ ऐसे नए फीचर्स होते ہیں जो अभी तक पब्लिक में नहीं आए होते۔ आप दोनों को टेस्ट कर सकते हैं। विजुअल कोड और सीएस कोड में इंटेलिजेंस होती है, मतलब कोड की हाईलाइटिंग और कोड की समझदारी। आप इसमें अपने कोड को डीबग कर सकते हैं, यानी कोड को चला-फिरा के चेक कर सकते हैं। आपको बार-बार कंसोल में जाकर चेक करने की जरूरत नहीं पड़ती। ब्राउजर में बिल्ट-इन गिट का सिस्टम होता है, जिससे आप गिटहब या किसी और गिट रिपॉजिटरी से अपनी आईडी कनेक्ट कर सकते हैं और सीधे इसका पूरा स्टेटस देख सकते हैं।
آپ اپنے گٹ کو اس طرح استعمال کر سکتے ہیں کیونکہ اس کے کئی ایکسٹینشنز ہیں جو ہر طرح کے مسئلے حل کرنے کے لیے ہیں۔ یہ ایک ہلکا پھلکا اور بہت زیادہ کسٹمائز کرنے والا آئی ڈی ہے ڈیولپرز کے لیے۔ اس کی ویب سائٹ پر تمام تفصیلات دی گئی ہیں جہاں سے آپ اسے ڈاؤنلوڈ کرکے انسٹال کر سکتے ہیں، چاہے وہ ونڈوز کا 64 یا 32 بٹ ورژن ہو، یا میک کا ورژن، یہاں تک کہ لینکس کا ورژن بھی دستیاب ہے۔ یہ گٹ ہب پر 108,000 سے زیادہ اسٹارز حاصل کر چکا ہے کیونکہ یہ ایک بہت مقبول آئی ڈی ہے اور اسے الیکٹران جے ایس پر بنایا گیا ہے۔
الیکٹران JS جاوا اسکرپٹ کی بنیاد پر ایک ایسی ایپلیکیشن بناتا ہے جو ڈیسک ٹاپ ایپلیکیشن ہوتی ہے، لیکن یہ ویب کی ٹیکنالوجی یعنی HTML، CSS اور جاوا اسکرپٹ کے ذریعے تیار کی جاتی ہے۔ مطلب یہ کہ آپ ویب ٹیکنالوجیز استعمال کرکے ڈیسک ٹاپ ایپ بنا رہے ہوتے ہیں، اور وہ ایپلیکیشنز بھی مختلف پلیٹ فارمز کے لیے ہوتی ہیں۔ جیسے میک پر بہت سی مشہور ایپلیکیشنز بنی ہیں، جیسے Slack، Facebook Messenger، یا وہی VS Code جس کی ہم ابھی بات کر رہے ہیں۔ یہاں ان کا ایک چھوٹا سا تعارف دیا گیا ہے کہ کون کون سی ایپلیکیشنز الیکٹران کے ذریعے بنائی گئی ہیں۔
یہ تقریباً تمام بڑے نام ہیں جیسے ٹچ جو وائے کمیٹر کا ایک اسٹارٹ اپ ہے، انویژن، سلیک، ف میسنجر اور وژوئل کوڈ اسٹوڈیو، تو آپ بس یہ وژوئل کوڈ اسٹوڈیو ڈاؤن لوڈ کر سکتے ہیں، وہاں سے ایکشن بٹن ہوتا ہے، انسٹال کر لیں۔

Requirements

You should have vscode installed and should have some basic knowledge of vscode.

Description

You will learn to make your coding and development environment more fast, easy, and your user experience will become more better. This course introduces you to vscode extentions.

vscode settings sync, live server, vscode dimmer, peacock, keybindings, shortcuts, settings, todo, highlight, bracket pair colorizer, auto rename tag, turbo console log, material icon theme,

Are you tired of constantly switching between tabs, struggling with messy code, or wasting precious time on repetitive tasks? Whether you're a beginner, web developer, freelancer, or seasoned programmer, Master VSCode Productivity will transform your coding workflow and help you become significantly faster and more efficient in Visual Studio Code.

In this hands-on, practical course, you’ll discover the best VSCode extensions and built-in features that professional developers use daily to boost their productivity. Through 10+ crafted lectures, you’ll learn how to customize, optimize, and supercharge your development environment.

What You’ll Learn:

Lecture 1: Supercharge your focus with the powerful Focus extension
Lecture 2: Beautify your VSCode interface by changing window border colors using the Peacock extension
Lecture 3: Resolve annoying keyboard shortcut conflicts like a pro
Lecture 4: Compare two files side-by-side directly inside VSCode
Lecture 5: Make your code easier to read with Bracket Pair Colorizer
Lecture 6: Create and manage professional todo lists right inside your code files
Lecture 7: Automatically rename HTML/JSX tags with the Auto Rename Tag extension
Lecture 8: Master console.log workflows — quickly create, comment, uncomment, and delete logs using shortcuts
Lecture 9: See live changes instantly with the Live Server extension
Lecture 10: Save, sync, and replicate your entire VSCode setup across multiple machines

By the end of this course, you’ll have a , beautiful, productive VSCode setup that feels tailor-made for you. You’ll write cleaner code, debug faster, reduce repetitive tasks, and enjoy coding more than ever before.

No previous VSCode expertise required — everything is explained step-by-step with clear demonstrations. Whether you code in JavaScript, React, Python, PHP, or any other language, these productivity hacks are universal.

Enroll now and take your coding efficiency to the next level. Stop fighting with your editor and start mastering it!

Who this course is for:

Professional developers and students.

Master VSCode Productivity: 10+ Powerful Extensions & Hacks

What you'll learn

Explore related topics

Course content

Extentions13 lectures • 40min

vscode10 lectures • 47min

Requirements

Description

Who this course is for: