הרחבות ל-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:

כניסה אל חלון ההגדרות ב-Visual Studio Code
כניסה אל חלון ההגדרות ב-Visual Studio Code

כאן פשוט חיפשו את ההגדרה "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 נוספה אל הקוד
שורת 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 – משימה לביצוע מאוחר יותר
? – שאלה

כך זה נראה:

ניתן לכתוב comments מסוגים שונים.
ניתן לכתוב comments מסוגים שונים.

בהצלחה!

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


3 תגובות בנושא “הרחבות ל-Visual Studio Code שכדאי להכיר”

  1. פוסט מעולה!
    כהרחבה ל Turbo Console Logאני ממליץ על תוכנת AutoHotKey שמאפשרת הדבקת סטרינגים מובנים מראש על ידי קיצורי דרך.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *