آموزش Visual Studio Code از نصب تا اجرای اولین پروژه در VS Code فرادرس مجله‌

اینکه شما نتونید مثل یک حرفه ای با محیطی که ساعت های زیادی باهاش سر کار دارید کار کنید، باعث میشه از برنامه نویس های دیگه کندتر و ضعیف تر عمل کنید و این اتفاق میتونه شمارو از فرصت های شغلی خوب محروم کنه. مایکروسافت ویژوال استودیو کد را به صورت رایگان ارائه داده است که به راحتی می توانید آن را تهیه و استفاده کنید. در زیر مراحلی وجود دارد که باید برای ایجاد یک پوشه جدید برای همه پروژه های برنامه نویسی خود دنبال کنید. شما همچنین یاد خواهید گرفت که چگونه یک پوشه پروژه جدید را در Visual Studio Code بسازید و اولین پروژه HTML با جمله “Hello world” را بسازید. اما اگر بخواهیم یک نرم‌افزار ساده برای ایجاد فایل HTML را معرفی کنیم، بدون شک نوت پد پیش‌فرض ویندوز، قابلیت ایجاد فایل‌های HTML را داراست اما به قدرتمندی VsCode نیست.

همچنین می‌توانید به خوبی با ترمینال و اسنیپت‌ها کار کنید و به بهترین شکل، نرم افزار یا پروژه خود را توسعه دهید. علاوه بر این، اگر برنامه نویس وب هستید و استفاده زیادی از HTML و CSS دارید، می‌توانید سرعت کدنویسی خود را با استفاده از Emmet چندبرابر کنید. استودیو کد، یک ویرایشگر قدرتمند بوده و مناسب برنامه نویسانی است که بدنبال یک ویرایشگر کد کم حجم و پر سرعت می‌باشند.

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

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

نصب شبیه‌ساز برای اجرای کدهای PHP – آموزش پی اچ پی – قسمت 1

در صورتی که پوشه باز شده در VS Code دارای یک مخزن گیت‌هاب باشد، می‌توان با فعال کردن گزینه «Initialize Repository» در زبانه Source Control از امکانات کنترل منبع ارائه شده توسط Git‌ بهره‌مند شد. در ادامه آموزش Visual Studio Code در قسمت معرفی بخش‌های اصلی VS Code به معرفی و آموزش زبانه Run (اجرا) پرداخته شده است. اگر شما هم می خواهید با یک ویرایشگر کد پر سرعت و کم حجم کار کنید، ویژوال استودیو کد بهترین گزینه می‌باشد. ویژوال استودیو کد یک ویرایشگر کد متن باز است و با زبان‌های برنامه نویسی جاوا، جاوا اسکریپت، تایپ اسکریپت، html و  css نوشته شده است. اما سرعت رشد آن بسیار بالا بود، به طوری که ویژوال استودیو کد جزء سه ویرایشگر کد پر استفاده  و برتر جهان شناخته شده است. پس از نصب Visual Studio Code، می‌توان این ویرایشگر را با وارد کردن دستور «code -n» در خط فرمان، اجرا کرد.

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

بعد از دوره آموزش HTML چی میشه؟

VS Code‌ امکان باز کردن چند ویرایشگر در کنار یکدیگر را فراهم می‌کند. برای استفاده از این ویژگی، می‌توان به سادگی روی فایل راست کلیک کرده و گزینه « Open to the slide» را انتخاب کرد. در ادامه مطلب آموزش Visual Studio Code به بحث در خصوص کاربردهای VS Code پرداخته شده است.

آموزش HTML‌ با Visual Studio Code

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

در این جلسه از سری جلسات آموزش HTML و CSS، اولین سند HTML را ساختیم،... اگر این 3 گام را انجام داده باشید، شما یک فایل یا صفحه HTML ایجاد کرده‌اید. اکنون در پایین گزینه Open and Save یک گزینه به نام Display HTML files as HTML code instead of formatted text وجود دارد که باید تیک آن را بزنید و ذخیره کنید.

آیا همه افزونه های VS Code رایگان هستند؟

آن را در مدیر پرونده خود پیدا کنید، دوبار کلیک کنید و “نصب” را انتخاب کنید. مطمئن شوید که برنامه Visual Studio Code خود را در مکانی ذخیره کرده اید که می دانید به راحتی می توانید آن را پیدا کنید. اگر از لپتاپ یا سیستم‌عامل مک استفاده می‌کنید، برای ساخت صفحه HTML نیاز به برنامه TextEdit دارید. برای این کار، ابتدا روی Finder کلیک کنید، سپس روی Applications بروید و در آنجا روی TextEdit کلیک کنید. همانطور که در بالا گفتیم، خروجی و نمایش کدها در مرورگر ربطی به نرم‌افزار مورد استفاده شده ندارد و فقط بخاطر راحتی کد نویسی، از VSCode استفاده می‌شود. باید دوباره یادآوری کنیم آموزش HTML سبزلرن طوری طراحی شده که با صرف کمترین زمان به نتیجه مطلوب می رسید.

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

(این ویژوال استودیو کد است و نه ویژوال استودیو) ویرایشگرهای متنی معروف دیگری که ممکن است از آن ها شنیده باشید Atom و Sublime Text هستند. بعد از ساخت یک صفحه HTML و نمایش آن در مرورگر، نوبت به ویرایش فایل HTML رسیده است. اگر به هر دلیلی بخواهید کدهای خود را ویرایش کنید، روی فایل HTML راست کلیک کنید و گزینه Open with را بزنید و سپس Notepad را انتخاب کنید. با زدن کلیدهای ترکیبی CTRL + S نیز می‌توانید عملیات ذخیره شدن را انجام دهید. هر سایتی که در اینترنت مشاهده می‌کنید، از یک فایل HTML ساخته شده است.

میانبرهای کاربردی و مهم صفحه کلید در VS Code

برچسب‌زنی خودکار، دیباگر زنده و واحد کنترل نسخه، تنها برخی از امکاناتی هستند که در VSCode موجود است. همچنین، جامعه برنامه‌نویسی فعالی در اطراف آن تشکیل شده است که افزونه‌ها و تم‌های بسیاری را برای این ویرایشگر ایجاد کرده‌اند. این ویرایشگر کد مشهور برای اولین بار در آوریل 2015 رونمایی و منتشر شد و به سرعت بازخوردهای مثبتی را از برنامه نویسان مختلف دریافت کرد. Visual Studio Code طی سال‌های پس از عرضه، با دریافت بازخوردها و درخواست‌های کاربران، ارتقاهای متعددی را تجربه کرده است.

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

اکنون، در این بخش از آموزش Visual Studio Code برخی از رایج‌ترین و کاربردی‌ترین کلیدهای میانبر در VS Code‌ معرفی شده‌اند. با استفاده از گزینه «Settings and Key Bindings» در صفحه Welcome، می‌توان به افزونه‌های میانبر صفحه کلید برای ویرایشگرهای مختلف دسترسی پیدا کرد. فایل نصب VS Code حدوداً ۶۰ مگابایت حجم دارد و دانلود آن چندان زمان‌بر نخواهد بود. پس از دانلود نسخه منطبق بر سیستم‌عامل، مراحل نصب VS Code آغاز می‌شود. در ادامه این بخش از آموزش Visual Studio Code، مراحل نصب این ویرایشگر کد منبع به طور کامل فهرست شده است. نصب افزونه‌ها در ویژوال استودیو – آموزش پی اچ پی … ما در دوره آموزش برنامه‌نویسی پی اچ پی (php) قصد داریم درباره HTML نیز کمی صبحت کنیم.

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

پیشنهاد می‌کنیم تعدادی از کد ادیتورهای مشابه Visual Studio Code را دانلود و بررسی کنید تا خودتان متوجه تفاوت‌های بین آنها شوید. از اونجایی که این زبان نشانه گذاری هیچ جایگزینی نداره بهتره با آغوش باز از اون استقبال کنید و با دوره آموزش HTML سبزلرن، یک بار برای همیشه این فسیل زنده رو درست، کامل و ساده یاد بگیرید. صفحات وب دیگه مثل قبل با چندتا متن و عکس ساخته نمیشن و دیدن آموزش HTML به تنهایی، به معنی آمادگی کامل و کافی برای انجام یه پروژه نیست. چون در کنار اون حداقل باید به CSS هم آشنا باشید تا بتونید رنگ و لعاب خوبی به صفحات بدید.

با هر زبان جدیدی که یاد می گیرید، Visual Studio Code متن را به گونه ای برجسته می کند که خواندن کد شما را آسان می کند. بنابراین، ما ویرایشگر متن خود را انتخاب کرده ایم، اکنون فقط باید آن را در رایانه خود نصب کنیم! روند نصب رایانه های دارای MacOS ،Windows و Linux بسیار مشابه خواهد بود و استفاده از Visual Studio Code در همه آن ها یکسان خواهد بود.

phpMyAdmin چیست و چه کاربردی دارد؟ – هر آنچه باید بدانید

برای مثال، افزونه vscode-database اتصال سریع و جستجو در MySQL و PostgreSQL را فراهم می‌کند. همچنین، افزونه vscode-sqlite امکان کار با پایگاه‌داده چندمنظوره SQLite را فراهم می‌کند. باید در نظر داشت که این افزونه‌ها در جستجو و اجرای Query کاربرد دارند و برای مدیریت جزئیات پایگاه‌داده مثل تغییر ساختار جدول مناسب نیستند (مگر آنکه فرد با مدیریت جزئیات از طریق Query ‌مشکلی نداشته باشد). این کدهای منبع معمولاً از طریق یک برنامه ویرایشگر کد منبع وارد کامپیوتر می‌شوند.

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

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

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

سوالات رایج Visual Studio Code

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

در ادامه دوره رایگان آموزش HTML و CSS، با جلسه آموزش حل مشکل نوشتن فارسی... در این جلسه از سری جلسات دوره آموزش رایگان HTML و CSS، می‌خواهیم با مفاهیم... در این جلسه از سری آموزش HTML و CSS می‌خواهیم بهترین ویرایشگر کد برای HTML... همچنین برخی از تنظیمات برگزیده را باید تغییر دهید تا برنامه بتواند فایل‌ها را به درستی ذخیره کند. برای این کار روی Preferences کلیک کنید و سپس روی Format بزنید و Plain Text را انتخاب کنید. با تمرکز بر توسعه ویرایشگر به صورت شخصی، عملکرد سریع و ویژگی‌های پیشرفته، VSCode از رقبا متمایز می‌شود و تجربه کار با آن برای برنامه‌نویسان موثر و دوستانه خواهد بود.

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

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

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

این همان ویژگی است که به طور گسترده‌ در مرورگرهای وب و تلفن‌های هوشمند نیز موجود است. از این جا به بعد شما نیاز به مقداری دانش برنامه نویسی در مورد زبان های Html و css دارید تا بتوانید در یک پروژه کد بزنید. کد زنی در محیط ویژوال کد با توجه به میزان خلاقیتی که نشان می دهید می تواند بسیار هیجان انگیز باشد. با این حال اگر می خواهید از محیط های متفاوت تر IDE اسفاده کنید می توانید به Adobe Dream Weaver و Bootstrap مراجعه کنید. البته توجه داشته باشید که دو محیط ذکر شده با ویژوال استودیو کد متفاوت اند. همانطور که در ابتدای مقاله بیان کردیم، نرم‌افزارهای زیادی برای ساخت فایل‌های HTML وجود دارند.

۹- فعال/غیرفعال کردن زبانه گیت

• از این جا به بعد شما نیاز به مقداری دانش برنامه نویسی در مورد زبان های Html و css دارید تا بتوانید در یک پروژه کد بزنید.
{
• همچنین می‌توان از CSS و JavaScript نیز در داخل کدهای HTML استفاده کرد.
|}
• یک پنجره تعاملی پس از توضیحات در همان صفحه وجود دارد که می‌توان با استفاده از آن، ویژگی قابلیت ویرایش با چند نشان‌گر را تمرین و امتحان کرد.
{
• همچنین، می‌توان افزونه IntelliSense را برای سایر زبان‌های برنامه‌نویسی که پشتیبانی IntelliSense به صورت پیش‌فرض برای آن‌ها وجود ندارد، به VS Code اضافه کرد.
|}{
• در این جلسه از سری جلسات دوره رایگان آموزش HTML و CSS، با آموزش تگ‌ های...
|}
• فراگرفتن نحوه استفاده از ابزارهای یک کار، در افزایش سرعت و کیفیت کار تاثیرگذار است.

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

کاربردهای Visual Studio Code

اگرچه، برای اشکال‌زدایی سایر زبان‌های زمان اجرا (Runtime) مثل ‎C++‎ یا پایتون، نیاز به نصب افزونه مخصوص وجود دارد. اولین قدم در آموزش HTML این است که بدانیم تعریف این زبان چیست؟ HTML یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری است که ساختار محتوای شما را تعریف می‌کند. HTML شامل مجموعه‌ای از عناصر ( elements ) می‌شود که با استفاده از آن شما می‌توانید ساختار یک صفحه وب را مشخص می‌کنید تا در قدم بعدی بتوانید به آن ظاهر مناسبی به آن دهید.

نحوه باز کردن TextEdit در مک (اپل)

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

زبان برنامه نویسی html چیست و چه کاربردی دارد؟

مراحل بعدی نصب مورد خاصی برای توضیح و آموزش ندارد و به سادگی با زدن Next و در انتها زدن گزینه Finish این مراحل نصب پایان می‌یابد و نصب Visual Studio Code روی ویندوز کامل می‌شود. در ادامه آموزش Visual Studio Code به آموزش نصب این ویرایشگر کد روی سیستم عامل macOS پرداخته شده است. ابتدا باید به صفحه دانلود سایت Visual Studio Code [+ّ] رفته و پلتفرم دلخواه برای نصب نرم‌افزار (در این مورد، ویندوز) را انتخاب کرد. قابلیت‌های IntelliSense در VS Code برای زبان‌های برنامه‌نویسی JavaScript ،TypeScript ،JSON ،HTML ،CSS ،Less و Sass به صورت پیش‌فرض و از ابتدا موجود است. همچنین، می‌توان افزونه IntelliSense را برای سایر زبان‌های برنامه‌نویسی که پشتیبانی IntelliSense به صورت پیش‌فرض برای آن‌ها وجود ندارد، به VS Code اضافه کرد.

در VS Code، پیشنهاداتی برای عناصر، تگ‌ها، برخی مقادیر و تگ‌های Ionic و AngularJS نیز ارائه می‌شود. همچنین می‌توان از CSS و JavaScript نیز در داخل کدهای HTML استفاده کرد. باید توجه شود که امکان استفاده از کدهای استایل‌دهی (CSS) و اسکریپت‌نویسی (JavaScript) از فایل‌های دیگر وجود ندارد و پشتیبانی HTML در VS Code به این صورت است که فقط محتوای فایل HTML را بررسی می‌کند. حتی قبل از پیدایش COVID-19 و تحول بنیادین ساختار مشاغل نیز، ابزارهای همکاری گروهی فرآیند انجام آنی کارها از راه دور را ساده‌تر کرده‌اند.

Visual Studio Code یک ویرایشگر کد چابک است که از عملیات توسعه نرم‌افزار مانند اشکال‌زدایی، اجرای وظایف و کنترل نسخه پشتیبانی می‌کند. هدف VS Code فراهم کردن ابزارهای مورد نیاز یک توسعه‌دهنده برای انجام چرخه «کدنویسی-ساخت-اشکال‌زدایی» است. در این راستا، جریان‌های کاری پیچیده‌تر به محیط‌های توسعه مثل Visual Studio IDE‌ سپرده می‌شود که امکانات کامل‌تری دارند.

پیش‌نیازهای دوره

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

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

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

اما بهترین نرم‌افزار برای ساخت یک فایل HTML، نرم‌افزار VSCode یا ویژوال استودیو کد است. این نرم‌افزار به‌صورت رایگان و متن باز (Open Source) توسط مایکروسافت ارائه شده است که می‌توانید آن را دانلود کنید. در وهله اول، معماری سبک و سرعت بالای این نرم افزار، شامل توانایی سریع و پردازش فایل‌های بزرگ را دارد. به علاوه، VSCode قابلیت توسعه با افزونه‌ها را دارد و با پشتیبانی از زبان‌های مختلف و فریم‌ورک‌ها، به برنامه‌نویسان امکان انجام کارهای خاص و متعددی را می‌دهد.

بیش‌تر ویرایشگرهای نرم‌افزار، قابلیت بررسی اعتبار قالب کد (Format Validation Check) و امکانات کپی و الصاق را ارائه می‌دهند. این قابلیت‌ها به حصول اطمینان از نوشته شدن کد بر اساس معیارهای تعیین شده آن زبان توسعه خاص، کمک می‌کنند. بعد از نصب ویژوال استودیو کد، ابتدا آن را باز کنید و در قسمت بالا سمت چپ روی گزینه File کلیک کنید. اگر قبلا فایل HTML را با نوت پد ساخته باشید، می‌توانید روی گزینه Open File کلیک کنید و کدهای HTML را ویرایش کنید. اما اگر اولین بار می‌خواهید یک فایل HTML ایجاد کنید، باید بعد از File روی گزینه New Text File کلیک کنید.

افزونه Code Time نیز امکان ردیابی و مدیریت بهره‌وری مستقیم توسط خود شخص را از طریق یک بستر متن‌باز فراهم می‌سازد. برای آن دسته از افرادی که تنها نیاز به یک زمان‌سنج Pomodoro دارند، یک افزونه برای آن نیز در VS Code موجود است. این قابلیت به توسعه‌دهنده کمک می‌کند تا بتواند ضوابط ساختار کد را به طور پیش‌فرض و با دردسر کم‌تری اجرا کند. اکنون قبل از شروع آموزش Visual Studio Code بهتر است ابتدا به این سوال پاسخ داده شود که «Visual Studio Code چیست». در این بخش از آموزش، با محیط نرم افزار Visual Studio Code  آشنا می شوید و کد نویسی را شروع می کنید و تگ های و را به شما عزیزان معرفی می کنیم. یادگیری HTML بسیار ساده‌ است به شکلی که با کمی تلاش شما می‌توانید کمتر از یک یا دو هفته به شکل کامل با این زبان نشانه‌گذاری آشنا شوید و مسیر یادگیری طراحی وب خود را ادامه دهید.

وقتی فایل خاصی در VS Code‌ باز می‌شود، در صورتی که افزونه مرتبط با آن فایل نصب نباشد، VS Code در یک پنجره مطابق تصویر زیر، نصب افزونه مناسب را پیشنهاد می‌دهد. برای مثال، اگر یک اسکریپت T-SQL باز شود، نصب افزونه «mssql» برای این نوع فایل توسط VS Code توصیه می‌شود. برای مثال، وقتی که فایل‌ها قطعه‌بندی شوند، یک ناحیه جدید برای فایل‌های قطعه‌بندی شده ایجاد می‌شود. برای مثال، در تصویر (Screenshot) زیر، قطعه‌بندی فایل‌ها در Explorer به صورت افقی یا Split Down انجام شده است. قطعه‌بندی برای زمانی مناسب است که قصد مقایسه دو یا بیش از دو اسکریپت با یکدیگر یا استفاده از یک اسکریپت به عنوان منبع وجود داشته باشد. همچنین می‌توان VS Code‌ را از طریق خط فرمان (Terminal) در macOS با وارد کردن دستور «code» اجرا کرد.