چگونه با ویژوال استودیو کد Visual Studio Code یک وب سایت طراحی کنیم؟ ممتاز دیزاین

در ادامه این بخش از آموزش Visual Studio Code، ابتدا به معرفی نوار وضعیت یا Status Bar و هر یک از زبانه‌های این بخش از رابط کاربری VS Code پرداخته شده است. فایل نصب VS Code حدوداً ۶۰ مگابایت حجم دارد و دانلود آن چندان زمان‌بر نخواهد بود. پس از دانلود نسخه منطبق بر سیستم‌عامل، مراحل نصب VS Code آغاز می‌شود. در ادامه این بخش از آموزش Visual Studio Code، مراحل نصب این ویرایشگر کد منبع به طور کامل فهرست شده است.

همچنین، می‌توان افزونه IntelliSense را برای سایر زبان‌های برنامه‌نویسی که پشتیبانی IntelliSense به صورت پیش‌فرض برای آن‌ها وجود ندارد، به VS Code اضافه کرد. VS Code از ابزارها و فریم‌ورک‌های متعددی پشتیبانی می‌کند و به طور کلی مزایا و نقاط قوت آن بسیار برجسته و قابل توجه است. در هر حال، هر نرم‌افزاری هر چقدر هم که قدرتمند باشد، دارای برخی کاستی‌ها و مشکلات نیز هست.

شاید ترمینالی که می‌‌خواهید استفاده کنید، در فهرست وجود نداشته باشد. در این صورت هم می‌توانید آن را به فهرست ترمینال‌های خود اضافه کنید. با استفاده از تنظیمات زیر می‌توانید به لیست ترمینال‌ها دسترسی داشته باشید. در ادامه این بخش از مطلب، روش پیکربندی همه تنظیمات فهرست بالا را آموزش داده‌ایم. این ویژگی باعث می‌شود که فایل‌ها در زمان ذخیره‌سازی به طور خودکار، قالب‌بندی شوند.

و کلی نکات ریز و درشت دیگه که در طول دوره با شما به اشتراک گذاشته میشه. این وب‌سایت یک موتور جستجوگر اینترنتی است و هیچ دخالت انسانی در دریافت و چینش مطالب وجود ندارد. برای اطلاع دقیقتر میتونید عبارت Which language is Visual Studio Code written in رو سرچ کنید و یا به اسناد ماکروسافت مراجعه کنید. درودنباید با چنین مشکلی مواجه بشید اما بهتره برای اطمینان از vpn استفاده کنید. درود متن دقیق خطایی که میگیرید رو بفرستید تا بتونم کمک تون کنم. درودبه صورت آفلاین اجرا میشه و میتونید کلا نت رو قطع کنید.

استفاده کردم.اگر براتون مقدور است آموزش عملی کار با ویژوال استودیو کد رو با یکی از زبانها ترجیحا جاواسکریپت یا پایتون هم بگذارید. سلامآیا سرفصل آموزش کدنویسی در نرم افزار visual studio code رو در همین مقاله مطالعه کردید؟ همون پاراگراف اولش درمورد اینکه نوع فایل رو چطور پایتون کنید توضیح دادیم. ویژوال استودیو کد رو ببیندید و فقط بعد از اتصال وی پی ان باز کنید. اگر رفع نشد به طور مستقیم فایل vsix افزونه رو از انجمن استک دانلود کنید و در بخش extensions ویژوال کدتون ایمپورت کنید. همچنین، VS Code از جعبه ابزار توسعه وب Emmet نیز به خوبی پشتیبانی می‌کند. قابلیت‌های IntelliSense در VS Code برای زبان‌های برنامه‌نویسی JavaScript ،TypeScript ،JSON ،HTML ،CSS ،Less و Sass به صورت پیش‌فرض و از ابتدا موجود است.

آموزش HTML CSS دوره ای جامع و متفاوت

پس ویژوال استودیو کد، یک IDE نیست چرا که همانطور که گفتیم یک IDE برخلاف کد ادیتور، دارای بسیاری از ابزارهای توسعه‌ی نرم‌ افزار است. ویژوال استودیو کد (Visual Studio Code) که به اختصار VS Code نیز نامیده می‌شود، یکی از محبوب‌ترین کد ادیتورهای حال حاضر جامعه‌ی برنامه نویسان است. فقط کافی است که یک بار ویژوال استودیو کد را نصب کرده و با آن کدنویسی کنید.

در صورتی که اگر از تمام پتانسیل برنامه استفاده کنید، می‌توانید به سادگی پروژه خود را توسعه داده و به سرانجام برسانید. در دوره آموزش vs code سایت دانشجویار، نحوه کار با این نرم افزار به شکلی که بتوانید از حداکثر توان آن برای پیشبرد پروژه‌هایتتان استفاده کنید، آموزش داده می‌شود. ویژوال استودیو کد در میان توسعه دهندگان بسیار محبوب است و از زبان‌های برنامه نویسی زیادی پشتیبانی می‌کند. روز به روز بر تعداد افزونه‌ها‌ی کاربردی در ویژوال استودیو کد افزوده می‌شود و کار با این کد ادیتور را حتی لذت بخش‌تر از قبل می‌کند. مایکروسافت حتی به فکر افراد تازه وارد بوده و راهنماهای تصویری بسیار خوبی را قبل از شروع کار با ویژوال استودیو کد در نظر گرفته است؛ پس نیاز نیست از شروع کار با آن بترسید! اگر سوالی در مورد نرم افزار ویژوال استودیو کد دارید یا تجربه‌ی کار با آن را دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.

با توجه به حجم فایل، نصب Visual Studio Code تقریباً پنج دقیقه زمان می‌برد. وقتی که نصب انجام شد، باید از بخش مدیریت اپلیکیشن سیستم‌عامل لینوکس برای جستجوی Visual Code Studio و اجرای آن استفاده شود. در ادامه، شروع کار با Visual Studio Code و نحوه نوشتن اولین برنامه با آن توضیح داده شده است. همچنین، از طریق قابلیت کنترل نسخه داخلی، می‌توان تغییرات انجام شده در فایل‌های پروژه را نیز بررسی کرد. VS Code با هر نوع مخزن گیت، چه راه دور و چه محلی، کار می‌کند و برای رفع مغایرت‌ها قبل از Commit کردن کدها، از نمادهای بصری استفاده می‌کند. این خط فرمان، یک PowerShell در داخل محیط توسعه VS Code به حساب می‌آید که آماده انجام وظایف معمول به صورت میانبر است.

برای اطلاعات بیش‌تر و دسترسی به تنظیمات کلیدهای میانبر در VS Code می‌توان با جستجوی عبارت «Keyboard Shortcuts» در Command Palette به صفحه مربوط به کلیدهای میانبر مراجعه کرد. در این صفحه فهرستی از کلیدهای میانبر قابل استفاده در VS Code ارائه شده و می‌توان در میان آن‌ها میانبر مورد نظر را جستجو کرد. در ادامه آموزش Visual Studio Code به معرفی ده تا از رایج‌ترین و کاربردی‌ترین میانبرهای صفحه کلید در VS Code پرداخته شده است. به همین شکل می‌توان ویرایشگرها را در گروه‌های مختلف تنظیم کرد، و مثلاً دو پنجره را زیر هم و یک پنجره را در سمت راست قرار داد. در ادامه آموزش Visual Studio Code زبانه Search یا جستجو در نوار فعالیت معرفی و آموزش داده شده است. در ادامه آموزش Visual Studio Code به معرفی و آموزش امکانات و قابلیت‌های رابط کاربری این ویرایشگر کد پرداخته شده است.

ویرایشگر VS Code برای چه زبان‌های مورد استفاده قرار می‌گیرید؟

ویژوال استودیو کد یک ویرایشگر کد منبع سبک است که دارای ویژگی های پیشرفته IDE است و بر روی ویندوز، لینوکس و macOS اجرا می شود. این امکان دسترسی آسان به بسیاری از برنامه های افزودنی برای ویژگی های اضافی و پشتیبانی از زبان هایی مانند C #، C ++، Python، Java و غیره را فراهم می کند. با پشتیبانی از کنترل Git جاسازی شده، اشکال زدایی، تکمیل کد هوشمند، refactoring کد و غیره می آید. در این پنجره اطلاعات و تنظیماتی که هنگام نصب درنظر گرفتید، به شما نمایش داده می‌شود. پس از اتمام نصب ویژوال استودیو کد، یک پنجره با پیام موفقیت آمیز بودن نصب نشان داده می‌شود. در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است.

مشکل اینجاست که اغلب اوقات، نوار‌ابزار دیباگ در ویژوال استودیو کد بر روی سایر بخش‌های کنترلی و سربرگ‌ها قرار می‌گیرد. بنابراین بعضی وقت‌ها برای پیدا کردن این ابزارها به مشکل برمی‌خوریم. اما در آن صورت فقط زمانی دیده می‌شود که در حالت «Run And Debug» هستیم. البته می‌توان آن را به «مرکز فرمان» (Command Center) هم انتقال داد. با این روش همیشه می‌توان نوار‌ابزار دیباگ‌ کردن را دید و به آن دسترسی داشت.

به کار بردن این تنظیم، انیمیشن استفاده شده در کرسر را - مخصوصا در زمان جابه‌جایی به مکان جدید - به شکل نرم‌تری نمایش می‌دهد. به جای اینکه کرسر به صورت آنی از محل فعلی خود غیب شده و در محل جدید ظاهر شود. بعد از اعمال تنظیمات بالا، نوار Breadcrumb در بالای ادیتور به شکل زیر نمایش داده می‌شود. این دوره، نحوه کار و استفاده از حداکثر پتانسیل برنامه VSCode را به شما یاد می‌دهد. فراگرفتن نحوه استفاده از ابزارهای یک کار، در افزایش سرعت و کیفیت کار تاثیرگذار است. خصوصا در برنامه نویسی که رقابت شدیدی در بسیاری از بخش‌ها وجود دارد.

قابلیت IntelliSense برای زبان برنامه‌نویسی

در این محیط میتونید اکثر زبان های برنامه نویسی روز دنیا مثل جاوا اسکریپت، پایتون، جاوا ، PHP ، GO و…. یک محیط ساده، کم حجم، سبک که میتونید با استفاده از افزونه هایی اختصاصی که در اختیار شما قرار میده، اون رو به یک محیط برنامه نویسی حرفه ای و لذت بخش برای خودتون تبدیل کنید. درودمن خودم با VSCode کار میکنم و باهاش راحتم، اما امکانات php storm هم خیلی زیاده. توصیه میکنم از مقاله بهترین IDE برای طراحی وب و برنامه نویسی بخش وب رو مطالعه کنید. با نصب افزونه‌ی Settings Sync، می‌توانید تنظیمات را همراه با پروژه‌ی موردنظر در گیت‌هاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند. با نصب افزونه Quokka، هم‌‌زمان با تایپ کردن کد در ویرایشگر، کدها اجرا شده و خروجی به شما نشان داده می‌شود.

شروع کد نویسی با visual studio code و پیوند بین صفحات

در تصویر زیر حالت پیش‌فرض قرارگرفتن نوار کنار را مشاهده می‌کنید. در تصویر زیر، تنظیم مربوط به «سربرگ‌های پین شده در ردیف‌ جداگانه» را اعمال کرده‌ایم. بعد از اجرای این دستور، نوار سربرگ‌های باز شده به شکل زیر در میاید. اگر شما از سربرگ‌های دیگری به تعداد دیگری استفاده کنید، نوار سربرگ‌های متفاوتی را مشاهده خواهید کرد. بعد از اعمال این تغییر، در صورتی که بر روی ساختار تودرتویی اسکرول کنیم با چیزی مانند تصویر زیر روبه‌رو می‌شویم. بعد از اعمال تنظیم بالا، فضاهای خالی در کدهای نوشته شده به شکل زیر نشان داده می‌شوند.

نظرات کاربران در رابطه با این دوره

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

با توجه به افزایش نرخ دورکاری، مدیریت زمان بیش از همیشه اهمیت پیدا کرده است. مثلاً اگر یک توسعه‌دهنده از سامانه ردیابی معیارهای توسعه Wakatime استفاده می‌کند، یک افزونه VS Code‌ برای مدیریت مستقیم آمار Wakatime از داخل ویرایشگر وجود دارد. افزونه Code Time نیز امکان ردیابی و مدیریت بهره‌وری مستقیم توسط خود شخص را از طریق یک بستر متن‌باز فراهم می‌سازد. برای آن دسته از افرادی که تنها نیاز به یک زمان‌سنج Pomodoro دارند، یک افزونه برای آن نیز در VS Code موجود است.

گواهی پایان دوره

یکی از امکانات مفید و کاربردی VS Code‌، بخش Command Pallete است که دسترسی به کلیه امکانات را در این ویرایشگر تسهیل می‌بخشد. در پایان می‌توان نتیجه گرفت که با توجه به محبوبیت، کاربردها و امکانات متعدد این ویرایشگر متن، آموزش Visual Studio Code از اهمیت بالایی برخوردار است. حالا هر وقت تغییرات ذخیره شود، به‌روزرسانی به طور خودکار به وسیله Live Server انجام می‌شود.

یک ویرایشگر کد منبع می‌تواند به طور خودکار یک بلوک کد را در صفحه قرار دهد. از یک ویرایشگر متن (Text Editor) ساده نیز می‌توان به عنوان ویرایشگر کد منبع استفاده کرد. ویرایشگر متن، یک رابط ابتدایی را فراهم می‌کند که این رابط، از قابلیت‌های ساده کپی و الصاق پشتیبانی می‌کند. در تصویر متحرک زیر روش کارکرد این تنظیم ویژوال استودیو کد را نمایش داده‌ایم. کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. در جدول زیر، تنظیمات محیط کاربری ویژوال استودیو کد را نام برده‌ایم.

دوره‌های رایگان

سلام دوست عزیز، بله درست میگید، در اسرع وقت تغیرات لازم اعمال می کنیم، از شما ممنونیم که با ما همراه هستید و دوره از دید شما امتیاز کافی را گرفته، بسیار خشنود کننده است. نام فایل جدید را با پسوند فایل مناسب آن تایپ کنید (به عنوان مثال .html ،.css ،.csv). مهم است که پسوند فایل را به درستی وارد کنید، بنابراین برنامه هایی مانند linter ها می دانند که چگونه محتوای آن را تفسیر کنند.

شروع فرایند‌ آموزش برنامه نویسی معمولا ساده‌ است اما به نتیجه رسیدن این فرایند، تلاش و پشتکار زیادی می‌طلبد. فرض کنیم که کتاب‌ها یا دوره‌های اولیه برنامه نویسی را پشت سر گذاشته‌ایم. تنظیمات ویژوال استودیو کد خود را مانند افراد حرفه‌ای پیکر‌بندی کرده و اکنون باید دوره‌های حرفه‌ای‌تری را بگذرانیم. ترکیب تکنولوژی‌های مختلف برای تولید محصولات نرم‌افزاری کاری است که معمولا در دوره‌های آموزشی پروژه‌محور تدریس می‌شوند. فرادرس برای رسیدن به این هدف، مجموعه‌ای نسبتا کامل از فیلم‌های پروژه محور برنامه‌نویسی را آماده کرده است. با استفاده از این تنظیم، تعقیب کردن چشمی مسیر حرکت کرسر ساده‌تر شده است.

این قابلیت‌ها به حصول اطمینان از نوشته شدن کد بر اساس معیارهای تعیین شده آن زبان توسعه خاص، کمک می‌کنند. اما اگر تصمیم بگیرید که تغییرات مورد نظر قبل از تثبیت شدن در مخزن به صورت دستی Stage شوند. همچنین علاقه‌ای به دیدن پیغام از طرف VS Code ندارید، هم باید مقدار enableSmartCommit  را بر بروی false  تنظیم کنید و هم مقدار suggestSmartCommit  را. فرض کنیم که می‌خواهیم از فونت «CaskaydiaCove Nerd Font Mono» برای ترمینال استفاده کنیم. لازم به اشاره است که برای استفاده از فونت‌ها در ترمینال و ادیتور هیچ محدودیتی وجود ندارد.

چراکه در ویژوال استودیو کد نیز می‌توان یک پروژه را به برنامه‌های کنترل نسخه پروژه مانند Git متصل کرد. برای دیدن خروجی از افزونه Live Server که پیش‌تر نصب شد استفاده می‌شود. باید روی فایل index.html راست کلیک کرده (فایلی که در داخل فولدر Portfolio قرار دارد) و گزینه «Open with Live Server» را انتخاب کرد.

مشابه با قابلیت بالاست، با این تفاوت که عبارات درون فایل‌ها را جستجو می‌کند. البته توجه کنید که یک IDE می‌تواند ویژگی‌ها و امکانات بسیار دیگری نیز داشته باشد. در پایان مطلب آموزش Visual Studio Code به یک جمع‌بندی اجمالی از مباحث مطرح شده پرداخته شده است. در Visual Studio Code یک زمین بازی تعاملی (Interactive Playground) برای امتحان کردن ویژگی‌های مختلف این ویرایشگر وجود دارد. دسترسی به صفحه زمین بازی تعاملی باز هم از طریق جستجوی عبارت «Interactive Playground» در Command Palette امکان‌پذیر است. وقتی که مخزن فعال شد، باید سیستم را به‌روزرسانی کرده و Visual Studio Code را با دستورات زیر نصب کرد.

در ویژوال استودیو کد می‌توانیم عرض سربرگ‌های پین شده را طوری تنظیم کنیم که کوچک‌تر دیده شوند. بعضی از برنامه نویسان وقتی که سربرگ‌ها را پین می‌کنند به سادگی محتویات درون آن‌ها را به یاد می‌آورند. با کوتاه‌تر کردن اندازه سربرگ‌ها به ازای سربرگ‌های پین شده، می‌توانیم در مصرف فضای افقی صرفه‌جویی کنیم. این مسئله به طور خاص زمانی مفید است که بعضی از فایل‌های پین شده نام‌های طولانی دارند. حتی اگر پین کردن فایل‌ها در ردیف‌‌های جداگانه‌ای انجام شود هم وجود نام‌های طولانی می‌تواند بعضی از فایل‌های پین شده را از دید خارج کند.

دروداز خود microsoft store در ویندوزتون عبارت vscode رو سرچ کنید و برنامه رو نصب کنید. در این بخش، مطالب مرتبط با آموزش Visual Studio Code که دارای محتوای آموزشی پیرامون نکات، ترفندها، میانبرها و سایر موارد مرتبط با VS Code هستند، ارائه شده است. در VS Code، «رابط کاربری انتخاب رنگ» در بخش‌های مربوط به استایل‌دهی HTML در دسترس است. همچنین با تایپ کردن کاراکتر «/»، که در ابتدای تگ پایانی استفاده می‌شود، تگ متناظر بسته می‌شود.

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

در کل، پس از اتمام دوره آموزش vs code، به تمام بخش‌های کاربردی و مهم نرم افزار visualstudio مسلط می‌شوید و می‌توانید به خوبی از آن استفاده کنید. پس از گذراندن دوره آموزش vs code، می‌توانید به خوبی با این نرم افزار کار کنید و میانبرهای کاربردی آن را در زمان مناسب، استفاده کنید. همچنین می‌توانید به خوبی با ترمینال و اسنیپت‌ها کار کنید و به بهترین شکل، نرم افزار یا پروژه خود را توسعه دهید.

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

سپس در بخش «Editor» مقدار گزینه Cursor Smooth Caret Animation  را به مقدار true  تغییر دهید. هدف اصلی از به کار بردن تنظیمات ویژوال استودیو کد این است که فرایند اجرای وظایف برنامه نویسی را به شکل راحت‌تر و با سرعت بیشتری انجام دهیم. وجود تنظیمات درست، برای همه افراد مبتدی و حرفه‌ای لازم است.

آیا دوره آموزش VSCode رایگان است؟

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

• نسخه VS Code، اولین شماره نسخه فهرست شده است و قالب نسخه آن به صورت «major.minor.release» است.
{
• برای این کار کافی است به مسیر فایل‌های اصلی در سیستم عامل خود رفته و سپس از راست کلیک، گزینه‌ی Open with Code را انتخاب کنید.
|}
• برای استفاده از این ویژگی، می‌توان به سادگی روی فایل راست کلیک کرده و گزینه « Open to the slide» را انتخاب کرد.
{
• در این بخش از آموزش Visual Studio Code نحوه نصب این ویرایشگر کد منبع در سه پلتفرم ویندوز، مک و لینوکس آموزش داده شده است.
|}
• برای باز کردن این خط فرمان، می‌توان به سادگی از کلیدهای ترکیبی « Command/Control+Shift+P» استفاده کرد.
{
• برای مثال هنگام اجرای یک کد HTML با استفاده از این بخش می‌توانید مرورگر پیش فرض را گوگل کروم انتخاب کنید.
|}

در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید. لینک مربوط به این فیلم آموزشی را در پایین نیز قرار داده‌‌‌ایم. از آنجا که هنوز آن را ذخیره نکرده‌ایم و هیچ پسوندی هم به نام آن اختصاص داده نشده است، ویرایشگر کد VS Code نمی‌تواند نوع فایل و زبان کدهای نوشته شده در آن را تشخیص دهد. بنابراین امکان فراهم کردن خدماتی مانند هایلایت‌کردن سینتکس، تکمیل خودکار کدها و غیره هم وجود ندارد. به عنوان توسعه‌دهنده می‌توانیم زبان پیش‌فرضی را برای تب‌های جدید تعریف کنیم. بنابراین تب‌های جدید باز شده و هنوز ذخیره نشده‌ هم می‌‌توانند از ابزارهای کاربردی ویژوال استودیو کد برای زبان مورد نظر استفاده کنند.

کلیدهای میانبر در ویژوال استودیو کد

بسیاری از نرم‌افزارها و برنامه‌های محبوب و شناخته شده با C++‎ نوشته شده‌اند. با یادگیری این زبان برنامه‌نویسی می‌توان در زمینه توسعه نرم‌افزارهای مختلف به فعالیت پرداخت. زبان C++‎‌ برای علاقه‌مندان و افرادی که قصد شروع یادگیری برنامه‌نویسی را دارند توصیه می‌شود. همچنین، این زبان به عنوان یکی از دروس پایه و مهم در مجموعه رشته‌های مهندسی کامپیوتر در مقطع کارشناسی تدریس می‌شود. بنابراین دانشجویان این رشته نیز می‌توانند برای یادگیری بهتر C++‎ از محتوای این دوره آموزشی استفاده کنند. برخی از مباحث و موضوعات این دوره شامل انواع داده‌ها، انواع عملگرها، دستورات cin و cout، ساختارهای تکرار (for ،while و do while)، تابع، آرایه و سایر موارد است.

ویژوال استودیو کد یکی از بهترین ابزارها برای نوشتن کدها است. این کد ادیتور کیفیت بالایی داشته و می‌تواند هم سطح IDE-های حرفه‌ای برنامه نویسی، وظایف مختلفی را مدیریت کند. اما به‌هرحال برای اجرای صحیح پروژه‌ها مهم‌ترین مسئله، توانایی کار با زبان برنامه نویسی مورد نظر است.

با کمک این تنظیم می‌‌توانیم رنگ خطوط راهنمای دندانه‌گذاری در درخت فایل را تغییر دهیم. این تکنیک هم یکی دیگر از روش‌های موجود در تنظیمات ویژوال استودیو کد است که به تشخیص راحت‌تر فایل‌ها و فولدر‌های مرتبط با هم در درخت فایل کمک می‌کند. توجه داشته باشید که خطوط راهنمای دندانه‌گذاری که به صورت پیش‌فرض اعمال می‌‌شوند برای نمایش در بعضی از مانیتور‌ها بیش از حد تاریک بوده و سخت قابل تشخیص هستند. البته این مسئله سلیقه‌ای بوده و هر کسی هر رنگی را می‌تواند انتخاب کند. برای تغییر ظاهر کرسر، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» مقدار گزینه Cursor Style  را که در حالت پیش‌فرض بر روی line  تنظیم شده تغییر دهید.

می توانید پوشه جدیدی به نام پروژه ایجاد کنید و درون پوشه پروژه، پوشه جدیدی به نام HelloWorld ایجاد کنید. هرچه به این پوشه اضافه کنید بخشی از پروژه HelloWorld شما خواهد بود. بسیار عالی بود دوره حتی اگه vs code رو بلدید برای حرفه ای شدن توصیه میکنم دوره دو ببینید.

البته قبل از اجرای این دستور، باید VS Code به Path‌ مک OS اضافه شده باشد. برای این کار، باید به صورتی که در ادامه فهرست شده است اقدام شود. ناشرهای افزونه اجازه دارند گواهینامه‌ای را انتخاب کنند که با نیازهای تجاری آن‌ها همخوانی داشته باشد. حتی قبل از پیدایش COVID-19 و تحول بنیادین ساختار مشاغل نیز، ابزارهای همکاری گروهی فرآیند انجام آنی کارها از راه دور را ساده‌تر کرده‌اند. در واقع، قبل از اینکه برنامه‌نویس تایپ یک خط کد را به پایان برساند، ویرایشگر، کلمات کد را پیش‌بینی کرده و استفاده از آن‌ها را به برنامه‌نویس پیشنهاد می‌دهد. این همان ویژگی است که به طور گسترده‌ در مرورگرهای وب و تلفن‌های هوشمند نیز موجود است.

اگر کد دارای خطا یا هشدار باشد نیز همان‌جا به شما نمایش داده شده و شما را راهنمایی می‌کند. همچنین با استفاده از منوی سمت چپ و تب چهارم (Run) نیز می‌توانید عملیات اجرا و خطایابی (Debug) کد را انجام دهید که بسته به هر زبانی تنظیمات مخصوص به خود را دارد. همانطور که می‌بینید، در این بخش باید تنظیمات کلی ویژوال استودیو را مشخص کنید. در این بخش انتهایی از مطلب آموزش Visual Studio Code به معرفی برخی از دوره‌های آموزشی کامل و شاخص در زمینه برنامه‌نویسی پرداخته شده است. در ادامه این بخش از آموزش Visual Studio Code برخی دیگر از امکانات و قابلیت‌های این ویرایشگر کد معرفی شده است.

در ادامه، نحوه ایجاد یک فایل جدید و اجرای یک برنامه ساده در VS Code آموزش داده شده است. یک «فضای کاری» (Workspace) در VS Code، معمولاً به پوشه محل ذخیره یک پروژه اطلاق می‌شود. VS Code از مفهوم "فضای کاری" استفاده می‌کند تا بتواند محدوده ساختار پروژه، از جمله تنظیمات مربوط به پروژه و همچنین فایل‌های پیکربندی را برای اشکال‌زدایی و انجام وظایف، مشخص کند. فایل‌های Workspace در نشانی پروژه و در پوشه‌ای با پسوند «‎.vsco‎‎de‎‎» ذخیره شده است.

با هدف سهولت دسترسی، این مطالب بر اساس موضوع دسته‌بندی شده‌اند. ابتدا به معرفی مطالب مرتبط با افزونه‌های VS Code پرداخته شده است. کلیدهای میانبر، کلیدها یا ترکیبی از کلیدهای صفحه کلید هستند که به کاربر اجازه می‌دهند کارهای رایجی که با موشواره انجام می‌شوند را با سرعت بیش‌تر از طریق صفحه کلید انجام دهد. در ادامه این بخش از آموزش Visual Studio Code در خصوص سربرگ مدیریت منبع توضیحات مختصری ارائه شده است. در پایین محل جستجو، تمام رویداد‌های کلیدواژه مورد نظر در همه فایل‌های ویرایشگر نشان داده می‌شود. می‌توان اطلاعات مربوط به نسخه Visual Studio Code‌ فعلی نصب شده روی یک پلتفرم خاص را در قسمت «درباره» (About) یافت.

همچنین، می‌توان در یک فضای کاری VS Code، از طریق قابلیتی به نام «فضای کاری چند ریشه» (Multi-Root Workspace) بیش از یک پوشه اصلی در یک فضای کاری داشت. در ادامه فرآیند آموزش Visual Studio Code به شرح نحوه نصب این ویرایشگر کد در سه پلتفرم ویندوز، macOS و لینوکس پرداخته شده است. Visual Studio Code یک ویرایشگر کد چابک است که از عملیات توسعه نرم‌افزار مانند اشکال‌زدایی، اجرای وظایف و کنترل نسخه پشتیبانی می‌کند. هدف VS Code فراهم کردن ابزارهای مورد نیاز یک توسعه‌دهنده برای انجام چرخه «کدنویسی-ساخت-اشکال‌زدایی» است. در این راستا، جریان‌های کاری پیچیده‌تر به محیط‌های توسعه مثل Visual Studio IDE‌ سپرده می‌شود که امکانات کامل‌تری دارند. در فهرست زیر، دو مورد از مهم‌ترین تنظیمات ویژوال استودیو کد را برای استفاده از فایل‌های «Markdown» معرفی کرده‌ایم.

تنظیمات فایل های Markdown

در این بخش از آموزش Visual Studio Code، به مزایا و نقاط قوت این ویرایشگر کد قدرتمند و کاربردی پرداخته شده است. طراحی صفحات وب سرور , asp.net , طراحی وب , دات نت ، آموزش ای اس پی. … ویژوال استودیو شامل بیش از 200 کد میانبر برای C# ، XML ، Html و … می باشد . در این آموزش، ما به طور کامل درباره Visual studio code، نحوه پیاده سازی آن و نحوه اضافه کردن اکستنشن ها به نرم افزار Visual studio code پرداخته ایم. با پیکربندی کردن این تنظیم، تمام هایپرلینک‌های الصاق شده به فایل‌های Markdown به صورت خودکار و توسط کدهای مشخصی محصور می‌شوند. این کار با توجه به سینتکس مخصوص لینک در فایل‌های Markdown انجام می‌‌شود.

قبل از اینکه یاد بگیرید چگونه می توانید فایل ها را به یک پوشه پروژه اضافه کنید، مهم است که هدف از پسوند فایل ها را بدانید. پسوند فایل، پسوند یک نام فایل است (3 یا 4 نویسه آخر در یک نام فایل، قبل از آن یک نقطه وجود دارد) و نوع محتوای فایل را توصیف می کند. به عنوان مثال، پسوند فایل های اچ تی ام ال html است و به مرورگر (و سایر برنامه ها) می گوید که محتوای فایل را به عنوان یک سند HTML تفسیر کنند.

با استفاده از گزینه «Settings and Key Bindings» در صفحه Welcome، می‌توان به افزونه‌های میانبر صفحه کلید برای ویرایشگرهای مختلف دسترسی پیدا کرد. مراحل بعدی نصب مورد خاصی برای توضیح و آموزش ندارد و به سادگی با زدن Next و در انتها زدن گزینه Finish این مراحل نصب پایان می‌یابد و نصب Visual Studio Code روی ویندوز کامل می‌شود. در ادامه آموزش Visual Studio Code به آموزش نصب این ویرایشگر کد روی سیستم عامل macOS پرداخته شده است. در این بخش از آموزش Visual Studio Code نحوه نصب این ویرایشگر کد منبع در سه پلتفرم ویندوز، مک و لینوکس آموزش داده شده است.

اضافه کردن دکمه آپلود رسانه در وردپرس با کدنویسی

VS Code افزونه‌های محبوب و توصیه شده را به صورت پیش‌فرض ارائه می‌دهد. در ادامه این بخش از آموزش Visual Studio Code به آموزش نصب این ویرایشگر کد روی لینوکس پرداخته شده است. در ادامه آموزش نصب VS Code در مطلب آموزش Visual Studio Code، هر یک از گزینه‌های مرحله انتخاب وظایف افزوده نشان داده شده در تصویر بالا، به ترتیب شماره توضیح داده شده است. Visual Studio Code یک ویرایشگر کد محبوب است و توسط برنامه‌نویسان و توسعه‌دهندگان بسیاری مورد استفاده قرار می‌گیرد.

یک پنجره مرورگر باز می‌شود و اولین وب‌سایت ایجاد شده با HTML در VS Code را نمایش می‌دهد. افزون بر امکان کدنویسی،‌ VS Code می‌تواند از موارد کاربردی متعدد دیگری نیز پشتیبانی کند. در ادامه، چهار روش برای استفاده از VS Code با هدف بهبود سطح کیفی فرآیند توسعه و فراتر از یک ویرایشگر متن ساده، ارائه شده است.

برای یادگیری VSCode چه پیش‌نیازهایی لازم است؟

در ادامه‌ی آموزش کار با نرم افزار ویژوال استودیو کد، به صورت گام به گام و تصویری آن را نصب کرده و یک برنامه‌ی نمونه را اجرا می‌کنیم. در این مطلب از آموزش فرادرس نحوه نصب VS Code را آموختیم و پروژه‌ای را با با یکدیگر انجام دادیم. VS Code نقش یک ویرایشگر کد منبع قدرتمند و سبُک را برای توسعه‌دهندگان ایفا می‌کند.

سپس در بخش «Editor» گزینه Format On Save  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Editor» گزینه Format On Paste  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Trim Final Newlines  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Insert Final Newline  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Trim Trailing Whitespace  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Auto Save  را پیدا کرده و مقدار آن را بر روی afterDelay  تنظیم کنید.

ویرایشگر VS Code امکانات و ویژگی‌های بسیاری دارد که در این بخش از مطلب آموزش Visual Studio Code به برخی از آن‌ها اشاره شده است. در ادامه، شرحی از ویژگی‌های کاربردی VS Code با هدف درک بیش‌تر اهمیت آموزش Visual Studio Code ارائه شده است. ما سعی کرده‌ایم که در دوره آموزش VSCode این ویرایشگر را به شکل کامل و دقیق به شما آموزش دهیم، به شکلی که محتوای این دوره به شکل مستقیم در استفاده از VSCode برای شما نقش اساسی داشته باشد.

یک ویرایشگر کد در واقع نوعی ویرایشگر متن است که ویژگی‌های افزوده مفیدی برای نوشتن کد ارائه می‌دهد، اما IDE معمولاً چیزی پیچیده‌تر است که چند ابزار مختلف را با هم ترکیب می‌کند. در این دوره آموزشی از وبسایت راکت، قصد داریم شما را به صورت رایگان با ویژگی‌ها و امکانات VSCode آشنا کنیم و همچنین طرز استفاده از قابلیت‌های بی‌شمار آن را به شما آموزش دهیم. کلیه حقوق مادی و معنوی این وب سایت متعلق به شرکت آریا نرم افزار می باشد و هرگونه کپی برداری از آن بدون ذکر منبع پیگرد قانونی خواهد داشت. به عنوان کاربر ویندوز می‌توانید تنظیمات پروفایل را از روی ویندوز تغییر دهید. برای سیستم عامل‌های لینوکس و OS هم باید پروفایل‌های آن‌ها را تنظیم کرد. همراه با این تنظیم، تنظیم دیگری نیز وجود دارد که روش قالب‌بندی متن را تعیین می‌کند.