ویژوال استودیو کد تبدیل به یک ویرایشگر کد بسیار محبوب برای توسعه دهندگان زاویه، به خصوص کسانی که در حال اجرا CLI زاویه ای. ویژگی هایی مانند برجسته سازی Syntax و تکمیل خودکار، ارائه کد به درستی در ویرایشگر، دستورات ساخته شده در Git و پشتیبانی از افزونه ها، باعث می شود VSCode در بین محبوب ترین ویرایشگرهای کد در اطراف.
در این پست، من به 5 افزونه VSCode نگاه می کنم که برای توسعه دهندگان زاویه مفید است.
# 1 میانبرهای angular2
اگر یک برنامه CLI زاویه ای که در میزبان محلی شما اجرا می شود، در پوشه برنامه، مولفه برنامه ای که به صورت پویا توسط CLI زاویه ای ایجاد می شود، وجود دارد.
میانبرهای زاویه ای 2
به عنوان یک توسعه دهنده زاویه ای، شما در حال کار بر روی این جزء هستید و اغلب سوئیچ بین برنامه نویسی HTML و CSS فایل TS.
هنگامی که برنامه رشد می کند، شما می توانید بین این سه فایل از اجزای فردی بسیار بیشتر تغییر دهید. برای این، شما یک افزونه مفید به نام angular2-switcher دارید. اگر این افزونه را نصب کنید، به میانبرهای صفحه کلید دسترسی خواهید داشت تا سریعا به فایلهای شخصی بروید.
میانبر فایل
app.component.html Shift + Alt + u
app.component.css Shift + Alt + I
app.component.ts Shift + Alt + o
app.component.spec.ts Shift + Alt + p
جدول بالا چهار کلید میانبر را برای تغییر بین CSS، HTML، پرونده TS برای آزمایش و فایل TS از این جزء لیست می کند. حروف-u، i، o و p-بسیار نزدیک به یکدیگر هستند تا سرعت آن را برای تغییر بین فایلهای شخصی تغییر دهند.
# 2 خدمات زبان زاویه ای
در زاویوی، اگر شما یک نام را به اجزای برنامه اضافه کنید و سعی کنید آن را در داخل قالب HTML قرار دهید، VSCode این نام را برای اتمام خودکار از جعبه ارائه نمی کند و نیاز به یک برنامه افزودنی برای قابلیت های اضافه دارد. به عنوان یک توسعه دهنده زاویه ای، شما می خواهید دسترسی به داخل یک قالب داشته باشید. شما می توانید از فرمت خدمات زبان زاویه ای استفاده کنید که خودکار تکمیل را اضافه می کند.
اگر شما آن را فعال کنید و به فایل HTML بروید، خواهید دید که آیا نام در فهرست تکمیل خودکار به همان اندازه که شما شروع به تایپ کردن می کنید، پر می شود.
خدمات زبان زاویه ای
همانطور که در عنوان و در هر موردی که در داخل جزء برنامه ایجاد شده است، اتفاق می افتد. شما به داخل قالب دسترسی دارید.
اگر یک تابع ساده را ایجاد کنید که یک رشته را باز می کند، به آن دسترسی خواهید داشت و به لطف افزونه Angular Language Service.
# 3 json2ts
چیزهای دیگری که شما اغلب در Angular کار می کنید، نقطه پایانی هستند که داده های JSON را باز می گردانند. برای داده های JSON، شما باید یک رابط کاربری ایجاد کنید. شما می توانید این کار را به صورت دستی انجام دهید، اما اگر یک شیء عظیم داشته باشید، آن را به شما خواهد بخشید.
خوشبختانه، یک برنامه افزودنی VSCode میتواند این را برای شما به صورت خودکار انجام دهد. json2ts خاص زاویه ای نیست و هر زمان که شما با TypeScript کار می کنید کار می کند. Json2ts هنگامی مفید است که شما باید یک رابط TypeScript را از یک شی JSON ایجاد کنید.
# 4 نشانکها
با استفاده از فایل های طولانی کارهای زیر را انجام دهید. اگر می خواهید بر روی یک بلوک کوچکی از کد کار کنید، سپس باید چیزی را در بالا چک کنید و سپس به محل قبلی خود بروید. با استفاده از Bookmark، به راحتی می توانید با فشار دادن Alt + Ctrl + K یک نشانگر کوچک قرار دهید، یک نشانگر آبی را در محل خواهید دید. اگر به بالای کد بروید که همه متغیرهای شما ذخیره می شوند، می توانید همان کار را انجام دهید: Alt + Ctrl + K.
نشانکها
شما می توانید از میان این دو نشانگر، از Alt + Ctrl + J و Alt + Ctrl + L استفاده کنید. هنگامی که شما در یک پرونده طولانی کار می کنید و می خواهید به سرعت به یک بخش خاص بروید، می توانید همانطور که دوست دارید تعداد زیادی از این نشانگر را قرار دهید.
میانبر عمل
تنظیم نشانه / حذف Alt + Ctrl + K
به نشانگر قبلی بروید Alt + Ctrl + J
برو به نماد بعدی Alt + Ctrl + L
این میانبرهای بیشتری وجود دارد. شما می توانید به منو بروید، بوک مارک ها را وارد کنید، و تمام دیگر کلید های میانبر صفحه کلید مربوط به این برنامه افزودنی را مشاهده خواهید کرد. تنظیم، حذف و رفتن به نشانه بعدی و قبلی، کلید های مفید تر مفید هستند.
راهنماهای # 5
من مطمئن هستم که شما در مورد این موضوع در هنگام کدهای طولانی HTML به دنبال آن هستید و شما تعجب می کنید که کدام این برچسب شروع و پایان می یابد؟ کدام div را افشا می کند؟ آیا خوب نیست که ارتباط بین تگ های باز و بسته شدن وجود داشته باشد؟ شما نیاز به نوعی قواعد دارید و این دقیقا همان کاری است که راهنمایان انجام می دهند.
پس از نصب افزونه Guides، خطوط عمودی، باز و بسته کردن divs را متصل می کنند و به شما کمک می کنند تا ظاهر صحیح را به صورت زیر نشان دهید.
راهنماها
راهنماهای تنظیمات بسیاری نیز دارد. برای مثال می توانید رنگ ها یا ضخامت خط ها را تغییر دهید.
این افزونه های VSCode بهبود گردش کار توسعه زاویه را افزایش می دهند و من معتقدم که آنها نیز مفید خواهند بود. من می دانم که بسیاری از برنامه های مفید تر است که هر روز استفاده می کنید. من دوست دارم در مورد آنها بشنوم.