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

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

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

Enabled  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Markdown» گزینه Editor را پیدا کرده و در این قسمت مقدار Paste URL As Formatted Link. سپس در بخش «Git» گزینه Suggest Smart Commit  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید. سپس در بخش «Git» گزینه Merge Editor را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Git» گزینه Auto Stash  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Git» گزینه Autofetch  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

مفاهیم پایه زبان HTML آشنایی با تگ‌ ها و صفت ها

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

چگونه با ویژوال استودیو کد (Visual Studio Code) یک وب سایت …

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

کد مربوط به تنظیم Suggest Smart Commit  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم «دستور Commit هوشمند» در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Auto Stash  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

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

• یکی از ویژگی‌های کلیدی Visual Studio Code، پشتیبانی قدرتمند آن برای «دیباگ کردن» (Debugging) است.
{
• در ادامه آموزش Visual Studio Code به معرفی ویژگی خرده‌نشانی (Breadcrumb) پرداخته شده است.
|}{
• این ویژگی به طور خاص در زمان پیست کردن تکه‌ کدهای کپی شده از اینترنت کاربرد دارد.
|}
• این ویرایشگر مجازی برای برطرف کردن خطوط متعارض به برنامه نویس کمک می‌کند.
• برای صرفه‌جویی در فضای عمودی ویرایشگر کد می‌توانیم ارتفاع سربرگ‌ها را کاهش دهیم.
{
• تنظیم Autofetch به توسعه‌دهندگان برای بررسی به‌روزبودن مخزن محلی کمک می‌کند.
|}

آموزش class و id در CSS انتخابگرها در CSS

این نوار در بالای ویرایشگر قرار می‌گیرد، همچنین به ازای هر سربرگ باز شده به صورت جداگانه نمایش داده می‌شود. در نوار Breadcrumbs نه تنها مسیر فایل‌ها نمایش داده می‌شود، بلکه حتی مسیر کلاس و تابعی که در حال حاضر بر روی آن تمرکز کرده‌ایم نیز نشان داده می‌شود. کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. مایکروسافت ویژوال استودیو کد را به صورت رایگان ارائه داده است که به راحتی می توانید آن را تهیه و استفاده کنید. چنانچه هرگونه انتقاد، پیشنهاد و یا سوالی در مورد دوره آموزش vs code دارید، میتوانید در ادامه همین صفحه از بخش دیدگاه‌ها با ما درمیان بگذارید تا در کمترین زمان ممکن پاسخ داده شود.

مهم ترین تنظیمات ویژوال استودیو کد چه هستند؟

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

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

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

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

ساخت اولین سایت با HTML در VS Code

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

نسخه VS Code، اولین شماره نسخه فهرست شده است و قالب نسخه آن به صورت «major.minor.release» است. یعنی، سمت چپ‌ترین رقم مربوط به شماره نسخه اصلی، رقم وسط مربوط به شماره نسخه فرعی و آخرین رقم نیز مربوط به شماره انتشار (Release) است. نبی عبدی هستم مدیر آکادمی وبکیما، مدرس و محقق در حوزه راه‌اندازی انواع کسب‌وکارهای اینترنتی، میخوام بدونید که کار در حوزه اینترنت بسیار دوست داشتنیه! لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید. سلام امیر جان درس آخر مشاهده کنید تمامی تمرین ها آنجا هستند.

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

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

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

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

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

بهترین متد هش در PHP‌ چیست؟ – آموزش هش به زبان ساده

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

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

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

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

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

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

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

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

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

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

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

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

در سمت چپ صفحه، نوار فعالیت (Activity Bar) قرار دارد که در ادامه به معرفی و آموزش آن پرداخته شده است. پس از نصب Visual Studio Code، می‌توان این ویرایشگر را با وارد کردن دستور «code -n» در خط فرمان، اجرا کرد. این دستور، VS Code را وادار می‌کند که یک نمونه (Instance) جدید را شروع کرده و نمایش دهد. در این قسمت از آموزش Visual Studio Code چگونگی نصب این ویرایشگر کد منبع در سیستم عامل macOS توضیح داده شده است. گاهی لازم است برای ویرایش یک فایل از کدهای فایل دیگری استفاده شود. VS Code‌ امکان باز کردن چند ویرایشگر در کنار یکدیگر را فراهم می‌کند.

Hello World با پایتون در VS Code

Auto Find In Selection  را پیدا کرده و مقدار آن را بر روی multiline  تنظیم کنید. نرم افزار ویژوال استودیو کد به‌جای تبدیل کردن ساختار فایل به رمزگذاری پیش‌فرض خود، به شکل خودکار نوع رمزنگاری فایل را حدس می‌زند. در نتیجه می‌‌تواند فایل مورد نظر را به شکل صحیحی نمایش دهد. به همین‌ ترتیب در زمان ذخیره‌سازی فایل‌هم از همان قائده رمزنگاری استفاده می‌کند. نوع پیش‌فرض رمزنگاری فایل‌های VS Code در تنظیمات files.encoding  تعریف شده است.

برای اعمال این تنظیم، ابتدا به صفحه رابط کاربری تنظیمات رفته و سپس از گزینه «Editor» مقدار Render Whitespace  را بر روی boundary  تنظیم می‌کنیم. سلام دوستان امروز با یکی دیگر از آموزش‌های رایگان درسمن، همراه ما هستید. قرار است در اینجا به آموزش کامل کار با ویژوال استودیو کد بپردازیم. قبل از اینکه کار کردن با آن را یاد بگیریم به طور کامل در مورد آن صحبت می کنیم.

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

آزمون‌های زبان انگلیسی

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

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

شما با موفقیت ویرایشگر متن خود را تنظیم کرده و آماده ایجاد وب سایت در رایانه خود هستید. در زیر مراحلی وجود دارد که باید برای ایجاد یک پوشه جدید برای همه پروژه های برنامه نویسی خود دنبال کنید. شما همچنین یاد خواهید گرفت که چگونه یک پوشه پروژه جدید را در Visual Studio Code بسازید و اولین پروژه HTML با جمله “Hello world” را بسازید.

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

امکان ویرایش چند فایل به صورت همزمان

کد مربوط به تنظیم Autofetch  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم «ظاهر کرسر ترمینال» در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. در تنظیمات ویژوال استودیو کد حتی می‌توانیم ظاهر کرسر ترمینال را هم پیکربندی کنیم. کد مربوط به تنظیم فونت ترمینال در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

Snippet ها در Vs Code

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

یکی از قابلیت‌ها و ویژگی‌های کلیدی VS Code افزونه‌های متعددی است که اکثراً به صورت رایگان قابل نصب و استفاده هستند. بعضی وقت‌ها موقع کار کردن فراموش می‌کنیم که تغییرات اعمال شده را وارد حالت «Stage» کنیم. بعد از آن ویژوال استودیو کد، گزینه‌های Yes و No و Always و Never را به عنوان پاسخ قابل انتخاب نشان می‌دهد. به همین دلیل در این مطلب از مجله فرادرس، مفید‌ترین تنظیمات ویژوال استودیو کد را معرفی کرده‌ایم.

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

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

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

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

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

این ویرایشگر مجازی برای برطرف کردن خطوط متعارض به برنامه نویس کمک می‌کند. برای ذخیره کردن خودکار تغییرات بر روی فایل‌ از کلید‌های Ctrl +S استفاده می‌کنیم. در نتیجه برای «ذخیره خودکار» (Auto Save) کارها می‌توانید از تنظیمات ویژوال استودیو کد استفاده کنید. برای پیکربندی این تنظیمات می‌توان ۲ حالت مختلف را در نظر گرفت. برای اعمال این تنظیم، ابتدا وارد فایل «Settings.json» برای تنظیمات شوید. Font Ligatures  را به صورت دستی با مقدار true  تنظیم کنید.

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

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

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