آشنایی با Visual Studio Code (قسمت دوم)

قسمت Extensions ها در Visual Studio Code

همانطور که قبلا گفته بودم افزونه ها طراحی شده اند را یک برنامه را تکمیل کنند و مخصوص Visual Studio Code نیستند. به طور مثال افزونه های مختلفی برای مرورگر گوگل کروم داریم (افزونه ی IDM، افزونه ی AD blcok، افزونه ی google translate، افزونه ی screen capture و...) که هر کدام به نوعی مرورگر کروم را تکمیل می کنند. به طور مثال افزونه ی Ad block تبلیغات مزاحم سایت ها را غیرفعال می کند بنابراین تجربه ی کاربری شما در مرورگر کروم را بهبود بخشیده و در کل کروم را ارتقاء می دهد.

افزونه های VSCode نیز به همین شکل با آن برخورد می کنند. تعداد این افزونه ها آنقدر زیاد است که من نمی توانم همه را نام ببرم اما برای مثال شما را با کارایی یکی از آن ها آشنا می کنم. در Visual Studio Code یک افزونه به نام Bracket Pair Colorizer وجود دارد و کار آن این است که پرانتزها، براکت ها، curly braces ها و اینطور علامات را به صورت جفت جفت رنگی کند. این کار باعث می شود در کدهای پیچیده گم نشویم و ابتدا و انتهای هر پرانتز و براکت مشخص شود.

از طرف دیگر افزونه هایی نیز وجود دارند که کارشان تنها ظاهر سازی نیست بلکه قابلیت های اساسی تری را به VSCode اضافه می کنند. به طور مثال اگر بخواهید از فریم ورک هایی مانند Angular یا React استفاده کنید، هیچ پشتیبانی برای آن ها یافت نخواهید کرد (می توانید کد بنویسید اما از قابلیت های پیشرفته ی ویرایشگر محروم می شوید). حالا راه حل چیست؟ راه حل ساده دانلود کردن افزونه ای به نام Angular Essentials by John Papa است. این افزونه قابلیت های پایه ای آنگولار را به ویرایشگر شما اضافه خواهد کرد.

توجه داشته باشید که برای راه اندازی بعضی از این افزونه ها باید یک بار ویرایشگر را بسته و دوباره باز کنید.

Shortcut های کاربردی

نوشتن کد در VSCode بسیار لذت بخش است اما آشنایی با کلیدهای میانبر می تواند این فرآیند را حتی لذت بخش تر از قبل هم بکند. من سعی کرده ام برخی از ویژگی ها یا عملیات هایی را که مکررا مورد استفاده قرار می گیرند، برایتان جمع کنم تا حداقل با موارد پرکاربرد آشنا باشید. برای یادگیری بقیه ی Shortcut ها می توانید به بخش Keyboard Shortcuts خود Visual Studio Code بروید. برای باز کردن این بخش یکی از راه های زیر را امتحان کنید:

• منوی File، سپس منوی Prefrence و سپس منوی Keyboard Shortcuts
• نگه داشتن کلید Ctrl و فشردن کلیدهای K + S

نکته ای برای کاربران macOS: در تمامی کلیدهای میانبری که در این مقاله ذکر خواهد شد، باید به جای Ctrl (که در مک موجود نیست) از کلید CMD استفاده کنید که معادل Ctrl در سیستم های مک است. بنابراین دستور بالا می شود نگه داشتن کلید CMD و فشردن کلیدهای K + S در عین حال اگر در بروزرسانی های بعدی کلیدهای میانبر VSCode تغییری داشتند (چه برای ویندوز و چه برای مک) باید با مراجعه به منوی Keyboard Shortcuts در VSCode ترکیب جدید را مطالعه کنید. بنابراین من برای هر کدام از کلیدهای زیر نام قابلیت را نیز می آورم تا بتوانید آن را در تنظیمات VSCode پیدا کنید.

میانبرهای عمومی:

• Shift + Ctrl + P: این مجموعه کلید باعث باز شدن Command Palette می شود که در خود تمامی دستورات و قابلیت های VSCode را دارد. این قابلیت Show All Commands نام دارد بنابراین می توانید با جست و جوی این نام در Keyboard Shortcuts آن را پیدا کنید.
• Shift + Ctrl + `: این مجموعه کلید باعث باز شدن ترمینال درونی VSCode می شوند. این ترمینال هیچ تفاوتی با Command Prompt ندارد و می توانید تمامی دستورات مورد نیاز خود را در آن وارد کنید. توجه داشته باشید که محدودیتی برای تعداد ترمینال های باز شده در VSCode وجود ندارد. بنابراین می توانید به هر تعدادی که دوست داشتید ترمینال باز کنید. نام این قابلیت Toggle Integrated Terminal است.

میانبرهای کدنویسی

• Ctrl + D: این مجموعه کلید کد بعدی را که با کد فعلی انطباق دارد Select خواهد کرد. به طور مثال اگر با موس خود عبارت PHP را select کرده باشید (آبی شدن دور نوشته) و کلیدهای Ctrl + D را بزنید، عبارت بعدی PHP را پیدا کرده و آن را انتخاب (Select) می کند. نام این قابلیت Add Selection to Next Find Match می باشد.
• Alt + Ctrl + Up Arrow: این مجموعه کلید قابلیتی به نام Add Cursor Above را برایتان اجرا می کنند. به عبارت دیگر با فشردن این کلیدها cursor (علامت مکان نما در هنگام تایپ که همیشه چشمک می زند) در همین موقعیت، یک خط بالاتر می رود. منظور من از Up Arrow همان کلید فلشِ به سمت بالا در سمت راست کیبورد است.
• Alt + Ctrl + Down Arrow: این مجموعه کلید قابلیتی به نام Add Cursor Below را برایتان اجرا می کنند. به عبارت دیگر با فشردن این کلیدها cursor (علامت مکان نما در هنگام تایپ که همیشه چشمک می زند) در همین موقعیت، یک خط پایین تر می رود.
• Shift + Alt + F: این مجموعه کلید تمام سورس کد شما را مرتب می کنند (از نظر فرورفتگی ها و مسائل ظاهری). اگر با زبانی کار کنید که به صورت پیش فرض توسط VSCode پشتیبانی نشود به شما پیام عدم پشتیبانی نمایش داده شده و کدهایتان مرتب نمی شوند. برای رفع این پیام باید از قسمت extensions یک افزونه برای کار خود پیدا کنید. این نوع افزونه ها معمولا با نام formatter یا beautifier شناخته می شوند. نام این قابلیت Format Document است.
• Shift + Ctrl + 7: این مجموعه کلید خطوط انتخاب شده توسط شما را کامنت می کنند. نام این قابلیت Toggle Line Comment می باشد.
• Ctrl + Alt + A: این مجموعه کلید بلوکه ی کد مورد نظر شما را کامنت می کنند و نام آن در منوی میانبر های VSCode عبارت Toggle Block Comment است.

میانبرهای مدیریت پروژه

• Ctrl + Tab: با فشردن این دو کلید، بین اسناد/فایل های باز (سربرگ ها یا tab ها) در پروژه ی فعلی جا به جا خواهید شد. نام این قابلیت Open Next Recently Used Editor in Group است.
• Ctrl + P: با فشردن این دو کلید، بین فایل هایی که اخیرا باز شده بودند، جابجا خواهید شد. نام این قابلیت Open Recent است.
• Ctrl + R: با فشردن این دو کلید، بین پروژه ها یا فایل هایی که اخیرا باز شده بودند، جابجا خواهید شد.

در صورتی که نیاز به پیدا کردن قابلیت خاصی داشتید، همیشه می توانید به منوی Keyboard Shortcuts سر بزنید. البته Visual Studio Code راه بهتری را برایتان در نظر گرفته است. ابتدا Command Palette را باز کرده و سپس عبارت Keyboard Shortcuts Reference را در آن تایپ کنید. با فشردن کلید Enter یک فایل pdf حاوی تمام ارجاعات میانبر های VSCode برایتان نمایش داده خواهد شد.

این ها موارد ساده و مقدماتی برای شروع کار حساب می شوند بنابراین لازم است هر کسی آن ها را بداند تا بتواند در مسیر برنامه نویسی خود موفق باشد.