آموزش html با visual studio code2024-09-01
آموزش کامل کار با ویژوال استودیو کد، به همراه نکات کلیدی
نسخه VS Code، اولین شماره نسخه فهرست شده است و قالب نسخه آن به صورت «major.minor.release» است. یعنی، سمت چپترین رقم مربوط به شماره نسخه اصلی، رقم وسط مربوط به شماره نسخه فرعی و آخرین رقم نیز مربوط به شماره انتشار (Release) است. نبی عبدی هستم مدیر آکادمی وبکیما، مدرس و محقق در حوزه راهاندازی انواع کسبوکارهای اینترنتی، میخوام بدونید که کار در حوزه اینترنت بسیار دوست داشتنیه! لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید. سلام امیر جان درس آخر مشاهده کنید تمامی تمرین ها آنجا هستند.
یکی از قابلیتها و ویژگیهای کلیدی VS Code افزونههای متعددی است که اکثراً به صورت رایگان قابل نصب و استفاده هستند. بعضی وقتها موقع کار کردن فراموش میکنیم که تغییرات اعمال شده را وارد حالت «Stage» کنیم. بعد از آن ویژوال استودیو کد، گزینههای Yes و No و Always و Never را به عنوان پاسخ قابل انتخاب نشان میدهد. به همین دلیل در این مطلب از مجله فرادرس، مفیدترین تنظیمات ویژوال استودیو کد را معرفی کردهایم.
شما با موفقیت ویرایشگر متن خود را تنظیم کرده و آماده ایجاد وب سایت در رایانه خود هستید. در زیر مراحلی وجود دارد که باید برای ایجاد یک پوشه جدید برای همه پروژه های برنامه نویسی خود دنبال کنید. شما همچنین یاد خواهید گرفت که چگونه یک پوشه پروژه جدید را در Visual Studio Code بسازید و اولین پروژه HTML با جمله “Hello world” را بسازید.
تفاوت ویرایشگر کد و محیط توسعه
بنابراین اگر بر روی فایل دیگری در درخت فایل کلیک کنیم، برای باز کردن سربرگ پیشنمایش آن فایل ابتدا باید صفحه پیشنمایش فعلی بسته شود. شاید بتوان گفت که مهمترین و مفیدترین تنظیمات ویژوال استودیو کد برای بخش رابط کاربری این نرمافزار طراحی شدهاند. زیرا سفارشیسازی مناسب محیط کار و رابط کاربری باعث اجرای راحتتر وظایف و کسب تجربه کاربری بسیار بهتری میشود. به همین دلیل طراحان VS Code امکان سفارشیسازی بسیار زیادی را برای این بخش فراهم کردهاند. این گزینه هم مثل گزینه قبلی عمل میکند، ولی با این تفاوت که زمانی که روی مسیر فایلها یا همان دایرکتوری آنها کلیک کنید، گزینهی Open with Code در منوی راست کلیک آن نمایان میشود. این قابلیت برای باز کردن فایلهای یک پروژه بسیار مفید است.
اضافه کردن دکمه آپلود رسانه در وردپرس با کدنویسی
این امکانات برای هر توسعهدهندهای بسیار کاربردی محسوب میشوند. در VS Code، میتوان قالببندی کد جاوا اسکریپت و کدهای سایر زبانهای برنامهنویسی را انجام داد. برای دسترسی به امکانات ذکر شده در بالا، میتوان در داخل فایل کدها راست کلیک کرد. VS Code ویرایشگر محبوب و پراستفادهای است و مزایای بسیاری دارد که در این بخش تنها به برخی از آنها اشاره شد. در ادامه مطلب آموزش Visual Studio Code به برخی از معایب و کاستیهای این ویرایشگر کد اشاره شده است.
پس چه بهتر که برای کد نویسی از ادیتور VsCode استفاده کنید.در این دوره آموزش vscode، نحوه کار با این ادیتور از صفر تا نزدیک های صد به شما آموزش داده می شود. افزونهی Browser Preview برای بازکردن یک مرورگر واقعی درون ویرایشگر ویژوال استودیو کد و برای عیبیابی و بررسی تغییرات، به جای چک کردن آنها روی مرورگر مورد استفاده قرار میگیرد. در نتیجه از جابهجایی مداوم بین محیط ویرایشگر و مرورگر جلوگیری میکند. همانطور که میبینید، در بالا انواع زبانهای برنامه نویسی نمایش داده میشود. اگر زبان موردنظر خود را پیدا نکردید، در بالا جستجو کنید و آن را انتخاب کنید.
در سمت چپ صفحه، نوار فعالیت (Activity Bar) قرار دارد که در ادامه به معرفی و آموزش آن پرداخته شده است. پس از نصب Visual Studio Code، میتوان این ویرایشگر را با وارد کردن دستور «code -n» در خط فرمان، اجرا کرد. این دستور، VS Code را وادار میکند که یک نمونه (Instance) جدید را شروع کرده و نمایش دهد. در این قسمت از آموزش Visual Studio Code چگونگی نصب این ویرایشگر کد منبع در سیستم عامل macOS توضیح داده شده است. گاهی لازم است برای ویرایش یک فایل از کدهای فایل دیگری استفاده شود. VS Code امکان باز کردن چند ویرایشگر در کنار یکدیگر را فراهم میکند.
تنظیم Autofetch به توسعهدهندگان برای بررسی بهروزبودن مخزن محلی کمک میکند. در نتیجه دیگر برنامه نویسان مجبور نیستند عمل واکشی را به صورت دستی انجام دهند. در این محیط ویرایشگر از متن فارسی هم میتوان استفاده کرد و این میتواند یک خبر خوشحالکننده برای توسعهدهندگان فارسی زبان باشد. برنامهنویسانی که از محیط ویرایشگر استفاده میکنند معتقد هستند ویژوال استودیو کد، دارای امکانات فوق العادهای است که آنها در استفاده از یک ویرایشگر دیگر بی نیاز میکند.
بسیاری از پروژههای توسعه اپلیکیشن دارای نوعی پایگاه داده هستند. این قابلیت به توسعهدهنده کمک میکند تا بتواند ضوابط ساختار کد را به طور پیشفرض و با دردسر کمتری اجرا کند. اکنون قبل از شروع آموزش Visual Studio Code بهتر است ابتدا به این سوال پاسخ داده شود که «Visual Studio Code چیست». ویرایشگر کد در واقع یک ویرایشگر متن است که با داشتن برخی امکانات بیشتر، فرآیند کدنویسی را آسانتر میکند.
آموزش نصب و راه اندازی ویژوال استودیو کد
این کار به این دلیل انجام میشود که یک ویرایشگر متن ساده با همه زبانهای برنامهنویسی سازگاری دارد. دوره آموزشی VSCode به شما کمک میکند تا کار با ویرایشگر حرفهای را یاد بگیرید که در نهایت بتوانید از آن برای توسعه پروژههای خود استفاده کنید. برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است . اگر در فکر ورودی قدرتمند به حوزه برنامه نویسی و طراحی وب هستید آموزش html و css پایه کار است. تنظیم مربوط به افزودن خط خالی به انتهای فایل، در هر زمان که کار برنامه نویس با کدهای خود تمام میشود - همزمان با ذخیرهسازی مطلب - خط خالی را به انتهای فایل اضافه میکند. این ابزار به طور خاص در زمان کار کردن با فایلهای متنی مفید است که باید در دسترس سیستمهای یونیکسی قرار بگیرند.
اگر هنوز گزینه همگامسازی تنظیمات ویژوال استودیو کد را راهاندازی نکردهاید، باید آن را فعال کنید. استفاده از این گزینه به کاربران برای همگامسازی تنظیمات خود بر روی کامپیوترهای مختلف کمک میکند. از همگامسازی تنظیمات میتوان برای همگامسازی مواردی مانند فهرست زیر استفاده کرد. اگر شما هم می خواهید با یک ویرایشگر کد پر سرعت و کم حجم کار کنید، ویژوال استودیو کد بهترین گزینه میباشد.
آموزش ساخت فایل html در VSCode (سند خام html)
البته هر کس میتواند زبان مورد استفاده خود را در بخش تنظیمات، به این ویژگی، معرفی کند. برای تعریف زبانهای برنامه نویسی مختلف باید از کلمات کلیدی مرتبط با هر زبان استفاده کرد. به عنوان مثال میتوانیم به کلمات کلیدی مانند javascript و typescript و python و csharp و markdown و غیره اشاره کنیم.
- {
- VS Code افزونههای محبوب و توصیه شده را به صورت پیشفرض ارائه میدهد. |}{
- VS Code از خط فرمانی داخلی به نام Command Palette (طیف دستورات) پشتیبانی میکند که موقعیت آن در مبدأ پروژه در حال اجرا قرار میگیرد. |}{
- کد مربوط به تنظیم Insert Final Newline در فایل «Settings.json» به شکل زیر نمایش داده میشود. |}
- در ویژوال استودیو کد میتوانیم عرض سربرگهای پین شده را طوری تنظیم کنیم که کوچکتر دیده شوند.
- کد مربوط به تنظیم Default Language در فایل «Settings.json» به شکل زیر نمایش داده میشود.
- اگر بخواهیم با سرعت تمام تغییرات اعمال شده در بخش تنظیمات را ببینیم باید از فایل «Settings.json» استفاده کنیم.
اما اکنون این ویژگی به شکل درونی داخل VS Code قرار داده شده است. همان طور که اشاره کردیم، ویژوال استودیو کد یک کد ادیتور متن باز میباشد که با زبانهای برنامه نویسی جاوا، جاوا اسکریپت، تایپ اسکریت، HTML و CSS نوشته شده است. برای فعال کردن این تنظیم ابتدا وارد محیط گرافیکی تنظیمات شوید.
حتی اگر برنامهنویس نباشید، احتمالاً نام VS Code، مشهورترین ویرایشگر کد در جهان را شنیدهاید. این نرم افزار قدرتمند، از تمامی زبانهای برنامه نویسی رایج پشتیبانی میکند و نیازهای برنامه نویسان را به صورت کامل پوشش میدهد. ویژوال استودیو کد، قابلیتهای بسیار زیادی در برنامه نویسی به شما ارائه میدهد که متاسفانه در بسیاری از مواقع، افراد از آنها استفاده نمیکنند.
در ادامه آموزش Visual Studio Code به بررسی مزایا و معایب آن پرداخته شده است. تصویر زیر نشان میدهد که این نواحی چطور در Visual Studio Code نمایش داده میشوند. اگر از ترمینال یکپارچه شده با 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 تنظیم کنید.
برای اعمال این تنظیم، ابتدا به صفحه رابط کاربری تنظیمات رفته و سپس از گزینه «Editor» مقدار Render Whitespace را بر روی boundary تنظیم میکنیم. سلام دوستان امروز با یکی دیگر از آموزشهای رایگان درسمن، همراه ما هستید. قرار است در اینجا به آموزش کامل کار با ویژوال استودیو کد بپردازیم. قبل از اینکه کار کردن با آن را یاد بگیریم به طور کامل در مورد آن صحبت می کنیم.
ویژگی formatOnSave برای قالب بندی کدها، به قوانین تعریف شده توسط کاربر توجه میکند. این تنظیم VS Code به صورت خودکار، فضای خالی انتهای خطوط کد را در زمان ذخیرهسازی حذف میکند. در ادامه همین بخش از مطلب، روش پیکربندی تمام تنظیمات بالا را آموزش دادهایم.
کد مربوط به تنظیم Autofetch در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم «ظاهر کرسر ترمینال» در فایل «Settings.json» به شکل زیر نمایش داده میشود. در تنظیمات ویژوال استودیو کد حتی میتوانیم ظاهر کرسر ترمینال را هم پیکربندی کنیم. کد مربوط به تنظیم فونت ترمینال در فایل «Settings.json» به شکل زیر نمایش داده میشود.
بررسی ساختار و امکانات Vs Code
این ویرایشگر مجازی برای برطرف کردن خطوط متعارض به برنامه نویس کمک میکند. برای ذخیره کردن خودکار تغییرات بر روی فایل از کلیدهای Ctrl +S استفاده میکنیم. در نتیجه برای «ذخیره خودکار» (Auto Save) کارها میتوانید از تنظیمات ویژوال استودیو کد استفاده کنید. برای پیکربندی این تنظیمات میتوان ۲ حالت مختلف را در نظر گرفت. برای اعمال این تنظیم، ابتدا وارد فایل «Settings.json» برای تنظیمات شوید. Font Ligatures را به صورت دستی با مقدار true تنظیم کنید.
ویژوال استودیو کد و ویرایشگر های متن دیگر می توانند پسوند های فایل را تفسیر کرده و برجسته سازی سینتکسی مخصوص زبان را ارائه دهند. توجه داشته باشید که در برخی موارد، بعد از نصب یک افزونهی جدید، باید ویژوال استودیو کد را restart کنید تا افزونه فعال شود. به همین دلیل توصیه میشود که بعد از هر نصب، یک بار کد ادیتور خود را باز و بسته کنید.
این نوار در بالای ویرایشگر قرار میگیرد، همچنین به ازای هر سربرگ باز شده به صورت جداگانه نمایش داده میشود. در نوار Breadcrumbs نه تنها مسیر فایلها نمایش داده میشود، بلکه حتی مسیر کلاس و تابعی که در حال حاضر بر روی آن تمرکز کردهایم نیز نشان داده میشود. کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته میشود. مایکروسافت ویژوال استودیو کد را به صورت رایگان ارائه داده است که به راحتی می توانید آن را تهیه و استفاده کنید. چنانچه هرگونه انتقاد، پیشنهاد و یا سوالی در مورد دوره آموزش vs code دارید، میتوانید در ادامه همین صفحه از بخش دیدگاهها با ما درمیان بگذارید تا در کمترین زمان ممکن پاسخ داده شود.
افزونهی Path Intellisense
بعضی از تنظیمات مورد اشاره در فهرست بالا، در حالت پیشفرض هم به درستی کار میکنند. اما مسئله اینجاست که در زمان ارائه این تنظیمات، برای اولین بار، به صورت پیشفرض غیرفعال بودند. در نتیجه اگر توسعهدهندهای از «همگامسازی تنظیمات» (Settings Sync) استفاده کند، شاید بعضی از تنظیمات قدیمی هنوز هم در VS Code غیرفعال باشند. سلام دوست عزیز، لطفا سوال های تخصصی خودتون رو در انجمن برنامه نویسی درسمن مطرح کنید.
ترمینال متصل شده به VS Code، دارای بافری است که برای انجام عملیات «Scrollback» به کار برده میشود. Scrollback به معنای برگشتن به دادههای خروجی دستورات پیشین در ترمینال است. این بافر برای ذخیرهسازی دادههای خروجی به کار برده میشود.
برای درک بهتر، این قابلیت در تصویر متحرک زیر نشان داده شده است. یک پنجره تعاملی پس از توضیحات در همان صفحه وجود دارد که میتوان با استفاده از آن، ویژگی قابلیت ویرایش با چند نشانگر را تمرین و امتحان کرد. همانند سایر قابلیتهای ذکر شده، میتوان یک Command Palette را از نیز از طریق منوی View در نوار وظیفه VS Code غیرفعال یا فعال کرد. همچنین، میتوان از کلیدهای ترکیبی «Ctrl+Shift+P» استفاده کرد. Command Palette توابع و قابلیتها را به ترتیب حروف الفبا مرتبسازی میکند.
چرا باید آموزش VS Code را مشاهده کنیم؟
اغلب، هر ویرایشگر برای یک زبان برنامهنویسی خاص نوشته میشود. از آنجایی که بیشتر بخشهای این نرمافزار شبیه به موارد دیگر است با محیط چندان غریبی روبرو نیستید. در نتیجه تنها نیاز است تا با ویژگیهای منحصر به فرد این ویرایشگر آشنا شوید.
{آموزش نرم افزار ویژوال استودیو کد
|}زیرا یونیکس برای کار کردن با فایلهای متنی نیاز به خط خالی در انتهای فایل دارد. در تصویر زیر حالت تغییر داده شده موقعیت قرارگیری نوار کناری را مشاهده میکنید. فولدرهایی که فقط یک فولدر درون خود دارند، به صورت پیشفرض در درخت فایل، به شکل جمع شده قرار گرفته و نمایش داده نمیشوند.
برای مثال جاوا در ویژوال استودیو کد با تنظیماتی قابل کدنویسی است، اما در ویژوال استودیو قابل اجرا نمیباشد. این افراد میتوانند برای خود پروفایلهای کاربری تعریف کرده و هر کدام تنظیمات مورد نظر خود را بر روی VS Code پیکربندی کنند. با پیادهسازی صحیح این تنظیمات محیط کار، کیفیت و سرعت عملکرد توسعهدهندگان افزایش پیدا میکند. میدانیم که Git یکی از مهمترین و مفیدترین ابزارهای کمکی برای جامعه توسعهدهندگان و برنامه نویسان است. حتی بعضی دیگر از صنایع هم برای نگهداری مسیر روند تغییرات مستندات خود از گیت استفاده میکنند. طراحان ویژوال استودیو کد این ویژگی را در نظر گرفته و تنظیمات خوبی را برای کار با Git ارائه دادهاند.
البته پرداختن به تمام تنظیمات ویژوال استودیو کد هم میتواند طاقتفرسا بوده و زمانبر باشد. همچنین درک اینکه کدام یک از تنظیمات ارزش دستکاری دارند هم مشکل است. به عنوان برنامه نویس حرفهای، نیاز داریم که به طور کامل بر روی محیط و ابزار کار خود مسلط باشیم.
{۴- تغییر وضعیت نوار جانبی
|}Auto Find In Selection را پیدا کرده و مقدار آن را بر روی multiline تنظیم کنید. نرم افزار ویژوال استودیو کد بهجای تبدیل کردن ساختار فایل به رمزگذاری پیشفرض خود، به شکل خودکار نوع رمزنگاری فایل را حدس میزند. در نتیجه میتواند فایل مورد نظر را به شکل صحیحی نمایش دهد. به همین ترتیب در زمان ذخیرهسازی فایلهم از همان قائده رمزنگاری استفاده میکند. نوع پیشفرض رمزنگاری فایلهای VS Code در تنظیمات files.encoding تعریف شده است.
{چگونه با ویژوال استودیو کد (Visual Studio Code) یک وب سایت طراحی کنیم؟
|}این سلسله مراتب با کمک فعال کردن تنظیم اسکرول ثابت درخت فایل ایجاد شده است. در چنین شرایطی میتوانیم بهجای استفاده از نوار اسکرول افقی برای حرکت بین سربرگهای باز شده، همه را دستهبندی کرده و در ردیفهای مجزایی قرار دهیم. علاوه بر این، میتوانیم تمام سربرگهای باز شده را در کنار هم مشاهده کنیم. در صورت نیاز، با این روش، میتوان چندین ردیف مجزا از سربرگهای مختلف ایجاد کرد. همینطور که میبینید بعد از اعمال این تنظیم، رنگ فونت سربرگ فایلهای ویرایش شده تغییر کرده است. در تصویر زیر، شکلهای مختلف کرسر را همراه با کد مربوط به هر کدام نمایش دادهایم.
{فونت ویرایشگر
|}به صورت پیشفرض این خطوط فقط زمانی نشان داده میشوند که ماوس را بر روی درخت فایل نگهدارید. اما با کمک این تنظیم، خطوط راهنمای دندانهگذاری درختی به صورت دائم نمایش داده میشوند. تا اینجای کار مقدمهای درباره تنظیمات، روش اعمال تغییرات و مشاهده نتایج حاصل از تغییرات گفتیم. در بخشهای بعدی مطلب، انواع تنظیمات مفید و کاربردی ویژوال استودیو کد را معرفی کرده و یک به یک توضیح دادهایم. در وهله اول، معماری سبک و سرعت بالای این نرم افزار، شامل توانایی سریع و پردازش فایلهای بزرگ را دارد. به علاوه، VSCode قابلیت توسعه با افزونهها را دارد و با پشتیبانی از زبانهای مختلف و فریمورکها، به برنامهنویسان امکان انجام کارهای خاص و متعددی را میدهد.
با استفاده از تنظیمات بخش قبل، موفق شدیم محیط کار خود را مناسب با سلیقه و به دلخواه خود طراحی کنیم. اکنون زمان اعمال تنظیمات مناسب بر روی فایلهایی است که با آنها کار میکنیم. استفاده از این تنظیمات هم باعث افزایش سرعت کار شده و هم نظم بیشتری به اجرای پروژهها میدهد. کد مربوط به این تنظیم در فایل «Settings.json» باید به شکل زیر نوشته شود. با کمک این تنظیم میتوانیم فونت مورد استفاده در ویرایشگر کد را تغییر دهیم. شاید حتی لازم شود که فونت مورد نظر خود را به صورت جداگانه بر روی کامپیوتر نصب کنیم.
اکنون در ادامه آموزش Visual Studio Code نحوه ساخت اولین سایت با HTML در VS Code آموزش داده شده است تا فرآیند یادگیری به صورت عملی انجام شود. در این بخش از مطلب آموزش Visual Studio Code راجعبه زبانه یا سربرگ جستجو که با آیکن ذرهبین در نوار سمت چپ (نوار فعالیت) رابط کاربری VS Code مشخص میشود، توضیحاتی ارائه شده است. بخش Search برای جستجوی یک کلیدواژه خاص در همه فایلهایی که در پنجره ویرایشگر باز هستند استفاده میشود. در صورت فراموشی محل هر یک از بخشهای رابط کاربری، با استفاده از گزینه «Interface Overview» در صفحه خوشآمدگویی، راهنمایی از محل بخشهای اصلی رابط کاربری VS Code روی صفحه ظاهر میشود. همواره میتوان از طریق Command Pallete و با جستجو در آن به صفحه خوشآمدگویی دسترسی داشت.
برای مثال هنگام اجرای یک کد HTML با استفاده از این بخش میتوانید مرورگر پیش فرض را گوگل کروم انتخاب کنید. در این بخش میتوانید در اسامی فایلهای پروژه جستجو کنید تا بتوانید اصلاحات موردنظر را روی آنها انجام دهید. یکی از نکات جالب این است که هنگامی که وارد وب سایت میشوید، سایت به طور خودکار تشخیص میدهد که با چه سیستم عاملی در حال کار هستید. سلام وقتتون بخیر آیا مشکلتون در این مورد حل شد؟ منم همین مشکل رو دارم اگه برای شما حل شده ممنون میشم منم راهنمایی کنید. اکنون، زمان آن رسیده تا با استفاده از VS Code و یک مرورگر، اولین سند HTML برای ساخت یک وبسایت ایجاد شود.
کد مربوط به تنظیم Suggest Smart Commit در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم «دستور Commit هوشمند» در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Auto Stash در فایل «Settings.json» به شکل زیر نمایش داده میشود.
آموزش html وب سایت وی لرن