مدرس: خوش اومدید دوباره
ما در ابتدای دوره شروع کردیم به پیکربندی ویرایشگر VS Code
اما حالا در این مرحله آماده‌ایم که
سه افزونه‌ی اضافی نصب کنیم
که کدنویسی HTML و CSS رو
کمی ساده‌تر برامون می‌کنن
پس بریم سراغ پنل افزونه‌ها
اولین افزونه‌ای که می‌خوام نصب کنم اسمش Image Preview هست
این همونه و من قبلاً نصبش کردم
فقط لازمه روی Enable بزنم
خب این اولین افزونه بود
کاری که این انجام می‌ده اینه که توی فایل HTML
یک پیش‌نمایش کوچک از تصویر رو
اینجا در کناره (Gutter) نشون می‌ده
مثلاً اینجا یکیش هست و این یکی تصویر هم
اینجا در جایی که تعریف شده دیده می‌شه
یعنی همون جایی که توی کد اضافه‌اش کردیم
این بعضی وقتا می‌تونه واقعاً مفید باشه
برای همین خواستم حتماً اینو نشونتون بدم
افزونه بعدی اسمش Color Highlighter هست
اینه همینجا
بازم از قبل نصبش کردم و فقط فعالش می‌کنم
این یکی رو فعلاً نمی‌تونم نشونتون بدم
چون فقط در CSS کاربرد داره
اما مطمئن باشید این افزونه خیلی خیلی کمک می‌کنه
برای دیدن رنگ‌ها در CSS
بعدی اسمش Auto Rename Tag هست
این یکیه و همونطور که می‌بینید خیلی محبوبه
پس باید دانلود و فعالش کنید
کاری که می‌کنه اینه:
وقتی اسم یک المنت رو تغییر می‌دیم
مثلاً بخوایم اینو به div تبدیل کنیم
می‌بینید که تگ بسته هم به‌طور خودکار تغییر می‌کنه
یعنی همون تگ بسته شونده درسته؟
این دوباره خیلی به درد می‌خوره
و نوشتن HTML رو ساده‌تر می‌کنه
چون باور کنید ما خیلی وقت‌ها مجبوریم
اسم المنت‌ها رو عوض کنیم
خب
حالا یک کار دیگه‌ای که می‌تونیم انجام بدیم
اینه که بریم به تنظیمات
و اون گزینه‌ای که اول این بخش
غیرفعال کرده بودیم رو دوباره فعال کنیم
اسمش Auto Close Tag هست
بذارید اینو دوباره فعال کنیم
چون فکر می‌کنم در این مرحله
دیگه فراموش نمی‌کنید
که تگ بسته رو بذارید
پس می‌تونیم اجازه بدیم VS Code خودش این کارو انجام بده
مثلاً
اگر بخوایم یک پاراگراف بنویسیم
می‌بینید که HTML خودش به‌طور خودکار
تگ رو بست
خب؟
اما اینو لازم نداریم و حالا می‌ریم سراغ نصب
مهم‌ترین و کاربردی‌ترین افزونه‌ی همه
که اسمش Live Server هست
اینه همینجا
Live Server با تقریباً ۱۲ میلیون دانلود
و دلیل خوبی هم برای محبوبیتش هست
پس من روی Enable می‌زنم
و حالا وقتی برگردم به HTML
و این پنل کناری رو ببندم
اینجا پایین یک دکمه‌ی Go Live باید ببینیم
درسته؟
پس امیدوارم بعد از نصب این افزونه
شما هم این دکمه رو پایین در نوار وضعیت ببینید
وقتی روش کلیک کنم
شروع می‌شه و پیامی میاد که سرور روی این پورت راه‌اندازی شد
بیایید این پنجره رو ببندیم
می‌بینید یک تب جدید باز شد
که صفحه‌ی ما رو نشون می‌ده
درسته؟
ظاهرش همون قبلیه
اما یک تفاوت بزرگ وجود داره
خب
فرض کنید بخوایم اینجا رو تغییر بدیم
و اسمشو بذاریم Jonas Code
حالا دقیق ببینید وقتی فایل رو ذخیره کنم چه اتفاقی می‌افته
الان Command + S می‌زنم یا توی ویندوز Control + S
می‌بینید چی شد؟
صفحه به‌طور خودکار رفرش شد
بدون اینکه کاری بکنیم
یعنی فقط کد رو ذخیره کردیم
و صفحه به‌طور خودکار آپدیت شد
هر تغییری که اینجا انجام بدیم
به‌طور مستقیم وارد صفحه می‌شه
و بلافاصله نتیجه تغییرات رو می‌بینیم
پس برش می‌گردونم به حالت قبل
دوباره ذخیره می‌کنم و می‌بینید فوراً مثل قبل شد
پس الان Command+S یا Control+S رو می‌زنم برای ذخیره
و دیدید چی شد؟
صفحه به طور خودکار ریلود شد
بدون اینکه ما کاری کنیم
یعنی تنها کاری که کردیم ذخیره‌ی کد بود
و بعدش این صفحه اینجا
به صورت خودکار آپدیت شد
پس همه تغییراتی که اینجا انجام دادیم
مستقیم توی همین صفحه تزریق شدن
و ما همون لحظه نتیجه رو می‌بینیم
درجا تغییرات اعمال می‌شن
خب حالا برش می‌گردونم به حالت قبلی
و دوباره Command یا Control+S می‌زنم تا ذخیره شه
و می‌بینید فوراً برگشت به چیزی که قبلاً بود
حالا اگه بخوایم این اتصال رو قطع کنیم
وقتی کار توسعه تموم شد
کافیه این پایین روی این آیکون کلیک کنیم
جایی که نوشته Port: 5500
راستی
این شماره پورت همون چیزیه که اینجا داریم
خب؟
برای کنجکاوی هم بدونید
این یعنی سرور روی localhost اجرا شده
یعنی انگار روی کامپیوتر خودتون
یک وب‌سرور دارید که همین کد روی اون
با این شماره پورت در حال اجراست
پورت هم در واقع مثل یک آدرس فرعی
برای همون سرور localhost حساب می‌شه
ولی اینا مهم نیست
مهم اینه که این الان داره کار می‌کنه
و واقعاً برای روند توسعه مفیده
حالا اگه به هر دلیلی نتونستید
روی سیستم‌تون اینو اجرا کنید نگران نباشید
می‌تونید همچنان به روش قدیمی ادامه بدید
یعنی همون روشی که تا الان پیش رفتیم
تا همین مرحله
کافیه فایل رو از سیستم‌تون باز کنید
و هر بار دستی رفرش کنید
درسته؟
اما دیگه نیازی به اون تب نداریم
چون الان یک اتصال زنده داریم
یعنی Live Server همین صفحه رو هر بار
با تغییرات جدید به ما نشون می‌ده
خیلی خب
و با این
حالا آماده‌ایم که بریم سراغ دو تا
چالش کدنویسی آخر در بخش مبانی HTML
پس بریم شروع کنیم