تو اینجا قصد دارم تمام چیزایی که برای شروع و کد زدن در vs code به اونا نیاز دارینو بنویسم، یعنی نمی خوام مزخرفات به درد نخوری که صد سال یبار شاید به دردتون بخوره و خودتون با یه سرچ پیدا می کنید رو بنویسم!

1- open editors: تو این قسمت نشون چه تب های ویرایشگری برای شما باز هستش

۲- این قسمت دایرکتوری روت پروژه ای که دارید روش کار می کنید رو نمایش می ده

۳- این قسمت شبیه "کپی" هستش ولی در حقیقت داره می گه تو قسمت کار با فایل هاتون قرار دارید (یا همون explorer)

۴- این قسمت برای سرچ کردن در کل پروژه استفاده می شود، همچینین می توانید فایل هایی را از سرچ کردن مستثنی کنید به این شکل :

همچنین در این قسمت می توانید replace هم بکنید.

۵- تو این قسمت می تونید به github یا gitlab یا ... پروژتون وصل بشید ، برای این کار باید روی نشان بعلاوه کلیک کنید و مراحلشو ادامه بدید ولی من پایه تر هستم که ‍‍‍`+ctrl رو بزنم و بعدش توی ترمینال خیلی راحت clone کنم و vs-code هم خودش خیلی راحت می فهمه

۶- قسمت دیباگ با آرم مشهور گریس موری!

۷- قسمت extensions

در اینجا چی مهمه؟

خب ، اولی و دومی و سومی و چهارمی رو که همه بلدین ، open workspace مهم نیست (ولی محض اطلاع بگم که برای پروژه های خیلی بزرگ با چند root به درد می خوره و در پاراگراف پایین توضیح بیشتر می دم) ، بعدیش open recent هستش که اونم بلدید ، دو تای بعدی بازم مربوط به workspace ها میشن که بیخی! سه تای بعدی هم مربوط به save کردن هستش که خیلی سادس، می رسیم به قسمت auto save که بهتره همیشه روش کلیک کنید تا تیکش روشن باشه مگر اینکه مشکل performance دارین، حالا نوبت قسمت preferences هستش که خیلی مهمه و زیاد باهاش کار داریم (معمولا قسمتی با نام settings یا preferences در زیرمنوی file همیشه قرار داده می شوند) ، مواردی که در زیرمنوی preferences هستند همگی واضح هستند فقط باید یادتون باشه که بعدا دنبالشون نگردید ، همچنین باقی موارد منوی فایل هم یا واضحند یا مهم نی **

رسیدیم به workspace، ماهیتش یه فایله فایلی که یه سری بچه کد توشه! (یا کد های کانفیگ پروژه) ، مثلا من خودم خیلی وقتا وسط پروژه می بینم یه چیزی اصلا کار نمیکنه! یا یه feature جدید می خوام به پروژه اضافه کنم که می خوام یه جای دیگه توسعش بدم ، در این مواقع معمولا یه فولدر دیگه می سازیم که میشه روت برای کار اضافی ای که می خواهیم انجام بدیم، خب این دایرکتوری جدیدو کجا اضافه می کنید؟ یه پروژه ی جدید و یه vscode جدید باز می کنید؟ با workspace ها پاسخ نه هستش! فقط کافیه در همون پروژه ی جدید بروید روی منوی فایل و add folder to workspace رو انتخاب کنید ، حالا شما یک workspace ساختید ! فقط باید save ِش بکنید که داخل همون منوی file گزینه ی سیو کردن هم وجود داره ، یک اسم براش انتخاب کنید و تمام.

۱و ۲و ۳و ۴و ۵و ۶و ۷و ۸و ۹ که کاملا تابلو هستند ، ۱۰و ۱۱ همون کامنت کردنِ ی خطه که همیشه تو برنامه نویسی انجام می دیم، می رسیم به ۱۲ و ۱۳ که مربوط به Emmet هستش و خیلی مهمه، اولا اگه Emmet رو نمیشناسید که برید بشناسید ! ولی اگه می شناسید شماره ی ۱۲ شلیک کردنِ(!) همون عملکرد Emmet رو انجام می ده که معمولا با Tab انجام می دید و ۱۳ هم مربوط به موقعیه که بخواهید یه کار مشخصی رو تو Emmet شلیک کنید!

نکته ی مهم در مورد Emmet اینه که چجوری Emmet رو تنظیم کنیم که مثلا روی فایل های php هم کار کنه **

۱ که مشخصه، ۲ به صورت هوشمندانه و باحال تا آخر چیزی که رو که Select کرده بودید ، کلشو می گیره و ۳ هم برعکسشه ، بقیشونم کاملا از اسمشون معلومه کارشون چیه

اولا که بخش های مختلف در vs code رو بهتره اسامیشونو بدونید:

۱- Activity Bar

۲- Side Bar

۳- Editor Area

۴- panel

۵- Status Bar

۶- Menu Bar

گزینه های اول و دوم که مشخص هستند و برای شما ترمینالک رو باز می کنند !

گزینه ی سوم Appearance هستش که بسیار زیاد عالیست! در اونجا نکات مهم گزینه ی F11 (فول اسکرین) هستش اما از اون مهم تر خاصیت بسیار مهمی که vs-code داره هستش که اسمش هست Zen Mode :

برای رفتن به حالت Zen از طریق کیبرد اول ctrl+k رو بزنید و بعدشم به سرعت z رو بزنید ، واسه بیرون اومدن ازش هم دوبار سریع Esc رو بزنید.

حالت بعدی یعنی Centered Layout یجورایی همون zen mode در داخل محیط برنامه هست و مابقی گزینه ها هم مشخص هستند.

گزینه ی بعدی Editor Layout هستش که اون هم تمام حالاتش مشخص هست ، قسمت های بعدی منوی view هم مشخص چی هستند.

• گزینه ی اول و دوم بین آخرین tab هایی که ادیت کردید رفت و آمد می کنند !

• گزینه ی سوم موس رو میبره جای قبلیش

• گزینه ی switch editor هم به عبارت دیگری کار همون گزینه های اول و دوم رو انجام میده

• گزینه ی switch group مربوط به زمانی هستش که شما چند تا layout دارید ، مثلا اگر که دو تا layout به صورت ستونی در کنار هم دارید اولی از سمت چپ می شه group1 و دومی هم میشه group2

• go to file که مشخصه

• go to symbol in workspace یعنی در کل workspace بگرده و به یک تابع ، کلاس یا ... بره

• go to symbol in file مثل بالاییه ولی با این تفاوت که فقط توی یک فایل رو می گرده نه در کل workspace

• در مورد موارد بعدی یعنی **

• go to line/column که مشخصه چی کار می کنه

• go to bracket برای موقعی هستش که که مثلا داخل یک تابع هستید و می خواهید بروید با اکولاد آخری

• next problem و previous problem هم برای مرور کردن موارد داخل قسمت problems در panel هستش

• next change و previous change **

**

۱- باید برید به قسمت extension ها، ESLint رو سرچ کنید (لوگوی نارنجی رنگی داره) و نصبش کنید.

۲- تریمنال رو باز کنید و بزنید:

۳- حالا در داخل روتِ پروژتون باید فایل eslint رو ایجاد کنید ، برای این کار در داخل ترمینال بزنید : (پاسخ های پیشنهادی سوالاتی که ازتون میپرسه رو واستون تو ی عکس گذاشتم ، البته می دونم که به این موضوع توجه دارید که پروژه با پروژه فرق داره!)

۴- حالا باید فایل eslint رو در TreeView پروژتون ببینید ، از اینجا به بعد eslint زیر همه ی خطوطی که مشکل داره رو خط قرمز می کشه (اگه نکشید تو قسمت output که با `+ctrl بیرون میاد حتما چک کنید احتمالا نوشته eslint اجازه نداره که یه بار vsCode رو ببندید و باز کنید درست میشه) ، اون قسمت هایی که زیرشون خط قرمز کشیده شده رو اگر با mouse روشون بکشید و در انتها mouse رو دیگه تکون ندید یه box باز می شه که در مورد error یا warning موجود توضیح داده ، در انتهاش عبارتی رو در داخل پرانتز براتون نوشته که اون عبارت همون rule ای هستش که از اون rule تخطی کردید، نکته اینه که اگر اون قانون به نظرتون چرند باید کپیش کنید و برید تو خود فایل eslint برابر با صفر قرارش بدید ، اینجوری:

لوگوش یه ترمینال آبی هستش ، کاری که می کنید اینه که نصبش می کنید بعدش من تریجیح می دم برم به keyboard shortcuts و wrap down prefix console log رو به ctrl+L تغییر بدم حالا هروقت روی هر متغیری باشم کافیه تا ctrl+L رو بزنم و شاهد جادوش باشم.

۱- defaultSettings.json :

ctrl+shift+p رو بزنید بعدش open default settings (JSON) رو سرچ کنید.

۲- settings.json :

ctrl+shift+p رو بزنید بعدش open settings (JSON) رو سرچ کنید.

۳- ... سرچ کنید open default keyboard shortcuts (JSON)

۴- ... سرچ کنید open keyboard shortcuts (JSON)

۵- user snippets :

سرچ کنید user snippets ، بعدش انتخاب زبانی که می خواهید براش snippet بنویسید و بعدش هم اسنیپتتون رو بنویسید!

۱- عوض کردن نام تگ ها به صورت یکجا:
روی نام تگ مورد نظر بروید و F2 رو بزنید.
۲- از بین بردن خطوط ایندنت ها:
به settings بروید و render indent guide رو تیکش رو بردارید.
۳- wordwrap:
تا حالا شده اسکرولر افقی رو زمانی که دارید با vsCode کار می کنید تکون بدید؟ اگر شده یعنی خیلی وضعیتتون خرابه و باید حتما از خاصیت wordwrap استفاده کنید، برای این کار باید خطوط زیر رو به settings:json تون اضافه کنید

۱- ctrl+D برای انتخاب همون کلمه ای که روش هستید.
۲- shif+alt+Down و shift+alt+Up برای کپی کردن خط مورد نظر به خطوط بعدی یا قبلی
۳- ctrl+k ctrl+0 همه ی کد رو جمع کنید و برای برعکسش ctrl+k ctrl+j