آموزش کار با نرم افزار ویژوال استودیو کد: در آموزش کد ادیتور Sublime text در مورد این کد ادیتور محبوب و مزایای آن صحبت کردیم. Sublime text در سیستم عاملهای مختلف (ویندوز، مکاواس و لینوکس) نصب میشد اما دارای دو مشکل بزرگ بود: زبان فارسی را در محیط ویرایشگر پشتیبانی نمیکرد و رایگان نبود. به همین دلیل بسیاری از توسعه دهندگان به جای استفاده از آن، به سراغ ویژوال استودیو کد میروند.
ویژوال استودیو کد (Visual Studio Code) که به اختصار VS Code نیز نامیده میشود، یکی از محبوبترین کد ادیتورهای حال حاضر جامعهی برنامه نویسان است. فقط کافی است که یک بار ویژوال استودیو کد را نصب کرده و با آن کدنویسی کنید. تجربهی برنامه نویسی با VُS Code به قدری سریع، آسان و لذت بخش است که حاضر نیستید به ویرایشگر دیگری فکر کنید.
به همین دلیل در این مقاله، سعی کردهایم تا به آموزش کار با نرم افزار ویژوال استودیو کد بپردازیم. اگر به یادگیری نحوه کدنویسی با ویژوال استودیو کد علاقه دارید و میخواهید ویژگیها و ترفندهای ویژوال استودیو کد را بهتر بشناسید، تا انتهای این مقاله با ما همراه باشید.
همان طور که اشاره کردیم، ویژوال استودیو کد یک کد ادیتور متن باز میباشد که با زبانهای برنامه نویسی جاوا، جاوا اسکریپت، تایپ اسکریت، HTML و CSS نوشته شده است. هرچند که نخستین نسخهی ویژوال استودیو کد در سال 2015 منتشر شده است، اما سرعت رشد جامعهی کاربران آن به قدری بالاست که امروزه به عنوان یکی از سه کد ادیتور برتر و پراستفادهی جهان شناخته میشود. ویژوال استودیو کد در سیستم عاملهای مختلف (ویندوز، مکاواس و لینوکس) قابل نصب است؛ به همین دلیل به آن یک کد ادیتور چند سکویی یا cross platform گفته میشود و یکی از علتهای محبوبیت آن، همین است.
مایکروسافت، این کد ادیتور را به صورت رایگان در اختیار عموم قرار داده است؛ پس لازم نیست نگران لایسنس و… باشید. همچنین متن فارسی در محیط ویرایشگر بدون هیچ مشکلی دیده میشود که خبر خوشی برای توسعه دهندگان فارسی زبان است. برنامه نویسانی که از ویژوال استودیو کد استفاده میکنند، معتقدند که دارای امکانات بینظیری است که آنها را از استفادهی یک ویرایشگر دیگر و یا حتی یک IDE بینیاز میکند. برخی از این امکانات عبارتند از:
ویژوال استودیو یک IDE است؛ IDE نرم افزاری است که از ابزارها و امکانات کاملی برخوردار است و در توسعهی برنامهها به کمک برنامه نویسان میآید. ویژوال استودیو به عنوان یک IDE شامل موارد زیر است:
البته توجه کنید که یک IDE میتواند ویژگیها و امکانات بسیار دیگری نیز داشته باشد. این ویژگیها برای هر IDE متفاوت است.
در طرف دیگر، ویژوال استودیو کد به عنوان یک کد ادیتور قرار دارد. کد ادیتور نرم افزاری شبیه به ویرایشگر متن است که برخی ویژگیها به آن اضافه شده است. پس ویژوال استودیو کد، یک IDE نیست چرا که همانطور که گفتیم یک IDE برخلاف کد ادیتور، دارای بسیاری از ابزارهای توسعهی نرم افزار است.
در ویژوال استودیو کد، براساس زبانی که با آن برنامه مینویسیم، کلمات کلیدی متمایز شده (یا با تغییر رنگ و یا با پررنگتر شدن این تفاوت مشخص میشود) و کد ادیتور برخی پیشنهادات را برای اتمام یک خطر کد ارائه میدهد. ویژوال استودیو کد، اتم (Atom) و Sublime Text از محبوبترینهای کد ادیتورها هستند و ما در این مقاله به آموزش کار با نرم افزار ویژوال استودیو کد میپردازیم.
براساس امکانات زیاد، IDE نرم افزار حجیمتری نسبت به یک کد ادیتور است؛ به همین دلیل حجم ویژوال استودیو بالای 20 گیگابایت است اما فایل نصبی ویژوال استودیو کد به زحمت به 70 مگابایت میرسد. علاوه بر آن، این امکانات زیاد باعث میشود که سرعت ویژوال استودیو بسیار کمتر از ویژوال استودیو کد باشد.
البته نبود امکانات سبب نمیشود تا ویژوال استودیو کد قدرت خود را از دست دهد. تقریبا تمامی زبانهای برنامه نویسی در ویژوال استودیو کد قابل کدنویسی هستند، اما ویژوال استودیو قابلیت اجرای برنامههای نوشته شده به تمامی زبانها را ندارد. برای مثال جاوا در ویژوال استودیو کد با تنظیماتی قابل کدنویسی است، اما در ویژوال استودیو قابل اجرا نمیباشد.
حداقل سیستم لازم برای نصب و اجرای ویژوال استودیو کد عبارت است از:
در ادامهی آموزش کار با نرم افزار ویژوال استودیو کد، به صورت گام به گام و تصویری آن را نصب کرده و یک برنامهی نمونه را اجرا میکنیم.
اگر بخواهید با استفاده از دستورات در شل یا محیط ترمینال لینوکس ویژوال استودیو کد را نصب کنید، مراحل طولانی را پیش رو خواهید داشت. پس آسانترین کار دانلود مستقیم نرم افزار و نصب آن است. در بخشهای قبل گفتیم که ویژوال استودیو کد نرم افزاری رایگان است، پس سعی کنید از سایت رسمی ماکروسافت آن را دانلود کنید و نیازی به لایسنس و… نیست. پس برای دریافت این کد ادیتور به بخش دانلود ویژوال استودیو کد مراجعه کرده و نسخهی مربوط به سیستم عامل خود را مطابق با شکل زیر دانلود کنید:
یکی از نکات جالب این است که هنگامی که وارد وب سایت میشوید، سایت به طور خودکار تشخیص میدهد که با چه سیستم عاملی در حال کار هستید.
روی فایل دانلود شده کلیک کنید و شرایط استفاده از ویژوال استودیو کد را تایید کنید:
سپس نام پوشه نصبی ویژوال استودیو کد نشان داده میشود که توصیه میکنیم آن را تغییر ندهید. بعد از زدن دکمهی Next صفحهی زیر را میبینید:
همانطور که میبینید، در این بخش باید تنظیمات کلی ویژوال استودیو را مشخص کنید. در ادامه هر یک از این گزینهها را توضیح میدهیم.
گزینهی اول: Create a desktop icon
با انتخاب این گزینه، در دسکتاپ شورتکاتی برای ویژوال استودیو کد ساخته میشود.
گزینهی دوم: Add “Open with Code” action to Windows Explorer file context menu
با انتخاب این گزینه، هر زمانی که بخواهید فایلی را باز کنید، یک گزینه تحت عنوان Open with Code به منوی راست کلیک فایلها اضافه میشود که کار شما را برای باز کردن فایلها با ویژوال استودیو کد راحتتر میکند. اگر به صورت پیوسته از ویژوال استودیو کد برای برنامه نویسی استفاده میکنید، توصیه میکنیم تا این گزینه را انتخاب کنید.
گزینهی سوم: Add “Open with Code” action to Windows Explorer directory context menu
این گزینه هم مثل گزینه قبلی عمل میکند، ولی با این تفاوت که زمانی که روی مسیر فایلها یا همان دایرکتوری آنها کلیک کنید، گزینهی Open with Code در منوی راست کلیک آن نمایان میشود. این قابلیت برای باز کردن فایلهای یک پروژه بسیار مفید است. برای این کار کافی است به مسیر فایلهای اصلی در سیستم عامل خود رفته و سپس از راست کلیک، گزینهی Open with Code را انتخاب کنید. میبینید که در ویژوال استودیو کد شاخهی اصلی پروژه باز شده و از آنجا میتوانید به فایلهای مورد نیاز دسترسی داشته باشید.
گزینهی چهارم: Register Code as an editor for supported file types
انتخاب این گزینه سبب میشود فایلهایی که توسط ویژوال استودیو کد پشتیبانی میشوند، به طور پیشفرض با آن باز شوند. مانند فایلهای متنی، پایتون، C# ،CSS ،HTML و… .
گزینهی پنجم: (Add to PATH (requires shell restart
با انتخاب این گزینه ویژوال استودیو کد در PATHهای ویندوز ذخیره میشود. توصیه میکنیم این گزینه را هم انتخاب کنید، چراکه غیر فعال بودن این حالت باعث بروز مشکلاتی میشود.
اگر پس از اینکه تنظیمات خود را در این پنجره اعمال کردید گزینه Next را بزنید، تصویر زیر را میبینید:
در این پنجره اطلاعات و تنظیماتی که هنگام نصب درنظر گرفتید، به شما نمایش داده میشود. حال اگر روی Next کلیک کنید، فرایند نصب آغاز میشود. پس از اتمام نصب ویژوال استودیو کد، یک پنجره با پیام موفقیت آمیز بودن نصب نشان داده میشود. در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است.
برای شروع آموزش ویژوال استودیو کد، در ابتدا زبان برنامه نویسی خود را تعیین کرده و افزونههای مربوط به آن را با استفاده از بخش Extentions نصب کنید (درمورد راههای مختلف این کار در بخشهای بعدی صحبت میکنیم). سپس از منوی بالای کد ادیتور، تب File را باز کرده و گزینه New File را انتخاب کنید. حال برای تعیین نوع فایل، مطابق شکل زیر در پایین سمت راست صفحه بر روی گزینه Plain Text کلیک کنید:
همانطور که میبینید، در بالا انواع زبانهای برنامه نویسی نمایش داده میشود. اگر زبان موردنظر خود را پیدا نکردید، در بالا جستجو کنید و آن را انتخاب کنید. حالا میتوانید برای نوشتن برنامهی خود را در ویرایشگر شروع به کدنویسی کنید. برای مثال، ما یک پیام Hello world ساده را با استفاده از زبان پایتون نوشتیم.
برای ذخیرهی فایل از منوی بالا و تب File، گزینهی Save as را انتخاب کنید و نام فایل و محل ذخیرهی آن را مشخص کنید:
به صورت کلی، اجرای کد در ویژوال استودیو کد بستگی به زبان برنامه نویسی انتخاب شده دارد. برای مثال برای اجرای یک کد نوشته شده با زبان HTML باید در صفحه دو بار کلیک کنید و یا برای اجرای کد نوشته شده به زبان پایتون، باید آن را در بخش ترمینال Run کنید. معمولا در راست کلیک شما گزینهای برای اجرای برنامه وجود دارد که میتوانید از آن استفاده کنید. مثلا برای اجرای کد پایتون چنین گزینهای را میبینید:
همچنین با استفاده از منوی سمت چپ و تب چهارم (Run) نیز میتوانید عملیات اجرا و خطایابی (Debug) کد را انجام دهید که بسته به هر زبانی تنظیمات مخصوص به خود را دارد.
افزونهی Code Runner کمک میکند تا کدهای نوشته شده با زبانهای برنامه نویسی مختلف را با یک کلیک اجرا کنید. این افزونه در سیستم عاملهای مختلف دارای کلیدهای میانبر میباشد. برای کار با Code Runner میتوانید به راهنمای آن در صفحهی فروشگاه VScode مراجعه کنید.
کلیدهای میانبر یکی از اصلیترین امکاناتی هستند که به برنامه نویسان کمک میکنند تا سریعتر کدنویسی کنند. برخی از میانبرهای مهم در VScode عبارتند از:
در این بخش نحوه کار با visual studio code را توضیح میدهیم. نخستین باری که ویژوال استودیو کد را باز میکنید، صفحهی زیر را میبینید:
در سمت چپ چندین تب وجود دارد که در ادامه کاربرد هر یک را توضیح میدهیم.
در این بخش میتوانید در اسامی فایلهای پروژه جستجو کنید تا بتوانید اصلاحات موردنظر را روی آنها انجام دهید.
مشابه با قابلیت بالاست، با این تفاوت که عبارات درون فایلها را جستجو میکند.
این بخش برای افرادی مناسب است که میخواهند از راه دور کدنویسی کنند. چراکه در ویژوال استودیو کد نیز میتوان یک پروژه را به برنامههای کنترل نسخه پروژه مانند Git متصل کرد.
عملیات اجرا و خطایابی (Debug) کد از این بخش انجام میشود. برای مثال هنگام اجرای یک کد HTML با استفاده از این بخش میتوانید مرورگر پیش فرض را گوگل کروم انتخاب کنید.
بهترین مزیت استفاده از ویژوال استودیو کد این است که میتوان افزونههای زیادی را با استفاده از سیستم مدیریت افزونهها نصب کرد. درمورد این قابلیت در بخش بعدی به طور مفصل صحبت میکنیم.
تنظیمات مربوط به حساب کاربری در این بخش انجام میشود.
اگر روی این قسمت کلیک کنید، با تصویر زیر مواجه میشوید:
در این بخش تمامی تنظیمات مربوط به محیط کد ادیتور قابل مشاهده و ویرایش است. کلیدهای میانبری که در بخش قبل معرفی کردیم به خاطر دارید؟ با انتخاب گزینهی Keyboard Shortcuts میتوانید لیست کامل آنها را مشاهده کنید.
برای کار با visual studio code باید به نصب افزونهها مسلط باشید. جستجو و نصب افزونهها در ویژوال استودیو کد بسیار آسان است. با کلیک بر روی آیکون Extensions در نوار Activity در سمت چپ ویژوال استودیو کد میتوانید افزونهی موردنظر خود را نصب کنید. همچنین اگر کلیدهای ترکیبی cmd + shift + x (روی مک) یا ctrl + shift + x (روی ویندوز) را فشار دهید، پنل View: Extensions ظاهر میشود. سپس برای نصب هر افزونهی دلخواه کافی است تا روی دکمهی Install کلیک کنید.
از Command Palette نیز میتوان برای نصب افزونهها به طور همزمان استفاده کرد. در این روش ابتدا با cmd + shift + p (برای مک) یا ctrl + shift + p (برای ویندوز)، این بخش را باز کرده و سپس عبارت «Install extensions» را تایپ کنید و گزینه Extensions: Install Extensions را انتخاب نمایید.
توجه داشته باشید که در برخی موارد، بعد از نصب یک افزونهی جدید، باید ویژوال استودیو کد را restart کنید تا افزونه فعال شود. به همین دلیل توصیه میشود که بعد از هر نصب، یک بار کد ادیتور خود را باز و بسته کنید.
برخی از مهمترین افزونههای کاربردی در ویژوال استودیو کد که برای اغلب زبانهای برنامه نویسی مشترک هستند، به شرح زیر میباشد:
با نصب افزونه Quokka، همزمان با تایپ کردن کد در ویرایشگر، کدها اجرا شده و خروجی به شما نشان داده میشود. اگر کد دارای خطا یا هشدار باشد نیز همانجا به شما نمایش داده شده و شما را راهنمایی میکند.
بعد از نصب افزونهی Better Align میتوانید بخشهای تعریف متغیر، declarationهای مختلف و به طور کلی کدهای نوشته شده در یک فایل را همتراز کنید. این باعث میشود تا راحتتر بتوانید نظرات و بخشهای مختلف کد را دنبال کنید.
با استفاده از Polacode میتوانید از کد خود اسکرینشات بگیرید و آن را به اشتراک بگذارید. این افزونه تم و فونت شما را حفظ میکند. ممکن است دموهای تصویری موجود در اینترنت را دیده باشید که بخشی از کد را نشان میدهند. این دموها اغلب با استفاده از Polacode تولید شدهاند.
با نصب افزونهی Path Intellisense کار با مفاهیم فایل بسیار آسانتر میشود. این افزونه برای نشان دادن فایلهای موجود در یک مسیر مشخص استفاده میشود و هنگامی که بر روی پروژهای کار میکنید که تعداد زیادی فایل در آن وجود دارد، بسیار مفید خواهد بود.
افزونهی Browser Preview برای بازکردن یک مرورگر واقعی درون ویرایشگر ویژوال استودیو کد و برای عیبیابی و بررسی تغییرات، به جای چک کردن آنها روی مرورگر مورد استفاده قرار میگیرد. در نتیجه از جابهجایی مداوم بین محیط ویرایشگر و مرورگر جلوگیری میکند.
با نصب افزونهی Settings Sync، میتوانید تنظیمات را همراه با پروژهی موردنظر در گیتهاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند.
با استفاده از این افزونهی Git Lens میتوانید بفهمید که خط مورد نظر از کد، توسط چه کسی و در چه تاریخی تغییر کرده است، تاریخچهی کامیتها را بررسی کنید و… .
سبک بودن و سریع بودن ویژوال استودیو کد باعث شده است تا اغلب توسعه دهندگان وب از این کد ادیتور استفاده کنند. به همین منظور سه مقالهی جدا با عناوین بهترین افزونههای vscode و بهترین افزونههای ویژوال استودیو کد برای php را برای شما در نظر گرفتیم.
در این مقاله با ویژوال استودیو کد و ویژگیهای آن آشنا شدیم و تلاش کردیم تا آن را از جنبههای مختلف بررسی کنیم. علاوه بر آن، به آموزش کار با نرم افزار ویژوال استودیو کد نیز پرداختیم. ویژوال استودیو کد یک کد ادیتور بسیار قدرتمند است و برای توسعه دهندگانی مناسب است که به دنبال یک کد ادیتور کم حجم و پرسرعت هستند.
ویژوال استودیو کد در میان توسعه دهندگان بسیار محبوب است و از زبانهای برنامه نویسی زیادی پشتیبانی میکند. روز به روز بر تعداد افزونههای کاربردی در ویژوال استودیو کد افزوده میشود و کار با این کد ادیتور را حتی لذت بخشتر از قبل میکند. مایکروسافت حتی به فکر افراد تازه وارد بوده و راهنماهای تصویری بسیار خوبی را قبل از شروع کار با ویژوال استودیو کد در نظر گرفته است؛ پس نیاز نیست از شروع کار با آن بترسید! اگر سوالی در مورد نرم افزار ویژوال استودیو کد دارید یا تجربهی کار با آن را دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینهی برنامه نویسی پایتون علاقه داری، یادگیری زبان پایتون بسیار ساده است. و با شرکت در دورهی متخصص آموزش جنگو در آینده میتونی اپلیکیشن موبایل و دسکتاپ بسازی و وارد حوزهی هوش مصنوعی هم شوی.
من برنامه و تازه نصب کردم و کد میخاد
فقد میشه عدد نوشت حروف نمیشه و نمیشه کلن چرااا؟؟؟؟
برنامه رو حذف و از سایتهای معتبر مجدد دانلود کنید.