آموزش html در ویژوال استودیو2022-11-08

آموزش کامل کار با ویژوال استودیو کد، به همراه نکات کلیدی

البته برای ویرایش این تنظیم باید ترمینال مورد نظر خود را به شکل مستقیم درون فایل «Settings.json» وارد کنیم. سپس در بخش «Editor» مقدار گزینه Cursor Blinking  را تغییر دهید. به صورت پیش‌‌فرض این مقدار بر روی blink  تنظیم شده است. اما در این مطلب - با هدف نمایش داده شدن کد در فایل JSON - آن را بر روی expand  تنظیم کردیم. سپس در بخش «Workbench» گزینه Color Customizations  را پیدا کنید. مقدار مربوط به این تنظیم را باید در فایل «Settings.json» به صورت دستی تنظیم کرد.

Contact Us
PNL DEV
Email: info@pnldev.com
Phone: 09145622900
TEHRAN
TEHRAN, IRAN, IRAN

با این حال اگر می خواهید از محیط های متفاوت تر IDE اسفاده کنید می توانید به Adobe Dream Weaver و Bootstrap مراجعه کنید. البته توجه داشته باشید که دو محیط ذکر شده با ویژوال استودیو کد متفاوت اند. در این پنجره اطلاعات و تنظیماتی که هنگام نصب درنظر گرفتید، به شما نمایش داده می‌شود. پس از اتمام نصب ویژوال استودیو کد، یک پنجره با پیام موفقیت آمیز بودن نصب نشان داده می‌شود. در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است. این قابلیت برای باز کردن فایل‌های یک پروژه بسیار مفید است.

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

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

Visual Studio Code یکی از محبوب‌ترین ویرایشگرهای کد در دنیای برنامه‌نویسان است. در فهرست زیر، دو مورد از مهم‌ترین تنظیمات ویژوال استودیو کد را برای استفاده از فایل‌های «Markdown» معرفی کرده‌ایم. در فهرست زیر، مهم‌ترین تنظیمات ویژوال استودیو کد را درباره قالب‌بندی‌ و فایل‌ها معرفی کرده‌‌ایم. همین‌طور که می‌دانیم، VS Code برای اعلام بعضی از شرایط از نماد‌های مختلفی در نام‌ سربرگ‌ها استفاده می‌کند. برای مثال، با کمک نماد‌ «M» می‌تواند بگوید که فایل مورد نظر ویرایش شده است.

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

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

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

Enable Sticky Scroll  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Color Customizations  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. Indent  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. برای اعمال این تنظیم، ابتدا وارد فایل «Settings.json» برای تنظیمات شوید. Font Ligatures  را به صورت دستی با مقدار true  تنظیم کنید. کد مربوط به تنظیم Font Family  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

بخش‌های سایت

این افراد می‌توانند برای خود پروفایل‌های کاربری تعریف کرده و هر کدام تنظیمات مورد نظر خود را بر روی VS Code پیکربندی کنند. با پیاده‌سازی صحیح این تنظیمات محیط کار، کیفیت و سرعت عملکرد توسعه‌دهندگان افزایش پیدا می‌کند. هنگامی که در درخت فایل‌ بر روی یکی از فایل‌ها کلیک می‌کنیم، کد ادیتور این فایل‌ را در «سربرگ ویرایشگر پیش‌نمایشی» (Preview Editor Tab) باز می‌کند.

آموزش کامل کار با ویژوال استودیو کد

با پیکربندی این مورد در تنظیمات، ویژوال استودیو کد به صورت خودکار تمام خطوط خالی انتهای فایل را حذف می‌کند. کد مربوط به تنظیم Insert Final Newline  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Tool Bar Location  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Compact Folders  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

Bracket Pairs  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. Enable Preview  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Pinned Tab Sizing  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. در ویژوال استودیو کد می‌توانیم عرض سربرگ‌های پین شده را طوری تنظیم کنیم که کوچک‌تر دیده شوند.

ظاهر کرسر ترمینال

اگر همچنان با نت نمیتونید نصب کنید بفرمایید تا با کمک هم حلش کنیم. دروداز منوی بالا تب view میتونید با تیک زدن موارد appearance و editor layout موارد موردنیازتون رو در محیط اضافه کنید. درودنباید با چنین مشکلی مواجه بشید اما بهتره برای اطمینان از vpn استفاده کنید.

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

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

با استفاده از تنظیم «Auto Stash»، می‌توانیم به صورت خودکار تغییرات ایجاد شده در کدها را ذخیره کنیم. این ذخیره‌سازی قبل از واکشی داده‌ها از مخزن گیت انجام می‌شود. بعد از اینکه واکشی داده‌ها با موفقیت انجام شد، تغییرات ذخیره شده بازیابی می‌شوند. ترمینال متصل شده به VS Code، دارای بافری است که برای انجام عملیات «Scrollback» به‌ کار برده می‌شود. Scrollback به معنای برگشتن به داده‌های خروجی دستورات پیشین در ترمینال است.

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

با نصب افزونه‌ی Settings Sync، می‌توانید تنظیمات را همراه با پروژه‌ی موردنظر در گیت‌هاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند. با نصب افزونه Quokka، هم‌‌زمان با تایپ کردن کد در ویرایشگر، کدها اجرا شده و خروجی به شما نشان داده می‌شود. اگر کد دارای خطا یا هشدار باشد نیز همان‌جا به شما نمایش داده شده و شما را راهنمایی می‌کند. در صورتی که اپلیکیشن فیلو را نصب کرده اید؛ برای تماشا یا دانلود این ویدیو وارد اپلیکیشن شده، از منو گزینه اسکن را انتخاب کرده و کد زیر را اسکن کنید. در این آموزش، ما به طور کامل درباره Visual studio code، نحوه پیاده سازی آن و نحوه اضافه کردن اکستنشن ها به نرم افزار Visual studio code پرداخته ایم. این مجموعه، شامل فیلم‌های آموزشی بسیار زیادی است که تکنولوژی‌ها و زبان‌های مختلف را پوشش می‌دهند.

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

برای این کار، ابتدا روی Finder کلیک کنید، سپس روی Applications بروید و در آنجا روی TextEdit کلیک کنید. با تمرکز بر توسعه ویرایشگر به صورت شخصی، عملکرد سریع و ویژگی‌های پیشرفته، VSCode از رقبا متمایز می‌شود و تجربه کار با آن برای برنامه‌نویسان موثر و دوستانه خواهد بود. پیشنهاد می‌کنیم تعدادی از کد ادیتورهای مشابه Visual Studio Code را دانلود و بررسی کنید تا خودتان متوجه تفاوت‌های بین آنها شوید. دوره آموزش وی اس کد، نحوه کار و استفاده از حداکثر پتانسیل برنامه VSCode را به شما یاد می‌دهد. یادگیری استفاده‌ی صحیح از ابزارهای توسعه، تأثیر چشمگیری در افزایش سرعت، کیفیت و بهره‌وری کار شما خواهد داشت، به‌ویژه در دنیای رقابتی برنامه‌نویسی.

    {
  • همچنین می‌توانید نام آن را از New Text Document به index تغییر دهید.
  • |}
  • در عین حال منجر به سخت‌تر شدن عملیات مربوط به کشیدن و انداختن فایل‌ها درون فولدر‌های مخفی نیز شده است.
  • سپس در بخش «Workbench» به قسمت Editor  رفته و مقدار Pinned Tabs On Separate Row  را بر روی true  تنظیم کنید.
  • {
  • تصویر سمت چپ، ظاهر درخت فایل‌ را قبل از اعمال این تنظیم و تصویر سمت راست بعد از اعمال این تنظیم نشان می‌دهد.
  • |}
  • حتی امکان کدنویسی به زبان‌هایی که به صورت عادی، در محیط Visual Studio Code  قابل استفاده نیستند نیز وجود دارد.
  • {
  • در نتیجه برای «ذخیره خودکار» (Auto Save) کارها می‌توانید از تنظیمات ویژوال استودیو کد استفاده کنید.
  • |}

به عنوان برنامه نویس حرفه‌ای، نیاز داریم که به طور کامل بر روی محیط و ابزار کار خود مسلط باشیم. زیرا کیفیت محصولی که تحویل می‌دهیم، اهمیت بسیار بیشتری نسبت به تعداد مهارت‌های ما دارد. وجود تنظیمات زیاد و متنوع در ویژوال استودیو کد، به برنامه‌ نویسان برای تسلط بر محیط کدنویسی خود کمک زیادی می‌کند. Enabled  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Git» گزینه Suggest Smart Commit  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید. سپس در بخش «Git» گزینه Merge Editor را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

گام سوم: تغییر فرمت فایل Text به HTML در VSCode

البته این مقدار سلیقه‌ای است و می‌توانید بیشتر یا کمتر هم بکنید. سپس در بخش «Workbench» به قسمت Editor  رفته و مقدار Pinned Tabs On Separate Row  را بر روی true  تنظیم کنید. سپس در بخش «Editor» مقدار گزینه Smooth Scrolling  را بر روی true  تنظیم می‌کنیم. Enabled  را پیدا کرده و مقدار آن را به true  تغییر دهید. هدف اصلی از به کار بردن تنظیمات ویژوال استودیو کد این است که فرایند اجرای وظایف برنامه نویسی را به شکل راحت‌تر و با سرعت بیشتری انجام دهیم.

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

لینک مربوط به این فیلم آموزشی را در پایین نیز قرار داده‌‌‌ایم. کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Default Language  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. از آنجا که هنوز آن را ذخیره نکرده‌ایم و هیچ پسوندی هم به نام آن اختصاص داده نشده است، ویرایشگر کد VS Code نمی‌تواند نوع فایل و زبان کدهای نوشته شده در آن را تشخیص دهد. بنابراین امکان فراهم کردن خدماتی مانند هایلایت‌کردن سینتکس، تکمیل خودکار کدها و غیره هم وجود ندارد.

آماده‌سازی VS Code برای زبان‌های مختلف

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

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

سلامآیا سرفصل آموزش کدنویسی در نرم افزار visual studio code رو در همین مقاله مطالعه کردید؟ همون پاراگراف اولش درمورد اینکه نوع فایل رو چطور پایتون کنید توضیح دادیم. سبک بودن و سریع بودن ویژوال استودیو کد باعث شده است تا اغلب توسعه دهندگان وب از این کد ادیتور استفاده کنند. به همین منظور سه مقاله‌ی جدا با عناوین بهترین افزونه‌های vscode  و بهترین افزونه‌های ویژوال استودیو کد برای php را برای شما در نظر گرفتیم. علاوه بر آن، این امکانات زیاد باعث می‌شود که سرعت ویژوال استودیو بسیار کمتر از ویژوال استودیو کد باشد.

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

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

به صورت پیش‌فرض این تنظیم کل فایل را قالب‌بندی می‌کند. اما شاید کاربری ترجیح دهد که فقط خطوط ویرایش شده‌ قالب‌بندی شوند. برای انجام این کار از مقدار modifications  برای تنظیم formatOnSaveMode  استفاده می‌‌کنیم.

برای شروع از قسمت File روی گزینه Add Folder to Workspace کلیک کنید. با استفاده از مدیر فایل یا داخل ویژال کد خود یک پوشه بسازید. مطمئن شوید که پوشه ای است که مرتباً از آن بازدید می کنید و آن را به خاطر می سپارید. می توانید پوشه جدیدی به نام پروژه ایجاد کنید و درون پوشه پروژه، پوشه جدیدی به نام HelloWorld ایجاد کنید. هرچه به این پوشه اضافه کنید بخشی از پروژه HelloWorld شما خواهد بود.

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

قدم 1: نصب Visual Studio Code

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

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

درودبه این شکل هست که در ترمینال دستور اجرا رو میزنید و در بخش اوت پوت میتونید خروجی رو ببینید. درودبرنامه رو حذف و از سایتهای معتبر مجدد دانلود کنید. درودحقیقتا یکم با ویندوز 7 کارها سخت هست و چنین خطاهای عجیبی رو دریافت خواهید کرد. پیشنهاد میکنم در گام اول ویندوز رو به ده ارتقا بدید تا چند سال براتون کار کنه و سر نصب موارد بعدی به دردسر نیفتید. دکمه‌های ctrl+space رو بزنید باید موارد رو بهتون پیشنهاد بده و اگر نشد، از بخش اکستنشنها IntelliSense مربوط به بیسیک رو نصب کنید. در سمت چپ چندین تب وجود دارد که در ادامه کاربرد هر یک را توضیح می‌دهیم.

کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. منتهی وقتی برنامه پایتون مینویسم و ران و دیباگ رو میزنم، فقط در ترمینال ران میشه و در debug console هیچ چیزی نمایش داده نمیشه. در واقع انگار debug console عملیاتی نیست یا متصل نیست چون وقتی روش کلیک میکنم فضای داخلش خالیه. بهترین مزیت استفاده از ویژوال استودیو کد این است که می‌توان افزونه‌های زیادی را با استفاده از سیستم مدیریت افزونه‌ها نصب کرد. درمورد این قابلیت در بخش بعدی به طور مفصل صحبت می‌کنیم.

{

فیلم آموزش نصب SQL Server 2014 با جزئیات

|}

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

{

آموزش Visual Studio Code – آموزش vs code رایگان و جامع – راکت

|}

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

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

Render Indent Guides  را پیدا کرده و مقدار آن را بر روی always  تنظیم کنید. سپس در بخش «Editor» گزینه Font Family  را پیدا کرده و مقدار آن را بر روی 'CaskaydiaCove Nerd Font'  یا Consolas  یا 'Courier New'  یا monospace  و غیره تنظیم کنید. Bracket Pairs  را پیدا کرده و مقدار آن را بر روی active  تنظیم کنید. برای پیکربندی این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید.

{

آموزش vs code رایگان جامع ترین دوره آموزش وی اس کد

|}

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

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

کد مربوط به تنظیم Auto Stash  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Autofetch  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. گیت، سیستم کنترل نسخه متن‌بازی است که به توسعه‌دهندگان برای مدیریت و اشتراک‌گذاری تغییرات در کدهای منبع کمک می‌کند. توسعه‌دهندگان مختلف می‌توانند به طور هم‌زمان بر روی پروژه یکسانی کار کنند. در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید.

کد مربوط به تنظیم Cursor Style  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. Enabled  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. بعضی از ساختارها در زبان‌های برنامه نویسی مانند توابع، کلاس‌های برنامه نویسی و Structure-ها را می‌توان به صورت تودرتو تعریف کرد. استفاده از این تنظیم باعث می‌شود که بعد از اسکرول کردن صفحه به پایین نام مربوط به سطوح مختلف این ساختارها به بالای ویرایشگر بچسبد. در این حالت بسیار راحت‌تر می‌توانید بخش‌های تودرتوی کدها را تشخیص دهیم. این تنظیم بر روی زبان‌های برنامه نویسی زیادی مانند جاوا اسکریپت، تایپ اسکریپت، سی شارپ، JSON و YAML و Markdown و غیره کار می‌کند.

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

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

{

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

|}

اول یدور حذف نصب و نصب مجدد کنید و ویژوال رو باز و بسته کنید تا اعمال بشه و بعد چک کنید. البته در این حالت که رو cmd اجرا میگیرید، شاید بد نباشه live serve رو مستقیم همونجا نصب کنید. سرچ بزنید راهنمای کامل رو میاره.اما در کل براساس تجربه توصیه میکنم که به پایچارم کوچ کنید و زمان باارزشتون رو تلف نکنید.

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

با نصب افزونه‌ی Path Intellisense کار با مفاهیم فایل بسیار آسان‌تر می‌شود. با استفاده از Polacode‌ می‌توانید از کد خود اسکرین‌شات‌ بگیرید و آن را به اشتراک بگذارید. ممکن است دموهای تصویری موجود در اینترنت را دیده باشید که بخشی از کد را نشان می‌دهند. بعد از نصب افزونه‌ی Better Align می‌توانید بخش‌های تعریف متغیر، declarationهای مختلف و به طور کلی کدهای نوشته شده در یک فایل را هم‌تراز کنید. این باعث می‌شود تا راحت‌تر بتوانید نظرات و بخش‌های مختلف کد را دنبال کنید.

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

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

{Programming|Programación|Programmation|Programmierung|编程 (Biānchéng)|プログラミング (Puroguramingu)|Программирование (Programmirovaniye)|برمجة (Barmaja)|Programação|Programmazione|Programlama|프로그래밍 (Peurogeuraeming)|प्रोग्रामिंग (Programming)|Programmeren|Programmering|Programowanie|Lập trình|การเขียนโปรแกรม (Kār k̄hī̂n progrām)|Προγραμματισμός (Programmatismós)|Ohjelmointi|برنامه نویسی} https://pnldev.com/fa
آموزش زبان html css