آموزش VSCode — از صفر در ۲ ساعت

نرم افزار رایگان و متن باز Visual Studio Code به اختصار VS Code ، یک محیط توسعه سبک و توسعه پذیر برای زبان های گوناگون است. این آموزش VSCode یک ورود اصولی و سریع به این نرم افزار را در کمتر از 2 ساعت فراهم می‌کند. با نصب VSCode ، ایجاد و اجرا و دیباگ در vscode ، جستجو در یک فایل و در کل پروژه ، نصب اکستنشن‌ و میانبرها (Shortcuts) و ترفندهای کاربردی متعددی آشنا خواهید شد.

VSCode چیست ؟

نرم افزار Visual Studio Code در جریان رویداد Build 2015 مایکروسافت معرفی شد. VSCode در واقع یک ویرایشگر کد یا Code Editor است. در مورد فرق Code Editor با IDE و با Text Editor در درس اول بیشتر خواهیم گفت. در اینجا به این نکته اکتفا کنیم که VSCode ویژگی چند زبانی Text Editor ها را در کنار ویژگی های خوب IDE ها مانند امکان دیباگ کد یا کنترل نسخه را در کنار هم دارد.

ویژوال استودیو کد یک بازار اکستنش‌های بسیار غنی دارد. از اکستنش‌‌های ویژه زبان‌ها مانند پایتون و جولیا و … بگیرید تا اکستنش‌های ویژه فریمورک‌ها مانند ری اکت و انگولار! از اکستنش‌های فنی کدنویسی بگیرید تا اکستنش‌های زیباسازی محیط توسعه. و استفاده از همه این ها به صورت شخصی یا پروژه‌ای رایگان است.

ویژوال استودیو کد تنها 4 سال پس از نخستین معرفی در نظرسنجی سال 2019 مجموعه Stackoverflow به عنوان محبوب‌ترین محیط توسعه معرفی شد.

این آموزش در یک نگاه

نخست با تاریخچه VSCode آشنا می‌شویم. از ویژگی‌های ویژوال استودیو کد خواهیم گفت تا بدانیم چرا محبوب است. سپس به آموزش نصب VSCode می‌پردازیم. نصب ساده‌ای دارد.

در این آموزش VS Code شما با ساخت پروژه و فایل آشنا خواهید شد. اجرا در Live Server و نیز اجرا در Terminal را تجربه خواهید کرد. با جستجو در یک فایل یا کل پروژه آشنا خواهید شد.

در یک درس جداگانه به اشکال زدایی خواهیم پرداخت. از معنی Debugging و تاریخچه این نام خواهیم گفت. سپس با ابزار دیباگ در Visual Studio Code کار خواهیم کرد.

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

آموزه‌های اصلی

• آموزش نصب VSCode
• ساخت و اجرای پروژه
• نصب و مدیریت اکستنشن
• کار با Intellisense و Snippet و Emmet
• ترفندهای ویرایش کد و شورتکات‌های مفید
• جستجو و جایگزینی در فایل و پروژه
• اجرا و اشکال زدایی یا دیباگ در VSCode
• مدیریت Folder و Workspace
• معرفی مسیر یادگیری امکانات بیشتر مانند Git و …

این آموزش بی‌نظیر است زیرا:

• سریع و ساده پیش می‌رود!
• یک ابزار برنامه نویسی رایگان را خواهید شناخت!
• یک ابزار برنامه نویسی همه منظوره را خواهید شناخت!
• جدا از آموختن مستقیم، با مسیر خودآموزی هم آشنا خواهید شد!

پیشنیاز

آشنایی با اصول برنامه نویسی (توصیه شده)

برای دیدن آموزش‌ رایگان این دوره کلیک کنید:

1. آموزش Visual Studio Code ــــ نصب VS Code و شروع کدنویسی

2. VS Code چیست ؟ _ فیلم کوتاه آموزشی ویژوال استودیو کد (ویژگی های VSCode)

کلیدواژگان

vscode چیست – آموزش نصب vscode – دانلود vscode – فیلم آموزش VSCode – آموزش Visula Studio Code – آموزش vs code – آموزش ویژوال استودیو کد –  آموزش سریع vscode – آموزش دیباگ در vscode – فرق code editor و ide – مفهوم workspace

سرفصل‌ها

درس 0 – معرفی دوره

• مروری به آنچه آموختیم

درس 1 – چرا VS Code ؟

• تاریخچه Visual Studio Code
• نکته های مهم در مسیر توسعه VS Code
• تعریف VS Code چیست ؟
• ارتباط VS Code با Electron
• فرق code editor با text editor چیست ؟
• فرق code editor با ide چیست؟
• آیا VS Code یک IDE است؟
• ویژگی های VS Code مانند دیباگ و اکستنش ها

درس 2 – نصب VS Code

•  دریافت فایل نصب متناسب سیستم عامل
• تفاوت System Installer و User Installer
• شرح پنجره ها و تنظیمات نصب
• اجرای VS Code و شرح گزینه های Welcome
• آشنایی با Command Pallet و شورتکات آن
• آشنایی با پنجره Extension و نصب اولین اکستنشن
• شخصی سازی VS Code با تغییر Theme و رنگ بندی

درس 3 – ساخت پروژه در VS Code

• ایجاد یک پروژه با گزینه Open Folder
• معنی Workspace چیست ؟
• معنی New Window چیست ؟
• ایجاد یک سند html و یک سند css
• ویژگی intelliSense چیست ؟
• ویژگی Emmet چیست ؟
• جانمایی پنجره ها و تنظیم محیط کد
• پنجره شورتکات ها وجستجوی نیاز
• تغییر آیکن فایل ها و اکستنشن Material Icon Theme
• نصب و اجرای Live Server
• ایجاد یک فایل پایتون و اجرا در ترمینال
• امکان ایجاد چند Terminal در Vs Code

درس 4 – ترفندهای ویرایش کد

• ویژگی Multi-cursor برای ویرایش همزمان
• اهمیت کار با shift و ctrl و alt
• انتقال و کپی کردن یک خط از کد
• تغییر نام در سراسر پروژه یا Rename Refactoring
• کار با snippet و emmet و مستندات Emmet
• فرمت کردن کد با صفحه کلید یا تنظیم برای فرمت موقع ذخیره فایل
• نصب اکستنشن Prettier برای فرمت کردن چندین زبان

درس 5 – جستجو و جایگزینی

• جستجو در یک فایل با ctrl + f
• کاربرد Match Case در هنگام جستجو
• کاربرد Match Whole Word در هنگام جستجو
• کاربرد Use Regular Expression
• نمایش کاربرد عبارت های باقاعده در هنگام جستجو
• جایگزینی در یک فایل با ctrl + h
• اهمیت تفاوت Replace و Replace All
• جستجو و جایگزینی در کل پروژه
• محدود کردن جستجو به یک فایل یا selection
• خارج کردن یک فایل از جستجو
• آشنایی با Search Editor
• سوئیچ بین آخرین فایل ها و پروژه ها
• کاربرد Mini Map

درس 6 – اجرا و اشکال زدایی

• تعریف اشکال زدایی یا Debugging چیست ؟
• فرق Bug و Error چیست ؟
• تاریخچه واژه debug
• اولین برنامه نویس که واژه دیباگ را ساخت!
• شروع دیباگ با VSCode
• آشنایی با گزینه های Step Over و Step Into و Step Out
• آشنایی با پنجره های Variable و Watch و Call Stack
• دو اشاره به Debug Console و launch.json
• معرفی یک پروژه کوچک برای تمرین دیباگ

درس 7 – کار با Workspace

• مفهوم Workspace در VSCode
• ذخیره فضای کار با save workspace as
• فرق workspace و folder
• دستور open settings
• تفاوت تنظیمات Workspace و User و Folder
• تغییر تنظیمات یک فولدر در یک فضای کاری
• نمایش فایل JSON تنظیمات

درس 8 – جمع بندی و ادامه مسیر

• مروری بر آنچه یاد گرفتیم.
• مسیری برای یادگیری گیت و گیت هاب در VSCode
• از اکستنش ها غافل نشوید!
• از امکان توسعه از راه دور یا Remote Development غافل نشوید!
• به روز بمانید و موفق باشید.