כיצד להתאים אישית את קוד

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

בהודעה זו, בהתחלה נוכל לראות כיצד לשנות את המראה של סביבת עבודה של Visual Studio קוד, אז אני אראה לך כיצד להתאים אישית את הגדרות ברירת המחדל בעזרת שני JSON-קבצי תצורה מעוצבים.

כיצד להגדיר צבע על קוד

קוד Visual Studio מאפשר לך להגדיר ערכת צבע מותאמת אישית עבור העורך שלך.

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

אתה יכול להשיג את אותו אפקט אם תלחץ F1 כדי לפתוח את לוח הפקודות, והקלד העדפות: עיצוב צבע הפקודה לתוך שדה קלט.

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

אני בוחרת “ניגודיות גבוה” צבע, כמו העיניים שלי לא הכי טוב. הנה המראה שלי.

כיצד להתקין ערכת נושא מתוך קוד שוק

אם אתה לא אוהב את כל הנושאים צבע VS קוד מציעה כברירת מחדל, אתה יכול להוריד רבים אחרים מ VS קוד שוק.

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

כאשר תלחץ על אפשרות זו, מופע חדש של Command Palette יצוץ. הקלד את ה "ערכת נושא להתקין ext" הפקודה לשדה קלט חדש, ואתה לקבל רשימה של כל הנושאים הזמינים בשוק ה- VS Code.

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

עם ערכת נושא חומר חדשה, העורך שלי עכשיו נראה כך:

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

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

שינוי הגדרות משתמש וסביבת עבודה

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

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

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

1. העולמי הגדרות, שבו חוקי התצורה תקפים עבור כל סביבת עבודה
2. את סביבת העבודה הקשורות .vscode / הגדרות, זה קשור רק לסביבת עבודה בודדת

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

• on Windows % APPDATA% \ קוד \ משתמש \ הגדרות
• on Linux $ Home / .config / Code / משתמש / הגדרות
• ב- Mac: $ HOME / Library / Application Support / Code / User / settings.json

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

אז מתי אתה משתמש הגדרות קבצים?

אם אתה רוצה קוד VS להשתמש כללי התצורה המותאמת אישית שלך ב את כל את הפרויקטים שלך, לשים אותם לתוך הגלובלי הגדרות קובץ.

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

הגדרות סביבת העבודה עוקפות את ההגדרות הגלובליות, אז תהיה זהיר.

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

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

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

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

לאחר העתקה והדבקה, הגלובלי שלי הגדרות הקובץ נראה כך:

 / / במקום ההגדרות שלך בקובץ זה כדי להחליף את הגדרות ברירת המחדל "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "אזהרה"

לאחר שמירת השינויים הגדרות קובץ, את המראה של העורך שלי שינוי בבת אחת (על המסך למטה רק את השינוי של משפחת הגופן גלוי):

ניתן לשנות את הגדרות סביבת העבודה באופן דומה. עכשיו אתה צריך ללחוץ על קובץ> העדפות> הגדרות סביבת עבודה בשורת התפריטים העליונה כדי לגשת לסביבת העבודה .vscode / הגדרות קובץ.

להגדרות סביבת העבודה יש ​​בדיוק את אותן הגדרות תצורה כמו 'הגדרות משתמש', וניתן להשתמש באותה טכניקת הדבקה. יש רק שני הבדלים, היקף (מקומי במקום העולמי), ואת הגדרות קובץ שבו תצורות מותאמות אישית שלך יישמרו.