بررسی Visual Studio Code برای توسعه دهندگان front-end

پنج شنبه ۰۳ خرداد ۹۷ توسط محمدسینا مرادی

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

اگر الان سوالی که برای شما پیش آمده این است که: "با کدام یک از IDE ها شروع کنم؟" پس من هم به شما می گویم که: "به چیز های زیادی بستگی دارد دوست عزیز من" انتخاب یک IDE خاص و اینکه قابل توجه شما باشد به چند عامل بستگی دارد: چه نوعی از توسعه دهندگان هستید؟ ، اغلب با چه نوعی از محیط ها کار می کنید؟ و آیا شما به یک ویژگی منحصر به فرد برای انجام دادن کارهایتان نیاز دارید؟

من به شما پیشنهاد می کنم که همه آنها را خودتان کشف نمایید و سپس انتخاب کنید که چه چیزی مناسب شما است.

انتخاب ویرایشگر مناسب شما

همه شما در ابتدای کار خود با Notepad++ شروع و کار خود را آغاز کرده اید این یکی از ساده ترین IDE هایی است که من به شخصه امتحان کرده ام.

بعد ها نیز برای رفع نیاز های خود به IDE هایی همچون Atom،Brackets و سپس سمت ویژوال استودیو کد رفتم.

پس از کمی تجربه از VSCode فهمیدم که به آن علاقه مند شدم.من به UI مدرن، دسترسی گسترده به برنامه های افزودنی و ویژگی های عالی تری مانند اینکه در Git ساخته شده است واقعا من را تحت تاثیر قرار داد.

 

هدف اصلی این مقاله مقایسه کردن IDE های مختلف نیست، بلکه برای بحث درباره تجربه من با VSCode است. بنابراین در این مقاله، من شما را با موارد زیر آشنا کنم:

 

  • معرفی مختصر VSCode
  • معرفی تم خاصی که من نصب کردم
  • مطرح کردن مفاهیمی که من از آنها استفاده کرده ام که به شما نشان می دهد من چگونه کیفیت کار خود را با VSCode بالا بردم.

بیایید شروع کنیم.

اما در ابتدا بیایید بررسی کنیم که VSCode چیست؟

ویژوال استودیو کد (VSCode) یک IDE قدرتمند است که توسط مایکروسافت ایجاد شده و می تواند در ویندوز، macOS و لینوکس اجرا شود. این برنامه رایگان، اپن سورس و از اشکال زدایی(Debugging) و همچنین از کنترل نسخه Git پشتیبانی می کند، توانایی برجسته سازی سینتکس(syntax highlights) و... را دارا است. رابط کاربری این IDE قدرتمند، می تواند کاملا توسط شما تغییر کند، زیرا شما می توانید تم ها، میانبر های صفحه کلید و تنظیمات را تغییر دهید.

VSCode در ابتدا در سال 2015 به عنوان یک پروژه اپن سورس در GitHub میزبانی می شد و یک سال بعد در وب سایت قرار گرفت. از آن زمان، ویرایشگر کد مایکروسافت در میان توسعه دهندگان محبوبیت فراوانی یافته است.

در بررسی توسعه دهندگان Stack Overflow در سال 2018 ،VSCode با 35 درصد از آراء و بیش از 100000 پاسخ دهنده به محبوب ترین IDE تبدیل شد.در عرصه وب این آرا نزدیک به 39 درصد می باشد.

با بروزرسانی ماهانه این IDE کاربران می توانند واقعا از این IDE لذت ببرند.با این بروزرسانی ها اشکال ها رفع، ثبات و افزایش کارایی انجام می شود.

تم: رنگ ها و فونت

اگر شما مثل من هستید و به تم IDE خود اهمیت می دهید، پیدا کردن یک فونت و تم و رنگ مناسب بسیار مهم است. من شخصا یک تم تاریک را ترجیح می دهم، من از فونت Console از VSCode که به طور پیش فرض موجود است در ویندوز متنفر هستم.

بنابراین تم  Monokai و فونت FiraCode گزینه های فعلی من هستند. این ترکیب یک کنتراست بالا را ایجاد می کند که کار با آن بسیار راحت می شود.

برای نصب تم این کار ها را انجام دهید:

  • بر روی آیکون تنظیمات کلیک کنید => Color Theme را انتخاب کنید => اکنون تم دلخواه خود را نصب نمایید.
  • راهنمای نصب فونت FiraCode را اینجا پیدا کنید.
  • شما می توانید تم های دیگری را نیز مانند: OneDarkPro که به نظر من فوق العاده است را امتحان کنید، این تم نیز بسیار عالی و زیبا می باشد.برای نصب این تم از کلید های Ctrl + Shift + X در ویندوز استفاده کنید.

قابلیت های مفید (Extensions => Search => Install)

اینها برخی از قابلیت های مورد علاقه من هستند:

Beautify: کد های خود را زیبا و آنها را بیشتر قابل خواندن کنید.

Bracket Pair Colorizer: این قابلیت باعث می شود پرانتز ها با رنگ مشخص شوند.

ESLint: اگر توسعه دهنده React یا جاوا اسکریپت هستید شاید از ESLint خوشتان بیاید.این قابلیت می تواند خطا ها و مشکلات را درون کد شما شناسایی کند و همچنین برای جایگزین کردن آن کد ها کلی پیشنهاد به شما بدهد.

HTML Snippets: افزودن پشتیبانی از زبان غنی برای نشانه گذاری HTML مانند بستن خودکار تگ ها.

JavaScript (ES6) code snippets: تقریبا از اسمش پیداست برای چه کاری ساخته شده است.

Live Server: یک سرور محلی با ویژگی های Liverloadoad برای سایت HTML یا PHP خود را راه اندازی کنید.

Markdown Preview Enhanced: اجرای سرور زنده برای فایل markdown شما.

Material Icon Theme: آیکون های ذخیره شده در متریال گوگل را فراهم می آورد. جهت فعالسازی به تنظیمات بروید =>File Icon Theme را انتخاب کنید=>حال آیکون متریال خود را انتخاب کنید.

Prettier: کد های جاوا اسکریپت، typescript و سی اس اس را زیبا می کند.

UI خود را سفارشی کنید!

تقریبا شما می توانید همه چیز را سفارشی سازی کنید از فونت فمیلی گرفته تا ارتفاع خط ها و...، برای این کار می توانید:

  • به تنظیمات کاربر رجوع کرده (Ctrl + ,) و کار خود را انجام دهید.
  • کلمات کلیدی مربوط به سفارشی سازی را جستجو کنید.
  • بر روی دکمه ویرایش در سمت چپ تنظیمات کلیک کرده و تنظیمات خود را جایگزین نمایید.
  • تغییر مقدار تنظیماتی که شما انتخاب کردید.

اندازه فونت من در این ویرایشگر 14 و ارتفاع خط ها 22 و سایز تب نیز 3 می باشد.این تنظیمات را برای خوانایی بهتر انتخاب کرده ام.

چیز هایی که آرزو می کردم در ابتدای کارم آنها را میدانستم

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

Integrated Terminals

Integrated Terminals زمان بیشتری را به شما هدیه می کند و هنگامی که در حال توسعه نرم افزار هستید، ترمینال مهم تر می شود. به عنوان یک توسعه دهنده جاوا اسکریپت، من از ترمینال برای نصب بسته ها، اجرای سرور توسعه، یا حتی ایجاد تغییرات در repository فعلی من در گیت هاب، از آن استفاده میکنم.

در ابتدا، من بیشتر این وظایف را با Windows Command Prompt یا Git Bash انجام می دادم. اگر شما از ویندوز استفاده می کنید، ممکن است متوجه شوید که CMD کثیف و مزاحم است. Git Bash یک ابزار خوب است، اما تعویض بین برنامه ها زمانی که شما در حال کار هستید تجربه ای دلپذیر نیست.

VSCode واقعا این مشکل را برای من با ترمینال فوق العاده ای که دارد حل کرد. و چیز جالبی که وجود دارد این است که شما می توانید آن را به راحتی تنظیم کنید تا همان کاری را که با Git Bash انجام می دادید، در ترمینال VSCode انجام دهید. این واقعا ترکیب فوق العاده ای است که بتوانیم در VSCode همان کار های Git Bash را انجام دهیم.

برای دسترسی به ترمینال VSCode، از Ctrl + `(سمت چپ 1 کلید خود) استفاده کنید. سپس ترمینال بالا می آید و می توانید از آن استفاده کنید.

از این قسمت می توانید یک ترمینال جدید ایجاد یا یک ترمینال موجود را حذف کنید.همچنین می توانید نوع نمایش آنها را تقسیم کنید.

کنترل سورس (Git)

هنگامی که شما در یک repository  کار می کنید و به طور مداوم نیاز به ایجاد تغییرات دارید، به طور معمول ترمینال را برای انجام تغییرات اخیر پیدا می کنید و شاید برایتان مزاحمت ایجاد کند، آیا نمی خواهید که ترمینال را ببینید؟ خوب، VSCode به شما یک ابزار بسیار جذاب و جالب را در کنترل repository های شما هدیه می دهد.

با کلیک کردن روی آیکون Git واقع در پنل سمت چپ یا با استفاده از Ctrl + Shift + G در ویندوز، شما دسترسی آسان به Source Control دارید. در اینجا می توانید همه چیزهای Git را انجام دهید. خیلی راحت، اینطور نیست؟

چگونه همه این چیز ها دست به دست هم می دهند و کیفیت کار من را بالا می برند؟-چگونه من را توسعه دهنده ای بهتر از قبل می کند؟

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

برای این که شما را بیشتر با این مزایا آشنا کنم و آن را بیشتر برایتان روشن کنم، اجازه دهید شما را از طریق یک جریان عادی کاری که من پیاده کرده ام جلو برویم.

بیایید فرض کنیم که من یک ایده برای گوش کردن موزیک دارم و میخواهم آن را با زبان React پیاده کنم. من معمولا با ایجاد یک پوشه خالی پروژه را شروع میکنم بنابراین یک پوشه جدید به نام react_music ایجاد میکنم. پس از آن، من می توانم بلافاصله پروژه خودم را با کلیک راست و انتخاب گزینه "Open with Code" در VSCode باز کنم.

هنگامی که من در پروژه خودم در حال کار کردن روی آن هستم، می توانم به سرعت فایل و پوشه ها را با کلید های میانبر در پنل سمت چپ ایجاد کنم.

در این پروژه، من میخواهم create-react-app را راه اندازی کنم.بنابراین، ممکن است نیاز به نصب پکیج پیدا کنیم. ترمینال من با تایپ کردن (Ctrl + `) باز می شود. شگفت آور است که ترمینال به طور خودکار به دایرکتوری دقیق من هدایت می شود. نیازی به تغییر دادن دایرکتوری وجود ندارد.

پس از وارد شدن به خط فرمان برای نصب بسته npm، همه چیزی که باید انجام دهم این است که منتظر بمانم تا همه dependencie ها نصب شوند.

من همچنین می خواهم پروژه خود را در GitHub منتشر کنم، بنابراین ابتدا بایستی یک مخزن(repository) گیت(Git) را راه اندازی کنم. پس از نصب بسته ها، یک دستور اولیه برای Git را نیز در ترمینال خود تایپ می کنم.

هنگامی که Git با موفقیت نصب می شود، می توانم تمام تغییرات در انتظار را در قسمت کنترل سورس در پنل سمت چپ مرتب کنم.

سپس من می توانم همچنان به کار خودم ادامه دهم. علاوه بر این، اگر دوست داشته باشم می توانم تمام تغییرات را به GitHub از ترمینال انجام دهم.

پایان

بنابراین، این گردش کار طبیعی من در محیط VSCode است. یک توسعه دهنده قدیمی ممکن است در مقایسه با من و شما، یک گردش کاری کاملا متفاوت داشته باشد.

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

در نهایت نیز، اگر شما تنظیماتی را انجام داده اید که توانسته است توجه شما را به خودش جلب کند یا اگر افزونه های خوب تری را می شناسید، برای ما از طریق نظرات ارسال کنید.

 

موفق و پیروز باشید (:


کلیدواژه: توسعه وب VSCode ویژوال استودیو کد IDE ویرایشگر ادیتور

منابع: medium.freecodecamp.org

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.