آیا ویژوال استودیو کد ادیتور مناسبی است؟ من به عنوان یک برنامه‌نویس باید از چه ویرایشگری استفاده کنم؟ کدام ویرایشگر می‌تواند پاسخگوی نیازهای یک Front-End Developer باشد؟ این ها از جمله سؤالاتی هستند که ممکن است ذهن هر برنامه نویسی را به خود مشغول کنند. در هر صورت مهم نیست که شما یک برنامه نویس تازه کار هستید یا یک توسعه دهنده حرفه ای، ویرایشگر کد جزئی ضروری از کار شما است. اگر مبتدی باشید، گزینه های زیادی برای انتخاب IDE وجود دارد و بسیاری از آن‌ها ویژگی های مشابه، قابلیت ها و حتی رابط کاربری یکسانی دارند. به طور کلی انتخاب یک IDE مناسب ممکن است زمان‌بر باشد.
انتخاب یک IDE خاص به طور قابل توجهی به چند عامل بستگی دارد: اینکه چه نوع برنامه نویسی هستید، اغلب با چه محیطی کار می کنید یا از چه فیچرهای خاصی برای انجام کارهایتان استفاده می کنید. بهترین راه این است که آن‌ها را تست کنید و آن ادیتوری را انتخاب کنید که واقعا مناسب شما است.
انتخاب ادیتور مناسب
من هم مثل اکثر تازه کارها، اولین ویرایشگر کدی که از آن استفاده کردم، Notepad++ بود. شاید یکی از ساده ترین IDE هایی که تا به حال امتحان کرده ام. بعد از آن نیازهایم به گونه ای تغییر کرد که به عملکرد پیشرفته تری از ویرایشگرها احتیاج پیدا کردم و سعی کردم Bracket ،Atom و سپس vscode را امتحان کنم.
بعد از تست های مختلف، VSCode تبدیل به ادیتور مورد علاقه من شد. UI مدرن، دسترسی گسترده به extension ها و ویژگی های عالی مانند پشتیبانی آن از Git و ترمینال واقعاً من را تحت تاثیر قرار داد.
بد نیست بدانید که هدف اصلی این پست مقایسه کردن IDE های مختلف نیست، بلکه برای توضیح درباره تجربه من با VSCode است. بنابراین چیزهایی که در این پست خواهید خواند عبارتند از:
- یک معرفی مختصر از VSCode
- تم خاصی که نصب کردم.
- Extension های مفید
- راه های افزایش ویژگی های vscode برای بهبود عملکرد کاری
VSCode چیست؟
ویژوال استودیو کد ( VSCode ) ادیتوری است که توسط مایکروسافت ایجاد شده و می تواند در ویندوز، macOS و لینوکس اجرا شود. این برنامه رایگان و open source است. پشتیبانی خوبی از git دارد. رابط کاربری آن قابل تنظیم است و کاربران می توانند به راحتی تم، شورتکی ها و تنظیمات مختلف را تغییر دهند.
تم: رنگ و فونت
اگر شما هم مثل من به تم IDE اهمیت می دهید، پیدا کردن یک فونت و تم رنگ مناسب بسیار مهم است. من شخصاً تم های تاریک را ترجیح می دهم. بنابراین Monokai را به عنوان تم رنگ و FiraCode را به عنوان فونت انتخاب کردم. این ترکیب یک کنتراست بسیار خوب ایجاد می کند که کار را بسیار راحت می کند.
- برای نصب تم، به Setting icon => Color Theme بروید و تم مورد علاقه خود را انتخاب کنید.
- دستورالعمل نصب FiraCode را می توانید از اینجا پیدا کنید.
- OneDarkProهم یک تم تاریک دیگر است که بد نیست آن را امتحان کنید. در بخش extensions (در ویندوز Ctrl + Shift + X ) عبارت OneDarkPro را جستجو کنید. روی install کلیک و در نهایت از بخش color theme آن را انتخاب کنید.
Extension های مفید
برای پیدا کردن و نصب افزونه های مختلف به صورت زیر عمل کنید:
(Extensions => Search => Install)
موارد زیر برخی از افزونه های مورد علاقه من هستند:
- Beautify: کدها را مرتب و زیبا می کند و خوانایی آن ها را هنگام برنامه نویسی افزایش می دهد.
- ESLint: این ابزار برای کسانی که برنامه نویس react یا جاوا اسکریپت هستند، از اهم واجبات است.
- Snippets HTML: اضافه کردن پشتیبانی از rich language برای نشانه گذاری HTML مانند بستن اتوماتیک تگ ها
- آیکون های متریال دیزاین
- Prettier: مرتب سازی کدهای جاوا اسکریپت / تایپ اسکریپت و کدهای css
سفارشی کردن UI
تقریبا می توان همه چیز را در UI ادیتور سفارشی کرد. از فونت و ابعاد و اندازه های آن گرفته تا line-height. برای این کار به صورت زیر عمل کنید:
- به User Settings بروید
- تنظیمات مورد نیاز خود را جستجو کنید
- روی دکمه ویرایش در سمت چپ تنظیمات کلیک و گزینه replace را انتخاب کنید.
- تنظیم دلخواه خود را ذخیره کنید.
من fontSize را روی ۱۴، lineHeight را روی ۲۲ و tabSize به ۳ را برای خودم و البته خوانایی بهتر تنظیم کردم.
برخی از امکانات دیگر
در قسمت بعدی به غیر از این تم ها و extension ها، می خواهم با شما در مورد چگونگی استفاده از ویژگی های عالی VSCode برای افزایش بهره وری صحبت کنم.
استفاده از Terminal
شکی نیست که هر چه در توسعه نرم افزار پیش می رویم استفاده از Terminal و امکانات آن اهمیت بیشتری پیدا می کند. به عنوان یک توسعه دهنده جاوا اسکریپت، من از ترمینال برای نصب package ها، اجرای یک سرور پیاده سازی یا حتی تغییرات در repository GitHub استفاده می کنم.
قبلاً بیشتر این تسک‌ها را با Windows Command Prompt یا Git Bash انجام می‌دادم. اگر از ویندوز استفاده می کنید، احتمالا متوجه شده اید که کار با CMD آزاردهنده است. Git Bash ابزار بهتری است، اما تعویض بین برنامه ها زمانی که شما در حال انجام کار هستید تجربه دلپذیری نیست.
VSCode با ترمینال فوق العاده خود این مشکل را واقعاً برای من حل کرد و جالب اینکه شما می توانید به راحتی آن را طوری تنظیم کنید که همان کار Git Bash را انجام دهید اما درست در داخل VSCode .
برای دسترسی به ترمینال VSCode ، از کلیدهای «Ctrl+`» استفاده کنید. به این صورت ترمینال بالا می آید. از اینجا می توانید تعداد زیادی از تسک های جذاب مانند ایجاد یک ترمینال جدید یا بستن ترمینال موجود را انجام دهید.
کنترل منبع ( GIT )
هنگامی که روی یک repository کار می کنید و به طور مداوم نیاز به ایجاد تغییرات دارید، معمولا از ترمینال برای انجام تغییرات اخیر استفاده می کنید. VSCode در خود برنامه یک ابزار بسیار جذاب برای کنترل سورس کنترل به شما می دهد.
با کلیک بر روی آیکون Git واقع در پنل سمت چپ یا با استفاده از Ctrl + Shift + G (ویندوز)، به Source Control دسترسی آسان دارید و به راحتی می توانید همه کارها و فرمان های گیت را انجام دهید.
این موارد چطور باعث بهبود workflow می شوند؟
من بعد از مدتی کار با ویژوال استودیو کد (VSCode) ، شدیداً به این باور رسیدم که مهم ترین ویژگی و ارزش کلیدی آن در این است که همه امکانات لازم را در یک محیط جمع کرده است. تمام نیازها و تسک های من در workflow به عنوان یک front-end developer، به سادگی و بی عیب و نقص حل می شوند. برای درک بهتر این مزایا مثال زیر را ببینید:
اینجا من می خواهم با استفاده از react یک سری ایده را در یک اپلیکیشن پیاده کنم. از آنجایی که من معمولاً پروژه را با ایجاد یک پوشه خالی شروع میکنم، پس یک پوشه جدید به نام music_react ایجاد می کنم. بعد از آن، بلافاصله می توانم در ویژوال استودیو کد، پروژه را با انتخاب و راست کلیک بر روی آن باز کنم.
در حین کار روی پروژه، می توانم فایل ها و پوشه ها را با استفاده از کلید های میانبر در پنل سمت چپ سریع ایجاد کنم. در این پروژه، می خواهم از create-react-app استفاده کنم. بنابراین ممکن است لازم باشد که پکیج را نصب کنم. بنابراین ترمینال را باز می کنم. پوشه ای را باز می کند که قصد دارم پکیج را در آن نصب کنم. پس از وارد کردن فرمان npm ، تنها کاری که باید انجام دهم این است که منتظر نصب پکیج مورد نظر بمانم.
همچنین می خواهم پروژه را در گیت هاب نصب کنم. به راحتی می توانم یک repository گیت ایجاد کنم. پس از نصب پکیج ها، یک دستور Git initialization را نیز در ترمینال تایپ می کنم.
هنگامی که Git با موفقیت نصب شد، می توانم تمام تغییرات انجام شده را در قسمت کنترل git در پنل سمت چپ مرتب کنم.
در نهایت…
در آخر این workflowای است که من در محیط ویژوال استودیو کد از آن استفاده می کنم. البته ست آپ های لازم تا حد زیادی به برنامه نویس وابسته هستند.
با این حال، اگر شما یک Front-End Developer هستید که تا به حال با VSCode کار نکرده اید و می خواهید قبل از ورود آن را بررسی کنید، امیدواریم این مقاله برای افزایش بهره وری شما به اندازه کافی مفید بوده باشد.
در نهایت، اگر تنظیمات و تجربه شما با من متفاوت است یا افزونه هایی که از آن ها استفاده می کنید، کاربردهای بهتری ارائه می دهند، آن ها را با من و خوانندگان وبلاگ ما در میان بگذارید. ما از شنیدن نظرات شما بسیار خوشحال می شویم.