הרחבות ל-Visual Studio Code שכדאי להכיר

עורך הקוד Visual Studio Code ממשיך לצבור פופולאריות ומאגר ההרחבות שלו רק גדל מיום ליום.
בפוסט זה אציג לכם מספר הרחבות שבהחלט כדאי לכם להכיר.

בעבר כבר כתבתי פוסט על Visual Studio Code הכולל היכרות ראשונית, טיפים ומספר הרחבות שכדאי להכיר (Visual Studio Code – טיפים, תוספים ודברים שכדאי לדעת).
לשמחתי, עורך הקוד הנפלא לא מפסיק להשתבח ובמיוחד מאגר התוספים שלו ולכן החלטתי לכתוב פוסט נוסף והפעם להתמקד בגזרת ההרחבות בלבד.

Prettier – Code formatter

אין ספק שמדובר באחד מהתוספים הכי מועילים שיש.
התוסף יבצע סידור של הקוד מבחינת ריווחים, הזחות, גרשיים בודדים או כפולים, נקודה פסיק בסוף שורה ועוד שורה של "חוקים" שיהפכו את הקוד שלכם לקריא ומסודר יותר.
יש לציין שלאחר ההתקנה ייתכן ותצטרכו להגיד את התוסף כ-"Default Formatter".
לאחר ההתקנה פשוט תנסו לעשות סידור של הקוד באמצעות Ctrl + Shift + P ובחירה של "Format Document" בתפריט שנפתח, אם הקוד סודר פלאים – מעולה, אם לא, סביר להניח שתקפוץ לכם הודעה בתחתית המסך, פשוט לחצו על כפתור ההגדרה ובחרו בתוסף שזה הרגע הותקן.
הגדרה שאני ממליץ עליה מאוד היא "Format On Save".
פשוט היכנסו להגדרות (גלגל שיניים בתחתית המסך) ואז לחצו על Settings:

כאן פשוט חיפשו את ההגדרה "Format On Save" וסמנו את תיבת הסימון:

זהו, מעתה כל שמירה תבצע סידור של הקוד.

לצורך הדוגמה, קטע קוד מרושל באופן מוגזם:

ולאחר שמירת הקובץ:

Bracket Pair Colorizer

תוסף נחמד מאוד שידאג שכל זוג של סוגריים יהיה בצבע אחר על מנת למנוע בלבול.
לפני:

אחרי:

ES7 React/Redux/GraphQL/React-Native snippets

תוסף מעולה שמספק snippets ל-React ובכך מקצר מאוד את זמני הפיתוח.
מעט דוגמאות:
imr לייבוא של React.
rcc ליצירת Class Component
rfc ליצירת Functional component

Angular Snippets (Version 8)

תוסף דומה לתוסף הקודם אך הפעם ל-Angular.
התוסף יספק לכם מגוון snippets ל-Angular וכמובן שגם הוא יקצר מאוד את זמני הפיתוח.
מעט דוגמאות:
ng-component ליצירת Component
ng-httpClient-get ליצירת קריאת get.
ng-for ליצירת For-loop directive.

vscode-icons

כמעט כל פרויקט מכיל עשרות קבצים ומספר סוגי קבצים (CSS, JavaScript, TypeScript, json וכו').
התוסף vscode-icons ישדרג עבורכם את עניין האייקונים במסך ה-EXPLORER.
שימו לב שייתכן שלאחר התקנת התוסף תצטרכו לאשר את הגדרת התוסף כברירת המחדל עבור חבילת האייקונים שלכם.

לפני:

אחרי:

CSS Peek

תוסף מעולה שמאפשר לכם להגיע ל-CSS של אלמנט מסויים בלחיצה.
לחיצה על CTRL בעת סימון ה-ID או ה-Class ייצור קישור הישר אל קובץ ה-CSS המדובר.

Turbo Console Log

בואו נהיה כנים, כמה פעמים אתם מוצאים את עצמכם כותבים console.log במהלך הפיתוח? התוסף הבא יחסוך לכם לא מעט זמן.
לאחר התקנת התוסף תוכלו לסמן משתנה מסויים, ללחוץ על CTRL + ALT + L ושורת console.log תתווסף מיד:

מה שמעניין הוא שניתן לשים את כל שורות ה-console.log ב-comment באמצעות פקודה פשוטה: Alt + Shift + c
אם רוצים לעשות uncomment הפקודה היא Alt + Shift + u
רוצים למחוק לגמרי? Alt + Shift + d
שימו לב, הפקודות הנ"ל ישפיעו אך ורק על שורות ה-console.log שנוספו על ידי תוסף זה.

Auto Rename Tag

סביר להניח שרציתם לשנות תגית מסויימת, נאמר מ-h1 ל-h2. ברגע שתערכו את התגית הפותחת, התוסף ישנה עבורכם גם את תגית הסגירה (ולהפך) באופן אוטומטי.

Better Comments

תמיד אפשר לתעד טוב יותר, לא?
התוסף Better Comments מאשפר להוסיף comments מסוגים שונים, בתוך גבולות ה-comments כמובן:

* – הבהרה
! – אזהרה
TODO – משימה לביצוע מאוחר יותר
? – שאלה

כך זה נראה:

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)