کد نویسی html درvisual studio code، آموزش html در vscode

افزونه‌ی Code Runner کمک می‌کند تا کدهای نوشته شده با زبان‌های برنامه نویسی مختلف را با یک کلیک اجرا کنید. این افزونه در سیستم عامل‌های مختلف دارای کلیدهای میانبر می‌باشد. برای کار با Code Runner می‌توانید به راهنمای آن در صفحه‌ی فروشگاه VScode مراجعه کنید. در HTML 5 تغییراتی در تگ ها ، بهبود هایی در استفاده از CSS  و همچنین جاوااسکریپت ایجاد شده است که باعث می شود بتوانیم از آن در پلت فرم های مختلف استفاده کنیم . چگونه یک فایل HTML بسازیم؟ بدون شک همه شما با دنیای وب آشنا هستید.

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

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

علاوه بر این، با استفاده از افزونه‌های موجود، می‌توانید آن را به دلخواه خود گسترش دهید و قابلیت‌های جدیدی به آن اضافه کنید. حتی امکان کدنویسی به زبان‌هایی که به صورت عادی، در محیط Visual Studio Code  قابل استفاده نیستند نیز وجود دارد. همین موضوع، اهمیت یادگیری و شرکت در یک دوره آموزش vs code را توجیه می‌کند. برای اعمال این تغییر ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated  را پیدا کرده و مقدار Default Profile.

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

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

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

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

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

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

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

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

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

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

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

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

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

{
• می‌بینید که ردیف بالا فقط مختص سربرگ‌های پین شده است.
|}{
• در جدول زیر، تنظیمات محیط کاربری ویژوال استودیو کد را نام برده‌ایم.
|}
• اگر سوالی در مورد نرم افزار ویژوال استودیو کد دارید یا تجربه‌ی کار با آن را دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.
{
• شاید بتوان گفت که مهم‌ترین و مفید‌ترین تنظیمات ویژوال استودیو کد برای بخش رابط کاربری این نرم‌افزار طراحی شده‌‌اند.
|}
• در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید.
• تیم وبکیما همیشه در تلاش است تا بهترین دوره های آموزشی، با بالاترین کیفیت و بیشترین بازدهی را برای رشد و رونق کسب و کار اینترنتی شما تولید کند.

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

به چه سیستمی برای نصب و اجرای ویژوال استودیو کد نیازمندیم؟

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

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

فولدر‌‌های بهم پیوسته درخت فایل

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

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

راهکارهای موثر در ASP.Net > راهکار 4-1 : استفاده از کدهای مخفف و …

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

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

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

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

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

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

فیلم آموزش نصب ویژوال استودیو نسخه 2017 به صورت کامل

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

نصب ویژوال استودیو کد

Colors  در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. علاوه بر فعال کردن Minimap با استفاده از تنظیمات متنوع می‌توانیم آن را سفارشی‌سازی هم بکنیم. بنابراین توصیه می‌کنیم که انواع تنظیمات را امتحان کرده و گزینه مناسب خود را انتخاب کنید. Enabled در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. برای اعمال این تنظیم، ابتدا به صفحه رابط کاربری تنظیمات رفته و سپس از گزینه «Editor» مقدار Render Whitespace  را بر روی boundary  تنظیم می‌کنیم. Syntax مجموعه قوانینی است که به ما می گوید چگونه می توان کدی را که به درستی نوشته شده ایجاد کرد.

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

HTML و CSS چیست؟ آموزش رایگان ویدیویی

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

مباحث تکمیلی در VS Code

درود متن دقیق خطایی که میگیرید رو بفرستید تا بتونم کمک تون کنم. من هر کدی رو تو vs می‌نویسم و ران می‌کنم هیچ خروجی به من نمی‌ده حتی پروژه hello world . درودبه این دلیل هست که ماکروسافت پشتیبانی برنامه‌ها رو از ویندوز 8 به بعد ارائه میده. باید تست کنید و اگر نتیجه نداد، با جستجوی vscode for windows 7 از سایتهای دیگه دریافتش کنید.

یادگرفتن برنامه نویسی توسط فیلم های پروژه محور فرادرس

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

اگر به یادگیری بیشتر در زمینه‌ی برنامه نویسی پایتون علاقه داری، یادگیری زبان پایتون بسیار ساده است. و با شرکت در دوره‌ی متخصص آموزش جنگو در آینده می‌تونی اپلیکیشن موبایل و دسکتاپ بسازی و وارد حوزه‌ی هوش مصنوعی هم شوی. وب‌سایت آموزش برنامه نویسی دولوپر شو در 6ام تیر ماه سال 1401 تاسیس شد. هدف ما این است که برنامه نویسی را با استفاده از مقالات و ویدئوهای آموزشی برنامه نویسی در سطح استاندارد جهانی برای شما فراهم کنیم. اما اگر در گام اول از روش دوم استفاده کرده‌اید، بعد از قرار دادن تگ‌های HTML با زدن کلیدهای ترکیبی CTRL + S فایل را ذخیره کنید.

سپس در بخش «Git» گزینه Auto Stash  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Git» گزینه Autofetch  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. Cursor Style  را پیدا کرده و مقدار آن را بر روی line  تنظیم کنید. Font Family  را پیدا کرده و مقدار آن را بر روی CaskaydiaCove Nerd Font Mono  تنظیم کنید. سپس در بخش «Files» گزینه Default Language  را پیدا کرده و مقدار آن را - با توجه به مثال بالا - بر روی powershell  تنظیم کنید.

آموزش ساخت فایل html در VSCode (سند خام html)

نوع پیش‌فرض رمزنگاری فایل‌های VS Code در تنظیمات files.encoding  تعریف شده است. برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی Setting شوید. سپس در بخش «Workbench» به قسمت Editor رفته و مقدار Pinned Tab Sizing  را بر روی shrink  تنظیم کنید. علاوه بر این موارد، یک برنامه نویس باید بتواند حداقل با یک محیط توسعه یا یک ویرایشگر کد کار کند و به خوبی به آن مسلط شود.

در نتیجه دیگر برنامه نویسان مجبور نیستند عمل واکشی را به صورت دستی انجام دهند. برای فعال کردن این تنظیم ابتدا وارد محیط گرافیکی تنظیمات شوید. Auto Find In Selection  را پیدا کرده و مقدار آن را بر روی multiline  تنظیم کنید.

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

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

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

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

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

کد مربوط به تنظیم «دستور Commit هوشمند» در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. تنظیم «Merge Editor» در ویژوال استودیو کد به توسعه دهندگان برای ویرایش و حل تعارضات کمک می‌کند. در زمان بررسی تعارضات بین کدها، VS Code، ویرایشگر مجازی را برای ادغام کدها باز می‌کند. این ویرایشگر مجازی برای برطرف کردن خطوط متعارض به برنامه نویس کمک می‌کند.

درود احتمالا به زبان جاوا یا کاتلین نوشتید.کافیه سه خط از کدتون رو اینجا بفرستید تا بتونم کمکتون کنم. دروداز خود microsoft store در ویندوزتون عبارت vscode رو سرچ کنید و برنامه رو نصب کنید. با استفاده از این افزونه‌ی Git Lens می‌توانید بفهمید که خط مورد نظر از کد، توسط چه کسی و در چه تاریخی تغییر کرده است، تاریخچه‌ی کامیت‌ها را بررسی کنید و... تنظیمات مربوط به حساب کاربری در این بخش انجام می‌شود. در این بخش می‌توانید در اسامی فایل‌های پروژه جستجو کنید تا بتوانید اصلاحات موردنظر را روی آن‌ها انجام دهید.

به عنوان مثالی از این خطاها می‌توان به «لینک‌های خراب» (Broken Links) به صفحات یا تصاویری اشاره کرد که وجود ندارند. در ادامه این بخش از مطلب، روش پیکربندی همه تنظیمات فهرست بالا را آموزش داده‌ایم. در ادامه همین بخش از مطلب، روش پیکربندی تمام تنظیمات بالا را آموزش داده‌ایم. در تصویر زیر چند تب دلخواه را در دو ردیف مجزا دسته‌بندی کرده‌ایم. برای دسته‌بندی بهتر می‌توانیم ردیفی از سربرگ‌های پین‌ شده داشته باشیم. تمام سربرگ‌ها را می‌توان به سادگی پین کرده یا از حالت پین شده خارج کرد.

اضافه کردن فونت فارسی در CSS و HTML

اگر از ترمینال یکپارچه شده با VS Code استفاده می‌کنید، امکان تغییر آن وجود دارد. ترمینال پیش‌فرض VS Code در ویندوز «Cmd.exe» و در لینوکس و macOS ترمینال «Bash» است. شاید به عنوان توسعه‌‌دهنده ترجیح دهید که از کنسول PowerShell به عنوان ترمینال پیش‌فرض، استفاده کنید.

ذخیره خودکار فایل‌ ها

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

کئنویسی html با ادیتورهای مختلف قابل انجام است که یکی از بهترین آنها، ویژوال استودیو کد است. در این دوره ما می خواهیم که آموزش کامل html,css,css۳ و پیاده سازی وب سایت و به صورت پروژه های و عملی را با نرم افزار visual studio code انجام دهیم. کد مربوط به تنظیم Suggest Smart Commit  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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