🔥 دوستان با پلاگین draw.io برای VSCode شما میتونید یک اپ طراحی SVG رو مستقیم بیارید تو ادیتورتون :)
راستی می تونید تو vscode خودتون ادیت کنید و بلافاصله هم استفاده کنید 😎

لینک پلاگین :
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

#vscode #plugin
☕️ @CodeExplore

فکر کنم کمتر کسی باشه با افزونه Live Preview آشنا باشه 🤔 :

افزونه Live Preview تو VSCode یک ابزار قدرتمندی هست که به شما این امکان رو میده تا در حالت زنده نتایج تغییرات خودتون را تو صفحات وب مشاهده کنید🤓 با استفاده از این افزونه، شما می تونید به سرعت و به راحتی تغییرات خودتون رو در کدهای HTML، CSS و JavaScript ببینید و بررسی کنید 🤙

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••

برای استفاده از افزونه Live Preview، مراحل زیر رو باید انجام بدید 👇:

1) نصب و فعالسازی : برای نصب افزونه، اول به قسمت Extensions تو VSCode برید و "Live Preview" رو سرچ کنید. بعدش اون رو نصب و فعال کنید🙈

2) باز کردن فایل HTML : فایل HTML خودتون رو تو VSCode باز کنید 😌

3) شروع پیش نمایش : برای شروع پیش نمایش، روی دکمه "Go Live" در پایین سمت چپ صفحه کلیک کنید. یک پنجره جدید با آدرس URL لوکال شما باز میشه 😉

4) مشاهده تغییرات: هرگاه تغییرات خودتون رو تو فایل HTML اعمال کردید، صفحه پیش نمایش به طور خودکار بروزرسانی میشه و بعدش تعغیرات جدید رو نشون میده ✌️

5) توقف پخش : برای توقف پخش، دکمه "Stop" در پانل Live Server در VSCode کلیک کنید حتما 🤟

دوستان با استفاده از این افزونه دیگه لازم نیست داخل مرورگر خروجی رو ببینیم و می تونیم تو همون VSCode ببینیم 😎

اگه روش بالا جوابگو نبود براتون از روش زیر استفاده کنید حتما 👇 :

باید رو HTML التون کلیک راست کنید و گزینه show preview رو بزنید ✌️

👈 برای دانلود افزونه Live Preview کلیک کنید

#extension #live_preview #vscode
☕️ @CodeExplore

🌟 جذاب‌ترین تگ ها در html

➕ تگ datalist
تگ <datalist> یک لیست از گزینه های از قبل تعریف شده برای یک عنصر <input> مشخص می کنه

➕ تگ progress
تگ progress یک نوار پیشرفت را برای نشان دادن میزان تکمیل یک کار یا فرآیند ایجاد می‌کنه. این تگ یک عنصر بلوک هست و میتونه در هر مکانی در سند HTML قرار بگیره

➕ تگ mark
تگ mark یک متن علامت‌گذاری‌ شده را مشخص می‌کنه. این تگ برای برجسته‌ سازی یا هایلایت کردن متنی استفاده میشه که برای کاربر مهم یا مرتبط هست.

➕ تگ dialog
تگ dialog یک باکس گفتگو یا دیالوگ را تعریف می‌کنه ، این تگ برای نمایش پیام‌ها، اعلان‌ها، فرم‌ها و سایر محتوای تعاملی به کاربران استفاده میشه

➕ تگ map
تگ map هم که خیلی ها باهاش آشنا هستیم ، یک نقشه تصویری یا image-map را تعریف می‌کنه. نقشه تصویری تصویری است که نواحی مختلف آن قابل کلیک کردن هست. تگ map معمولا با تگ img ترکیب شده و با استفاده از ویژگی‌های name و usemap با تگ img مرتبط میشه

#tag #html #vscode #programming
☕️ @CodeExplore

🌐 سایت vscodethemes، انتخاب انواع تم

🔹️ خب طبیعتا برای یک برنامه نویس که ساعت ها قراره پشت کامپیوتر بشینه و کد بزنه،مهمه که به چه نور و رنگ و لعابی نگاه میکنه! و افزونه های زیادی هستن برای تم ولی دارای رنگ های گسترده ای نیستن...
🔹️ حالا میتونین توی این سایت انواع تم ها رو حتی با سرچ پیدا کنین! و نیازی نیست برای نصبشون نگران باشید،روی تم دلخواه کلیک میکنید و بعد دکمه VS Code رو میزنید! و بعد از اونجا روی install کلیک میکنید و تنظیمات دلخواهتون رو انجام میدید.

لینک سایت

#themes #VSCode
☕️ @CodeExplore

✍️دستور lorem در VSCode

🔹️تا حالا شده نیاز داشته باشید که یک باکس یا المنت رو پر از متن طولانی کنید؟ خب دستور lorem دوای درد شماست! خیلی راحت با استفاده از این دستور میتونید هر چند کلمه ای که میخواید رو در یک ثانیه بنویسید. اما قبل از شروع، توجه داشته باشید که حتما باید با VSCode این کار رو انجام بدید!

🔸️برای این کار کافیه که یک فایل(به تجربه فهمیدم html اکثر مواقع جواب میده) درست بکنید، بعد داخل فایلتون بنویسید:

loremx

اما به جای x، یک عدد دلخواه بنویسید، عددی که وارد میکنید نشان دهنده تعداد کلمات هست. بعد از اون enter رو فشار بدید و تمام؛ متن شما آماده است. نگران معنی و محتوا هم نباشید چون کلمات به صورت رندوم هستن و معنایی نمیسازند.

#lorem #vscode
☕️ @CodeExplore

چند تا اکستنشن با حال و کاربردی VS Code

🔍 ‏StackFinder
این ابزار سریع میگرده و جواب‌ های مربوط به مشکلات کدتون رو از Stack Overflow پیدا میکنه (هرچند با اومدن AI کمتر استفاده میشه)

👀 ‏Emoji Sense
میتونید باهاش توی کدتون ایموجی استفاده کنید.

🔰 ‏Bracket Pair Colorizer
براکت‌های باز و بسته‌ی هر بلاک رو با رنگ‌های متفاوت نشون میده تا راحت‌تر متوجه بشید کدوم به کدومه؛ خصوصا توی کدهای تو در تو خیلی کمک میکنه.

🎨 ‏Color Highlight
هر جا کد رنگی مثل #ff5733 یا RGB توی کدت بنویسید، رنگش رو میتونین همونجا ببینید.

📁 ‏Path Intellisense
وقتی مسیر فایل یا عکس مینویسید، بهتون مسیر رو پیشنهاد میده.

#extension #vscode
☕️Telegram | Website | Discord

اکستنشن Error Face and Explain برای VS Code به ارورایی که داری ری‌ اکشن نشون میده🙄
هر وقت کدت ارور یا warning بده، بهت یه میم نشون میده که با شدت مشکل هماهنگه هرچی بیشتر میمه داغون تر🤔 از طرفی هم بهت توضیح میده که مشکل از Syntax هست، ماژول درست import نشده یا ...

🔗 https://marketplace.visualstudio.com/items?itemName=naveensh7.error-face

#vscode #extension
☕️Telegram | Website | Discord