طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

۱۰ نکته کاربردی در استفاده از Visual Studio Code

يكشنبه, ۳۰ تیر ۱۳۹۸، ۰۳:۵۶ ب.ظ

Visual Studio Code را میتوان به راحتی بهترین ویرایش گر متن در برنامه نویسی دانست. از زمان استفاده از این ویرایشگر عاشق کار با آن شده‌ام. Visual Studio Code یک برنامه جاوا اسکریپتی است که بر پایه الکترون طراحی شده است(مانند اتم یکی دیگر از ویرایشگر های رایج متون). این نرم افزار بسیار سریع بوده و از مشکلات مربوط به کارایی رنج نمی‌برد.

visual-studio-code

 چیزی که در بیشتر اپلیکیشن‌های جاوا اسکریپت دیده می شود. اما نکته ای که می تواند شما را شگفت زده کند این است که ویژوال استودیو کد یک پروژه سورس باز بوده که سورس کامل آن در گیت هاب قرار گرفته است. در این مقاله به نکاتی از این نرم افزار اشاره می‌کنم که می‌تواند در استفاده از آن به شما کمک کند.


۱.در Command Palette ویژوال استودیو کد استاد شوید

vscode

مانند نرم افزارهای Sublime و TextMate ویژوال استودیو کد نیز چیزی به نام command palette دارد. این ویژگی به شما کمک می کند که فقط با تایپ کردن دستورات به امکانات مختلف نرم افزار دسترسی پیدا کنید. 

بدون اینکه مجبور باشید از منو ها استفاده کنید می‌توانید با استفاده از ترکیب کلیدهای Ctrl + Shift + P به command palette دسترسی پیدا کنید. سپس فقط کافیست چیزی را که میخواهید تایپ کنید. پس از این گزینه ها بر اساس جستجوی شما دسته بندی می شوند. این ویژگی دسترسی به امکانات نرم افزار را بسیار سریع می کند.

۲.پوشه ای که مربوط به پروژه کار شماست را تعیین کنید

vs

اگر در نوار کناری نرم افزار بر روی Explorer کلیک کنید برای شما یک زیر پنل نمایان میشود. این پنل به دو قسمت تقسیم می شود. Open Editors (فایل ها و اسنادی که در حال حاضر باز هستند) و فولدرهایی که بسته هستند.

بر روی Open Folder کلیک کنید (و یا از منو File > Open Folder را انتخاب کنید)، سپس هر فایلی که در سیستم، مورد نظرتان است را انتخاب کنید. این کار باعث می‌شود فولدر مورد نظر در VS Code به عنوان پروژه جاری شما بارگذاری شود و به شما اجازه می دهد که به همه فایل ها و فولدر های آن دسترسی داشته باشید.

۳.چندین فایل را همزمان مشاهده کنید

vs

بیشتر ویرایشگر های پیشرفته متن امکان مشاهده چندین فایل را به صورت همزمان برای شما فراهم می آورد و به شما اجازه می دهند در بین تب های این فایلها پیمایش کنید. ویرایشگر های پیشرفته امکان ویرایش فایل ها به صورت side-by-side را به شما میدهند. این امکان در Visual Studio Code به صورت افقی پشتیبانی می شود.

البته ویرایش فایلها بصورت side-by-side در مانیتورهای کوچکتر کمی کار را سخت می‌کند. در Visual Studio Code چیزی به نام پنل های داینامیک وجود دارد. با استفاده از این امکان زمانی که تب های اسناد شما بیش از حد باریک شوند با فعال شدن هر کدام این تب ها، آنها در کل صفحه گسترش می‌یابند. این مکان می‌تواند برای شما دوست داشتنی باشد.

۴. ویرایش چندین خط به طور همزمان

vs

اگر شما نیاز داشته باشید که نمونه ای از متنی را در چند خط از کد خود اضافه و یا حذف کنید، همه آن چیزی که باید انجام دهید این است که چندین مکان نما ایجاد کنید. می‌توانید این کار را با پایین نگه داشتن دکمه Alt و کلیک در هر نقطه از متن انجام دهید. این کار در اسناد html می‌تواند بسیار مفید باشد برای مثال زمانی که نیاز دارید  نمونه ای از یک کلاس را در چند جای متن اضافه کنید و یا فرمت چندین هایپر لینک را تغییر دهید. این امکان را یاد بگیرید و از آن لذت ببرید.

۵. به تعاریف رجوع کنید

vs

زمانی که در حال کدنویسی هستید ممکن است به متغیرها و یا توابعی برخورد کنید که آنها را به خاطر نمی آورید در این مواقع چه کاری انجام می دهید؟ می توانید چندین دقیقه در کد خود به دنبال تعریف آن عنصر بگردید و یا اینکه با استفاده از مکان نمای موس متغیر و تابع مورد نظر خود را انتخاب کرده و  سپس دکمه  F12 را بفشارید. در این صورت سریعا به تعریف عنصر مورد نظر خواهید رفت.

vs

می توانید از ترکیب کلید Alt + F12 نیز استفاده کنید. در این صورت تعریف مورد نظر در همان جایی که مکان نما قرار دارد به شما نمایش داده می شود و فایل سورس مورد نظر باز نمیشود. باالعکس برای یافتن تمام رفرنس های یک متغیر و یا تابع در برنامه می توان از ترکیب کلید های Shift + F12 استفاده نمود. به منظور کار کردن این ویژگی ها باید اطمینان حاصل کنید که فولدر مورد نظر به عنوان پروژه کار جاری باز باشد.

۶.تغییر نام در همه مکان‌ها

vs

عمل ریفکتورینگ یکی از ملزومات لازم برای نوشتن کدی است که تمیز باشد. اما زمانی که پروژه شما خیلی بزرگ باشد این کار می‌تواند برای شما بسیار سخت باشد. بنابراین به جای رجوع به دهها فایل و تغییر نام یک متغیر و تابع در آنها، اجازه دهید که Visual Studio Code برای شما این کار را انجام دهد.

اگر شما یک متغیر و یا تابع را انتخاب کنید و سپس دکمه F2 را بفشارید می توانید نام آن عنصر را تغییر داده و سپس این تغییر در کل پروژه شما اعمال خواهد شد. اگر می‌خواهید تغییرات تنها در فایل جاری شما انجام شود از ترکیب Ctrl + F2 استفاده کنید/

۷.جستجو در میان همه فایل ها

vs

زمانی که نیاز دارید به دنبال یک کلمه و یا جمله ای در همه فایل های خود بگردید می توانید از امکان جستجوی این نرم افزار استفاده کنید. با استفاده از ترکیب دکمه های Ctrl + F می توانید در فایل جاری جستجو را انجام دهید. در صورتی که بخواهید جستجو در تمام فایل های پروژه شما انجام شود از ترکیب Ctrl + Shift + F استفاده کنید.

۸.از Command Line در ویژوال استودیو کد استفاده کنید

vs

ویژوال استادیو کد شامل یک خط فرمان است. این خط فرمان در ویندوز با نام Command Prompt شناخته می‌شود. با این حال دستورات Command Line در فایل های پروژه جاری شما کار می کنند. با استفاده از این امکان می توانید دستورات مورد نظرتان را اجرا کنید.

۹.دانلود تمی جدید در جایگزین

vs

همانطور که انتظار می رود ویژوال استادیو کد به شما اجازه می دهد قالب کدهای خود را تغییر دهید. این می‌تواند برای بسیاری از اهمیت بالایی برخوردار باشد. شما می توانید از تم های رایگانی که در لینک VS Code Marketplace قرار دارد، استفاده کنید.

۱۰.نصب افزونه های خارجی

vs

آخرین ویژگی لازم و ضروری قابلیت گسترش پذیری نرم افزار Visual Studio Code است. از طریق افزونه هایی که برای این نرم افزار وجود دارد می توان قابلیت های این نرم افزار را افزایش داد. با استفاده از ترکیب کلیدهای Ctrl + Shift + X می توان به پنل Extensions در ویژوال استادیو کد دسترسی داشت. استفاده از افزونه ها می توانند کارهای شما را بسیار ساده کند. شما می توانید ابزار های گوناگونی را در این پنل پیدا کنید.

منبع: لرن سورس


موافقین ۰ مخالفین ۰ ۹۸/۰۴/۳۰
شهربانو دوستی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی