8 עוצמה Visual Studio הרחבות קוד עבור מפתחי חזיתי

למרות ש- Microsoft פרסמה את הגרסה היציבה הראשונה של Visual Studio Code, עורך הקוד החזק שלה לפני מספר חודשים בלבד, עד מרץ 2016, יש לה כבר הרחבות רבות שיכולות לקחת חוויית קידוד לשלב הבא. ה הרחבות קוד המקוריות של Visual Studio מתארחים ב- Visual Studio Code Marketplace, שרבים מהם יכולים להיות לעזר רב עבור מפתחי אינטרנט.

עבור פוסט זה, אני נבדק חבורה של הרחבות קוד VS הקשורים לפיתוח חזיתי, ועשה רשימה של אלה מצאתי ביותר אינטואיטיבי, קל לשימוש ונוח. זה לא רשימה אולטימטיבית על ידי כל. קח את הזמן כדי לגלוש בשוק בעצמך, ולראות מה עוד זה יכול להציע לך, במיוחד מאז הרחבות גדולות רבות עדיין לבוא.

כיצד להתקין הרחבות קוד VS

התקנת הרחבה היא פשוטה למדי ב- Visual Studio קוד, כפי שאתה יכול לעשות את זה בתוך עורך הקוד. ב VS קוד שוק כל הרחבה יש דף משלה, ואתה יכול למצוא את הפקודה ניתן להתקין את ההרחבה הנתונה עם בראש הדף הזה.

הפקודה תמיד מתחילה עם התקנת טווח. כדי להתקין תוסף, פשוט ללחוץ CTRL + P בתוך קוד VS כדי להפעיל את לוח פתיחה מהירה, העתקה והדבקה של פקודה זו לתוך זה, ולבסוף הפעל מחדש את עורך הקוד כדי להפוך את העבודה הרחבה החדשה.

8 עוצמה הרחבות קוד Visual Studio

1. קטעי HTML

   אם אתה רוצה לכתוב לעתים קרובות HTML ב- Visual Studio קוד, הרחבת HTML Snippets יכול לבוא ככלי שימושי, כמו זה מוסיף תמיכה משוכללת ל- HTML. למרות קוד VS יש תמיכה בסיסית HTML, כגון צביעת תחביר, התוסף HTML Snippets יודע הרבה יותר.

   

   כנראה התכונה השימושי ביותר של הרחבה זו היא כאשר אתה מתחיל להקליד את השם של תג HTML (ללא סוגר הזווית ההתחלתית), HTML Snippets במהירות מציג רשימה של האפשרויות הזמינות עם מידע קצר על כל אחד.

   

   כאשר אתה לוחץ על הרכיב הדרוש לך, HTML Snippets מוסיף את תג HTML5 המלא עם המאפיינים הנפוצים ביותר שלו. לדוגמה, אם ברצונך להוסיף קישור (תג עוגן) למסמך, פשוט הקלד a א לתוך קוד VS, לבחור את האפשרות הנכונה בתיבה קופצת, ו- HTML Snippets יהיה להכניס את הצורך קטע לתוך העורך שלך ללא כל טרחה.

   המחבר של תוסף זה גם שם לב להסרת אלמנטים שהוצאו משימוש, לכן אם ברצונך להשתמש בתג HTML שאינך מוצא ברשימה הקופצת, כדאי לבדוק אם הוא עדיין חוקי או לא.

2. HTML CSS מחלקה השלמת

   HTML CSS Class השלמת יכול להיות תוסף מועיל אם אתה צריך להשתמש רבים CSS שיעורים בפרויקט שלך. זה קורה לעתים קרובות לנו מפתחים, כי אנחנו לא לגמרי בטוח בשם המדויק של הכיתה, אבל זה רק יושב בחלק האחורי של המוח שלנו כמו ידע פסיבי.

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

   

   נניח, אתה רוצה ליצור אתר באמצעות קרן Zurb, ואתה רוצה להשתמש ברשת קטנה. אתה לא זוכר איך קוראים את הכיתות בדיוק, אבל אתה יודע שיש להם שמות סמנטיים.

   עם HTML CSS בכיתה השלמת אתה רק צריך להתחיל להקליד את המילה קטן, ואת האפשרויות הזמינות מופיעות על המסך שלך בבת אחת, כך שאתה יכול בקלות לבחור את אחד שאתה צריך.

   

3. הצג בדפדפן

   הצג בדפדפן הוא הרחבה פשוטה אך רבת עוצמה עבור Visual Studio Code. זה יכול להקל על פיתוח חזיתי על ידי ומאפשר לך יש מבט מהיר על התוצאה של העבודה שלך בדפדפן בעת ​​קידוד. ניתן לפתוח את קובץ HTML בדפדפן ברירת המחדל ישירות מתוך קוד VS על ידי לחיצה על CTRL + F1 קיצור מקשים.

   שים לב כי הצג בדפדפן תומך ב- HTML בלבד, כך שאם אתה רוצה לראות את האתר שלך אתה צריך קובץ HTML פתוח. אתה לא ניתן לגשת ישירות לדפדפן מקובץ CSS או JavaScript.

   

4. Debugger עבור Chrome

   תוכנת Debugger עבור Chrome נבנתה על ידי Microsoft עצמה, והיא כעת התוספת הרביעית ביותר להורדת Visual Studio Code.

   מאתר הבאגים של Chrome מאפשר זאת debug JavaScript ב- Google Chrome מבלי לעזוב את עורך הקוד. פירוש הדבר שאינך צריך לעבוד עם JavaScript שעבר טרנספורמציה שהדפדפן רואה, אך תוכל לבצע את debugging הנכון מתוך המקור קבצים המקור. ראה הדגמה זו כדי לראות איך זה עובד.

   

   ההרחבה יש כל תכונה הגון הבאגים הצרכים, כגון הגדרת נקודת עצירה, צפייה משתנה, דריכה, א קונסולת debug נוח, ורבים אחרים (ראה את רשימת התכונות של המהדורה הראשונה).

   כדי להשתמש בתוסף זה, עליך להפעיל את Chrome הפעלת באגים מרחוק, ולהקים ראוי Launch.json קובץ. זה האחרון עשוי להימשך זמן מה, אבל אתה יכול למצוא הוראות מפורטות על GitHub על איך שצריך לעשות את זה.

5. JSHint

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

   

   השימוש בתוסף זה הוא פשוט למדי, כמו JSHint מסמן את השגיאות עם אדום, ואת ההודעות עם קו תחתון ירוק. אם אתה מעוניין במידע נוסף על הבעיות, פשוט העבר את העכבר מעל החלקים המסומנים בקו תחתון, ו- JSHint יציף תווית עם תיאור הבעיה בבת אחת.

   

6. קטעי קוד jQuery

   קטעי קוד jQuery יכול מאוד להאיץ את פיתוח חזיתי ב- Visual Studio קוד, כפי שהוא מאפשר לך לכתוב במהירות jQuery ללא שגיאות תחביר בסיסיות. קטעי קוד jQuery כרגע יש סביב 130 קטעי טקסט זמינים אתה יכול לקרוא על ידי הקלדת ההדק הנכון.

   

   כל קטעי jQuery אבל התחלה אחת עם jq קידומת. החריג היחיד הוא func להפעיל את זה מוסיף פונקציה אנונימית לעורך.

   תוסף שימושי זה הוא סיוע נוח כאשר אתה לא בטוח לגמרי לגבי התחביר הנכון, ואת רוצה לחסוך זמן לבדוק את התיעוד. זה גם עושה את זה קל לגלול במהירות את האפשרויות הזמינות.

   

7. באואר

   את Bower VS קוד הרחבה יכול להפוך את האינטרנט שלך פיתוח עבודה אינטואיטיבי יותר על ידי שילוב מנהל החבילה Bower לתוך Visual Studio קוד.

   אם אתה שם את התוסף להשתמש בך לא צריך לעבור הלוך ושוב בין הטרמינל לבין העורך, אבל אתה יכול בקלות לבצע משימות ניהול החבילה שלך ישירות בתוך קוד Visual Studio.

   

   הארכה Bower מוביל אותך ביצירת של הפרויקט שלך bower.json קובץ, ואתה יכול גם להתקין, להסיר, לחפש, לעדכן חבילות, לנהל את המטמון, ולבצע משימות רבות אחרות עם זה (ראה רשימה תכונה מלאה).

   אתה יכול לגשת פקודות הקשורות Bower על ידי הפעלת לוח פקודה על ידי לחיצה F1, הקלדה “באואר” לתוך סרגל הקלט, לחיצה על “באואר” אפשרות ברשימה הנפתחת שמופיעה, ובחירת הפקודה Bower המתאימה.

   

8. היסטוריה Git

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

   עם תוסף ההיסטוריה Git מותקן אתה יכול להציג את ההיסטוריה של קובץ שלם, או קו מסוים בתוך זה. אתה יכול גם להשוות גרסאות קודמות של אותו קובץ.

   

   באפשרותך לגשת לפקודות הקשורות להיסטוריית Git אם מקלידים את המילה “Git” לתוך לוח הפיקוד (F1), בחר “Git” בתוך הרשימה הנפתחת, ולבסוף לבחור את הפקודה שאתה צריך. שים לב ש אתה צריך לפתוח את הקובץ שבו אתה רוצה לראות את ההיסטוריה לפני שתוכל לבצע כל פעולה על זה.