مثل سَم برای فرودو... مثل VS Code برای من...

ابزار کار، نقش بزرگی در ایفایِ بهترِ نقش یک کارگر، یک هنرمند، یک مدیر و کسی که همزمان باید هر سه نقش رو بازی کنه یعنی یک برنامه نویس دارند.

توی پُست قبل نوشتم که من از اون سبک برنامه‌نویس‌ها هستم که هیچوقت خودم رو درگیر استفاده از یک زبان خاص یا یک فریمورک نکردم هیچوقت تعصبی در این زمینه نداشتم و سعی کردم در جای خودش و بنا بر نیاز شرکت یا کارفرما از زبان‌‌ها و فریمورک‌های مختلف روی انواع پلتفرم‌ها استفاده کنم دوست داشتم نقاشی باشم که با رنگ و بوم و قلم‌مویی که داره هر سبکی رو میتونه نقاشی کنه و ابزار، نقش مهمی رو در پیدایش یک اثر هنری بازی میکنن، شما نباید در حین کدنویسی وقتتون رو بابت پیدا کردن shortcutها یا آیتم‌های منو تلف کنید باید مسلط باشید باید همه چیز رو در مورد IDE تون بدونید به قول معروف IDE باید توی مشتتون باشه.
شما حق انتخاب دارید یکی از این دو قرص رو انتخاب کنید

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

خوب اگر دارید این قسمت رو میخونید قاعدتا قرص آبی رو برداشتید پس میتونید برنامه ویژوال استودیو کد رو از اینجا دانلود و نصب کنید البته من ورژن insiders رو همیشه نصب میکنم اگر دوست داشتید میتونید اون رو از اینجا دانلود کنید فرقش هم با ورژن اصلی اینه که فیچر‌هایی که میخوان اضافه کنند رو اول توی اینسایدرز برای تست میگذارند و ممکنه خیلی stable نباشه به قول معروف پس ترجیحا شما میتونید همون اولی رو دانلود کنید که آیکنش آبیه (مال من سبزه)، موقع نصب هم تیک گزینه‌ی

Add "Open with Code" action to Windows Explorer directory context

هم بزنید، دقت کنید که ۲ تا گزینه شبیه هم هستند من فقط تیک دومی رو میزنم و اینجوری میتونید توی دایرکتوری پروژه تون راست‌کلیک کنید و گزینه Open with Code رو بزنید و اون دایرکتوری رو توی محیط VS Code باز کنید.

قراره از کاری که میخوایم انجام بدیم لذت ببریم... پس بیاید اول از همه محیط کارمون رو کانفیگ کنیم.

اولین بار که VSCode رو باز میکنید اگر مثل من با ویندوز کار میکنید و روی سیستمتون WSL رو نصب دارید احتمالا بصورت خودکار بهتون پیغام میده که متوجه شدیم شما wsl دارید بیاید اکستنشن (افزونه) اون رو هم نصب کنید که بتونید کد رو از طریق ترمینال لینوکسی‌تون بالا بیارید دیگه توضیح نمیدم قضیه چیه اونی که wsl رو داره میدونه من چی میگم اونی هم که نداره احتمالا همراه من نیازی پیدا نمیکنه چون ما قراره پروژه‌هامون رو با داکر ببندیم پس محیط لینوکسی واقعی خودمون رو داریم.

وی‌اس‌کد بعد از نصب به صورت اتوماتیک یه پنجره باز میکنه که تیترش هست Welcome پایین این پنجره یه تیک داره که بصورت پیشفرض فعاله، اون تیک رو بردارید که هر بار برنامه رو باز میکنید این پنجره رو نبینید.

سمت چپ صفحه یک نوار عمودی باریک هست که خیلی کاربردیه ما میخوایم گزینه Extensions رو انتخاب کنیم و چند تا اکستنشن جالب نصب کنیم برای شروع، در آینده میبینید که قراره ده‌ها اکستنشن دیگه نصب کنیم ولی نمیخوام شلوغ بازی در بیارم فعلا فقط میخوایم محیطمون رو کاربردی کنیم.

من دوست دارم از کیبورد توی IDEم استفاده کنم شما اگر راحت‌تر هستید روی گزینه‌ای که بالا نشون دادم کلیک کنید اگر هم میخواید کول به نظر بیاید ctrl + shift + x شما رو به منو اکستنشنز میبره امتحان کنید و مطمئن باشید یادتون نمیره و اینها به شکل جالبی هم توی vscode قابل تنظیم هستند.

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

تم Dracula Official رو انتخاب کنید و Install رو بزنید.
بعد از نصب، کلید کنترل رو نگه دارید و به ترتیب K و T رو بزنید، میبینید که لیست تم‌هایی که نصب شده میاد و شما میتونید از بین اونها تم مورد نظرتون رو انتخاب کنید (دراکولا هم که تازه نصب کردیم توش هست)

حالا دوباره ctrl+shift+x بزنید تا به سرچ‌باکس اکستنشنز برگردید و این‌بار سرچ کنید icons

این اکستنشن‌ها بصورت اتوماتیک برای فایل‌های پروژه تون یک آیکون مربوط به تایپ فایلتون قرار میدن (توی خود محیط vscode فقط) و به نظر من هم خیلی باحاله هم اینکه توی پروژه‌های بزرگ باعث میشه سریعتر فایل‌‌هاتون رو پیدا کنید من افزونه‌ی Material Theme Icons رو دوست دارم شما هم نصب کنید بعدا اگر خواستید میتونید گزینه‌های دیگه رو هم امتحان کنید.
خوب حالا که محیط کارمونُ تا حدی کانفیگ کردیم بیاید ببینیم معمولا چطوری ما قراره پروژه مون رو اینجا باز کنیم.

برنامه رو ببندید تا یک فولدر مخصوص پروژه‌های خودمون بسازیم، از این به بعد فایل‌های پروژه‌هامون رو اونجا قرار میدیم و خیلی خوبه که شما همراه من باشید و نخواید فقط از روی این متن‌ها رد بشید چون احتمالا بعدا که به قسمت‌های جالبتر رسیدیم میبینید که همه پروژه‌هایی که ساختیم قراره به هم ارتباط پیدا کنند و یک پروژه خیلی بزرگ و پیچیده رو شکل بدن.
با این حال برای اینکه خرابکاری نشه من کل کار‌هایی که از امروز با هم انجام میدیم روی یک ریپازیتوری گیت‌هاب قرار میدم و شما هر زمان که بخواید میتونید از اونجا فایل‌های مورد نظرتون رو پیدا کنید.

من یک دایرکتوری ساختم به اسم virgool و توی اون هم یک ساب‌دایرکتوری دیگه به اسم goodmood و گیت‌م رو هم همونجا اینیشیال میکنم (اگر بلد نیستید با گیت کار کنید اصلا مشکلی نیست چون قراره که باهم گیت رو خیلی خوب یاد بگیریم).

C:\virgool\goodmood>git init

حالا برای آموزش‌های مربوط به VSCode یک فولدر میسازیم به اسم vscode-tutorials و از همین الان بیاید قرارداد کنیم که همیشه اسم دایرکتوری‌هامون رو به همین شکل بگذاریم; حروف کوچک و بجای فاصله‌ها هم از علامت "-" که بهش hyphen, Dash, minus (هایفِن یا دَش یا منها) گفته میشه استفاده کنیم (من میگم هایفن که بهترین انتخابه) و وارد اون دایرکتوری میشیم.

C:\virgool\goodmood> mkdir vscode-tutorials
C:\virgool\goodmood> cd vscode-tutorials

حالا توی این دایرکتوری تایپ کنید:

C:\virgool\goodmood\vscode-tutorials> code .

با این دستور ویژوال‌استودیو‌کد فولدری که شما داخلش این دستور رو اجرا کردید رو باز میکنه.

اگر شما مثل من با VSCode Insiders کار میکنید باید بجای کد بنویسید code-insiders ولی من یک کار باحال کوچولو کردم که کارم کمی راحت تر بشه به آدرس زیر برید:
C:\Users\ashcan\AppData\Local\Programs\Microsoft VS Code Insiders\bin
بعد از فایل code-insiders.cmd یک کپی بگیرید و اون کپی رو تغییر نام بدید به code.cmd حالا میتونید اینسایدرز رو هم با دستور code باز کنید البته اگر شما هر دو نسخه رو نصب کرده باشید به مشکل میخورید و بهتره یک اسم دیگه مثل icode.cmd انتخاب کنید که با نسخه stable کانفلیکت (تداخل) نداشته باشه.

خوب یکم طولانی شد و فکر میکنم باید این آموزش رو به چندین قسمت تقسیم کنم پس برای آخرین کاری که میخوایم انجام بدیم با فشردن دکمه‌های ctrl+shift+e (از این ترکیب خیلی قراره استفاده کنیم برای جابجا شدن بین فایل کد و پنجره اکسپلورر که شماتیک درختی از پروژه شما رو نشون میده) به پنجره اکسپلورر برید و راست‌کلیک کنیدو گزینه new file رو انتخاب کنید و یک فایل به اسم index.html بسازید. به همین شکل سه فایل دیگه با نام‌های index.py (فایل پایتون)، index.tsx (فایل تمپلیت ری‌اکت) و index.pug (یک نوع تمپلیت دیگه) بسازید و ببینید که اکستنشنی که برای iconها نصب کردیم چقدر جالبه و کمک میکنه که سریع فایل مورد نظرمون رو پیدا کنیم. برای زوم کردن میتونید از ترکیب ctrl و علامت = استفاده کنید و برای زوم‌بک هم از ترکیب کنترل و علامت هایفن که کنارشه.

نکته آخر این قسمت اینکه با فشردن کنترل و علامت backtick (که قاعدتا زیر اسکیپ و سمت چپ ۱ هست) میتونید ترمینال داخلی vscode رو باز کنید و ببندید. پس ترمینال رو باز کنید و قسمت اول رو توی گیت کامیت کنید.

C:\virgool\goodmood\vscode-tutorials> git add .
C:\virgool\goodmood\vscode-tutorials> git commit -m &quotinitial commit&quot

باز هم تکرار میکنم اگر گیت بلد نیستید نادیده بگیرید قسمت‌های مربوط به گیت رو و به زودی ظرف چند روز آینده آموزش گیت رو شروع میکنم.

ممنون که همراه بودید و فعلا بدرود.

خوب در نهایت من بعد از این پست تصمیم گرفتم برای آموزش‌هام ویدیو هم رکورد کنم که کار هر دومون راحت‌تر بشه اگر دوست دارید ببینید و اگر لطف کنید ویدیوی یوتیوبُ لایک کنید و subscribe کنید که هم از ویدیو‌های آینده مطلع بشید و هم به من کمک کرده باشید.