15 برنامه افزودنی برتر VSCODE هر توسعه دهنده زاویه ای باید درباره آن آگاهی داشته باشد
Angular یک چارچوب قوی برای ساخت برنامه های وب پویا و مقیاس پذیر است. به عنوان یک توسعه دهنده زاویه ای ، راندمان شما به شدت به ابزارهای شما بستگی دارد و کد استودیو ویژوال (VSCode) به دلیل انعطاف پذیری و اکوسیستم پسوند غنی مورد علاقه است. با پسوندهای مناسب ، می توانید برنامه نویسی ، اشکال زدایی و آزمایش را در پروژه های زاویه ای خود ساده کنید. در این مقاله ، ما 15 برنامه برتر VSCODE را بررسی خواهیم کرد که هر توسعه دهنده زاویه ای باید گردش کار خود را بیش از حد شارژ کند.
چرا Vscode برای توسعه زاویه ای؟
VScode سبک وزن ، قابل تنظیم و مملو از ویژگی هایی مانند IntelliSense ، پشتیبانی GIT داخلی و ابزار اشکال زدایی است. بازار آن پسوندهای متناسب با کارهای زاویه ای و ساده مانند ویرایش الگو ، تولید کد و مدیریت Monorepo را ارائه می دهد. این که آیا شما در حال ساختن یک برنامه کوچک یا یک راه حل پیچیده سازمانی هستید ، این پسوندها باعث افزایش بهره وری شما می شوند.
بیایید به 15 برنامه افزودنی برتر مورد نیاز در تنظیم VSCode خود شیرجه بزنیم.
1. سرویس زبان زاویه ای
خدمات زاویه ای که توسط تیم زاویه ای توسعه یافته است ، توسعه الگو را با:
تکمیل خودکار برای خصوصیات ، دستورالعمل ها و لوله ها.
تشخیص زمان واقعی برای گرفتن خطاهای الگوی و Typescript.
پیشگویی برای ناوبری سریع به منطق مؤلفه.
چرا ضروری است: بهره وری الگوی را تقویت کرده و خطاها را با پیشنهادات هوشمند به حداقل می رساند.
نصب: “سرویس زبان زاویه ای” را جستجو کنید یا از شناسه استفاده کنید: angular.ng-template.
2. زیباتر – فرمت کد
Prettier با استفاده از TypeScript خودکار ، HTML ، CSS و JavaScript ، یک ظاهر طراحی شده کد مداوم را در سراسر پروژه زاویه ای شما تضمین می کند.
فرمت های ذخیره شده برای یک پایگاه کد تمیز.
از الگوهای زاویه ای هنگام جفت شدن با ابزارهای لینت پشتیبانی می کند.
قابل تنظیم برای تراز کردن با استانداردهای تیم.
چرا ضروری است: صرفه جویی در وقت و نگه داشتن مؤلفه ها و خدمات خود را جلا نگه دارید.
نصب: “Prettier-Code Formatter” را جستجو کنید یا از شناسه استفاده کنید: esbenp.prettier-vscode.
نکته: با Linting Angular.Json برای قالب بندی یکپارچه ترکیب کنید.
3.
ESLINT کیفیت کد را با لینت در زمان واقعی تقویت می کند ، به خصوص هنگامی که با @angular-eslint برای قوانین خاص زاویه ای جفت می شود.
خطاها را تشخیص داده و بهترین روشها را اجرا می کند.
مسائل مربوط به رفع خودکار در ذخیره.
لینت مخصوص زاویه ای برای مؤلفه ها ، دستورالعمل ها و موارد دیگر.
چرا ضروری است: یک کد کد زاویه ای تمیز و قابل حفظ را حفظ می کند.
نصب: “eslint” را جستجو کنید یا از شناسه استفاده کنید: dbaeumer.vscode-eslint. ng add @angular-eslint/schematics را برای تنظیم اجرا کنید.
4 برچسب تغییر نام خودکار
همگام سازی برچسب برچسب HTML/XML برچسب های برچسب ، ساخت ویرایش الگو را سریعتر و بدون خطا می کند.
هنگام ویرایش برچسب های باز ، برچسب ها را به روز می کند.
از دستورالعمل های زاویه ای مانند *ngif یا *ngfor پشتیبانی می کند.
اصلاحات دستی را در قالب ها کاهش می دهد.
چرا ضروری است: سرعت بخشیدن به الگوی را در اجزای زاویه ای سرعت می بخشد.
نصب: “برچسب تغییر نام خودکار” را جستجو کنید یا از شناسه استفاده کنید: Formulahendry.Auto-Rename-Tag.
5. قطعه های زاویه ای
قطعه های زاویه ای توسط جان پاپا میانبرهایی را برای تولید کد دیگ بخار زاویه ای فراهم می کند.
قطعه قطعه برای مؤلفه ها (مؤلفه های A) ، خدمات (خدمات A) و موارد دیگر.
تراز با کنوانسیون های CLI زاویه ای.
وظایف تکراری را سرعت می بخشد.
چرا ضروری است: برای توسعه سریعتر ، تایپ دستی را کاهش می دهد.
نصب: “قطعه های زاویه ای” را جستجو کنید یا از شناسه استفاده کنید: Johnpapa.Angular2-Snippets.
6. کنسول NX
کنسول NX برای توسعه دهندگان زاویه ای که در Monorepos با استفاده از NX کار می کنند ، ضروری است.
رابط گرافیکی برای دستورات NX مانند NG تولید یا تست NX.
وابستگی های فضای کاری را تجسم می کند.
مؤلفه ها و کتابخانه ها را بدون ترمینال تولید می کند.
چرا ضروری است: گردش کار Monorepo را برای پروژه های بزرگ زاویه ای ساده کنید.
نصب: “کنسول NX” را جستجو کنید یا از شناسه استفاده کنید: nrwl.angular-console. به فضای کاری NX نیاز دارد (NPX Create-NX-WorkSpace).
7. گیتلنس
Gitlens ادغام GIT را تقویت می کند و کنترل نسخه را برای تیم های زاویه ای یکپارچه می کند.
سرزنش درون خطی برای ردیابی تغییرات کد.
ارتکاب تاریخ و کاوش در شعبه.
ابزارهای حل تعارض را ادغام کنید.
چرا ضروری است: همکاری و ردیابی کد را بهبود می بخشد.
نصب: “gitlens” را جستجو کنید یا از شناسه استفاده کنید: eamodio.gitlens.
8. اشکال زدایی برای Chrome
اشکال زدایی برای Chrome به شما امکان می دهد برنامه های زاویه ای را مستقیماً در VScode اشکال زدایی کنید.
نقاط شکست در TypeScript برای اشکال زدایی دقیق.
بارگیری مجدد زنده برای آزمایش در زمان واقعی.
با ساختهای CLI زاویه ای ادغام می شود.
چرا ضروری است: اشکال زدایی منطق پیچیده زاویه ای را ساده می کند.
نصب: “Debugger for Chrome” را جستجو کنید یا از شناسه استفاده کنید: msjsdiag.debugger-for-Crome. پیکربندی launch.json برای Chrome.
9. intellisense مسیر
Path Intellisense Autocompletes مسیرها را در پروژه زاویه ای خود قرار دهید و در هنگام وارد کردن ماژول یا دارایی ، صرفه جویی کنید.
نام پرونده و پوشه را هنگام تایپ پیشنهاد می دهد.
از واردات TypeScript و URL های الگوی پشتیبانی می کند.
در مسیرها اشتباهات را کاهش می دهد.
چرا ضروری است: واردات در پروژه های بزرگ زاویه ای را افزایش می دهد.
نصب: “مسیر Intellisense” را جستجو کنید یا از شناسه استفاده کنید: Christian-Kohler.Path-Intellisense.
10. Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 Codes Color Codes مطابق با براکت ها ، و باعث می شود تا کدهای زاویه ای تو در تو را آسانتر کنید.
نکات برجسته براکت ها در TypeScript و HTML.
قابلیت خواندن در اجزای پیچیده را بهبود می بخشد.
رنگ های قابل تنظیم برای وضوح.
چرا ضروری است: ناوبری کد را در پرونده های زاویه ای متراکم تقویت می کند.
نصب: “Bracket Pair Colorizer 2” را جستجو کنید یا از شناسه استفاده کنید: coenraads.bracket-pair-colorizer-2.
11. مشتری استراحت
REST Client به شما امکان می دهد درخواست های HTTP را مستقیماً در VSCODE آزمایش کنید ، ایده آل برای برنامه های زاویه ای که با API تعامل دارند.
ارسال ، ارسال ، ارسال و غیره ، از پرونده های .http.
پاسخ ها را بدون ترک ویرایشگر مشاهده کنید.
از متغیرهای محیط برای آزمایش API پشتیبانی می کند.
چرا ضروری است: آزمایش API را در طول توسعه زاویه ای ساده می کند.
نصب: “مشتری استراحت” را جستجو کنید یا از شناسه استفاده کنید: humao.rest-client.
**
- سوئیچ کننده زاویه ای ** سوئیچ کننده زاویه ای ناوبری بین پرونده های زاویه ای مرتبط را ساده می کند (به عنوان مثال ، .ts ، .html ، .css).
به سرعت بین پرونده های کامپوننت جابجا شوید.
میانبرهای صفحه کلید برای گردش کار سریعتر.
از ساختارهای پروژه زاویه ای پشتیبانی می کند.
چرا ضروری است: هنگام کار بر روی منطق و الگوهای مؤلفه ، باعث صرفه جویی در وقت می شود.
نصب: “سوئیچ کننده زاویه ای” را جستجو کنید یا از شناسه استفاده کنید: StringHam.Angular-Switcher.
13. تست Explorer UI
Test Explorer UI یک رابط بصری برای اجرای و اشکال زدایی تست های واحد زاویه ای با چارچوب هایی مانند یاس یا کارما فراهم می کند.
تست ها را از نوار کناری اجرا کنید.
مشاهده نتایج و شکست های آزمون.
تست های اشکال زدایی با نقاط شکست.
چرا ضروری است: توسعه آزمایش محور را در زاویه ای کارآمدتر می کند.
نصب: “Test Explorer UI” را جستجو کنید یا از شناسه استفاده کنید: hbenl.vscode-test-explorer. جفت با VSCODE-KARMA-TEST-ADAPTER برای پشتیبانی کارما.
14. Code Spell Checker
Code Spell Checker در کد زاویه ای ، نظرات و قالب های زاویه ای شما ، علامت گذاری می کند.
خطاهای املایی را در زمان واقعی برجسته می کند.
برای نام های متغیر از شتر پشتیبانی می کند.
فرهنگ لغت های سفارشی برای اصطلاحات خاص پروژه.
چرا ضروری است: کد حرفه ای ، بدون خطا و مستندات را تضمین می کند.
نصب: “Code Spell Checker” را جستجو کنید یا از شناسه استفاده کنید: StreetSidesoftware.code-spell-checker.
15. همه برجسته
TODO برجسته TODO ، FIXME و سایر حاشیه نویسی ها را در پایگاه کد زاویه ای شما نشان می دهد.
نظرات را برای ردیابی آسان برجسته می کند.
کلمات کلیدی و سبک های قابل تنظیم.
به اولویت بندی وظایف در پروژه های بزرگ کمک می کند.
چرا ضروری است: پروژه زاویه ای خود را سازمان یافته و متمرکز نگه می دارد.
نصب: “TODO Highlight” را جستجو کنید یا از شناسه استفاده کنید: Wayou.vscode-Todo-Highlight.
پایان
این 15 برنامه افزودنی VScode برای توسعه دهندگان زاویه ای تغییر دهنده بازی هستند و همه چیز را از ویرایش الگو گرفته تا اشکال زدایی ، آزمایش و کنترل نسخه پوشش می دهند. با ادغام ابزارهایی مانند سرویس زاویه ای زبان ، کنسول NX و استراحت مشتری در گردش کار خود ، کد تمیزتر را می نویسید ، سریعتر خطاهای می گیرید و برنامه های زاویه ای را با اطمینان ارسال می کنید. این برنامه های افزودنی را نصب کنید ، تنظیمات آنها را برای پروژه خود تغییر دهید و بهره وری خود را به سطح بعدی برسانید.
پسوند VSCODE شما برای Angular چیست؟ افکار خود را در نظرات رها کنید و بیایید مکالمه را ادامه دهیم!
📌 بروزرسانی بمانید
برای نکات و ابزارهای طراحی بیشتر من را دنبال کنید! ✨
🐙 GitHub: برای منابع بیشتر توسعه وب من را دنبال کنید.
🔗 LinkedIn: برای نکات و ترفندهای مربوط به برنامه نویسی با من ارتباط برقرار کنید.
✍ متوسط: من را برای مقالات عمیق در مورد توسعه وب دنبال کنید.
📬 Substack: برای بینش ها و به روزرسانی های اختصاصی به خبرنامه من شیرجه بزنید:
