مدرس: حالا، قبل از اینکه بتونیم شروع کنیم به نوشتن
حتی یک خط کد،
ابتدا باید یک ابزار خاص نصب کنیم
به نام code editor.
و code editor در واقع یک نرم‌افزار ویژه‌ست
که بهمون کمک می‌کنه کدهای برنامه‌نویسی،
مثل HTML و CSS، رو به راحتی بنویسیم.
و از اونجایی که این دوره احتمالاً
اولین تجربه‌تون با کدنویسیه،
در این ویدیو راهنمایی‌تون می‌کنم تا
بهترین code editor دنیا رو نصب کنید.
و بعدش هم نشونتون می‌دم
چطور کمی تنظیمش کنید
با تنظیمات خاص، تم‌های رنگی و اکستنشن‌ها.
و code editorی که در این دوره استفاده می‌کنیم
Visual Studio Code از مایکروسافته.
و همونطور که قبلاً گفتم،
این، به نظر من و خیلی از توسعه‌دهنده‌های دیگه،
بهترین code editor
برای توسعه وب در دنیاست.
در واقع، هر توسعه‌دهنده‌ای که می‌شناسم،
الان از این code editor استفاده می‌کنه.
پس شما هم با انتخاب VS Code اشتباه نمی‌کنید.
برای دانلودش، برید به code.visualstudio.com،
یا برای راحتی بیشتر، فقط VS Code رو گوگل کنید،
و باید اولین نتیجه باشه.
و البته، VS Code رایگان در دسترسه
و برای همه پلتفرم‌ها موجوده.
مثل macOS، Windows و Linux.
پس لطفاً همین الان برید
و installer رو برای سیستم خودتون دانلود کنید.
بعدش مثل هر برنامه دیگه‌ای نصبش کنید
روی کامپیوترتون.
و وقتی تموم شد،
برگردید به این ویدیو
تا ادیتورتون رو کمی تنظیم کنیم.
خب.
امیدوارم تونسته باشید Visual Studio Code
یا همون VS Code رو روی کامپیوترتون نصب کنید.
و وقتی code editor رو باز می‌کنید،
باید چیزی شبیه این باشه.
و همونطور که قبلاً گفتم، حالا می‌خوایم
VS Code رو کمی تنظیم کنیم تا راحت‌تر
بتونید دوره رو دنبال کنید.
و با نصب یک اکستنشن شروع می‌کنیم.
و اکستنشن برای VS Code
در واقع یک قطعه کوچیک از قابلیت‌هاست
که می‌تونیم دانلود کنیم و ادیتور رو
بهتر می‌کنه،
پس می‌تونیم ادیتور رو طبق نیازهامون شخصی‌سازی کنیم.
پس می‌تونید فکر کنید
مثل اکستنشن‌های گوگل کروم باشه، مثلاً.
همون مفهومه.
و اونی که الان می‌خوایم نصب کنیم
Prettier نام داره.
پس جستجو کنید برای Prettier،
و احتمالاً اولین نتیجه این باشه،
چون Prettier یک اکستنشن خیلی محبوبِ.
می‌بینید، بیش از ۱۲ میلیون دانلود داره الان.
پس برید جلو و روی Install کلیک کنید،
و بعد فعالش کنید.
و احتمالاً باید پنجره VS Code رو
ریلود کنید.
حالا این اکستنشن چیکار می‌کنه
اینه که کدتون رو به طور خودکار فرمت می‌کنه
هر وقت ذخیره‌ش می‌کنید.
و این خیلی مهمه
تا کدتون همیشه دقیقاً مثل کدی که من
در ویدیو می‌نویسم به نظر برسه،
چون اینطوری خیلی راحت‌تر
می‌تونید خطاها یا اشتباهات رو
در کد خودتون پیدا کنید.
پس راحت‌تر می‌تونید اشتباهات رو پیدا و درست کنید
در حین دنبال کردن ویدیوها.
خب، و برای الان، این تنها اکستنشنیه
که می‌خوایم نصب کنیم.
بعداً در بخش بعدی
چندتای دیگه نصب می‌کنیم.
حالا بیاید پایین به آیکون Settings،
بعد Settings رو انتخاب کنید
تا چندتا تنظیم رو تغییر بدیم.
و بیاید با دوتا تنظیم شروع کنیم
که مربوط به اکستنشن Prettierه
که تازه نصب کردیم.
پس بیاید به نوار جستجو.
جستجوی نام تنظیم
راحت‌ترین راه برای پیدا کردنشونه.
پس اینجا default formatter رو تایپ کنید.
و اینجا باید اون رو روی Prettier تنظیم کنیم.
من البته قبلاً تنظیم کردم،
اما شما باید از این لیست
Prettier رو پیدا کنید.
اینجاست.
پس Prettier code formatter رو انتخاب کنید،
و باید esbenp.prettier-vscode باشه، خب؟
و حالا VS Code می‌دونه
که باید از اکستنشن Prettier
که تازه نصب کردیم برای فرمت کد استفاده کنه.
حالا کی باید کد رو فرمت کنه؟
خب، باید یک تنظیم دیگه برای این بذاریم
که format
on save هست.
این یکی اینجا.
و اینجا باید این چک‌باکس رو تیک بزنید
تا Prettier فایلتون رو به طور خودکار فرمت کنه
هر وقت که ذخیره‌ش می‌کنید، خب؟
یکی دیگه که خیلی مهمه تنظیم auto-save هست.
پس auto save رو روی on focus change تنظیم کنید.
و این کارش اینه که فایل‌هاتون رو به طور خودکار ذخیره کنه
وقتی به تب دیگه‌ای می‌رید
یا کاملاً از پنجره خارج می‌شید.
و این خیلی مهمه
تا هیچوقت تغییراتتون از دست نره
و مجبور نباشید دستی فایل‌ها رو ذخیره کنید
هر بار.
پس این رو روی on focus change تنظیم کنید.
و یکی دیگه که من دوست دارم استفاده کنم،
و مطمئن نیستم که پیش‌فرض باشه یا نه،
تنظیم tab-size روی دو هست.
و در این مورد، این فقط برای اینه که کدتون
دقیقاً مثل کد من به نظر برسه.
tab-size در واقع فقط فاصله‌گذاری
کد هست.
و بعداً وقتی شروع به نوشتن HTML می‌کنیم
می‌فهمید چی منظوره.
خب.
و این چهار تا تنظیمی هستن که باید تنظیم کنیم.
پس فکر کنم با تنظیمات تموم شد.
و حالا در نهایت، بیاید در مورد این رنگ‌ها حرف بزنیم.
در واقع می‌تونیم VS Code رو با یک color theme شخصی‌سازی کنیم
که رنگ‌های
خود code editor و همچنین کد رو تغییر می‌ده.
پس بخش‌های مختلف کد رو
با رنگ‌های متفاوت هایلایت می‌کنه.
حالا این فقط سلیقه شخصیه.
پس می‌تونید از تمی استفاده کنید
که به طور پیش‌فرض با VS Code می‌آد،
اما من یک تم خاص نصب کردم
که فکر می‌کنم خوندن کد رو خیلی راحت می‌کنه،
و برای شما هم راحت‌تر بشه دوره رو دنبال کنید.
پس color theme در واقع یک اکستنشن دیگه‌ست
که باید نصب کنیم،
و این One Monokai نام داره.
این اولین اینجا.
و پایین می‌بینید،
به کد رنگ‌هایی مثل این می‌ده،
و خود ادیتور VS Code هم
این رنگ آبی رو می‌گیره
که الان در این پنجره می‌بینید.
پس اگر می‌خواید این color theme رو استفاده کنید
تا ادیتورتون دقیقاً مثل مال من بشه،
برید جلو، و دوباره این اکستنشن رو دانلود کنید
و بعد color theme رو با این گزینه تنظیم کنید.
و البته می‌تونید
با تم‌های دیگه هم آزمایش کنید،
پایین، دوباره در آیکون Settings.
و بعد در color theme،
یکی از این تم‌های روشن
یا یکی از تم‌های تاریک رو انتخاب کنید.
پس VS Code از قبل
با کلی تم پیش‌نصب‌شده می‌آد.
و می‌تونید اونا رو امتحان کنید،
یا اگر سلیقه دیگه‌ای دارید،
هر تم دیگه‌ای که دوست دارید نصب کنید.
در نهایت، فقط یک چیز کوچیک دیگه مونده
که File icon theme هست.
این واقعاً مهم نیست،
اما من مال خودم رو روی این گزینه، Seti، تنظیم کردم.
پس دوباره، اگر می‌خواید ادیتورتون
دقیقاً مثل مال من بشه،
می‌تونید این گزینه رو انتخاب کنید.
خب.
و با این، تنظیم VS Code رو برای الان تموم کردیم.
پس حالا آماده‌اید
تا اولین خط کدتون رو بنویسید.
و این دقیقاً کاریه که در ویدیو بعدی انجام می‌دیم.
به زودی می‌بینمتون.