כיצד להוסיף קטעי קוד מותאמים אישית ל - Atom

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

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

השתמש בקטעי קוד מובנים

כברירת מחדל, Atom מגיע עם קטעי קוד מובנים, שכל אחד מהם הוא קשור לתחום השייכים לסוג קובץ מסוים. לדוגמה, אם אתה עובד על קובץ עם .י , רק קטעי קוד השייכים להיקף JavaScript יהיו זמינים עבור אותו קובץ.

לראות כל קטעי הטקסט הזמינים עבור סוג הקובץ הנוכחי שלך, הקש Alt + Shift + S. אם תבחר קטע מתוך הרשימה הנפתחת ותלחץ עליו, Atom תכניס את קטע הקוד לעורך שלך ללא כל טרחה נוספת.

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

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

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

אם אתה לא רוצה להטריד עם הרשימה הנפתחת, אתה יכול להשיג את אותה תוצאה על ידי הקלדת h1, ו להכות Tab או Enter - שני המפתחות האלה הכנס את קטע הקוד המלא השייכים לקידומת של קטע הקוד.

הוספת קטעי הקוד המותאמים אישית שלך

1. אתר את קובץ ההגדרות

כדי להוסיף קטעי קוד מותאמים אישית ל- Atom, תחילה עליך למצוא את קובץ תצורה שנקרא snippets.cson זה סימון אובייקט קובץ.

הקלק על ה קובץ> קטעי טקסט ... בתפריט בסרגל העליון, ו Atom יפתח את snippets.cson קובץ שאליו תוכל להוסיף קטעי טקסט מותאמים אישית משלך.

2. מצא את היקף הנכון

אתה תצטרך ארבעה דברים כדי להוסיף את קטע הקוד המותאם אישית שלך:

1. ה שם ההיקף
2. ה שם קטע הטקסט
3. ה קידומת זה יפעל כמו הידית של קטע
4. ה הגוף של קטע הקוד

השם, הקידומת וגוף קטע הקוד (2-4) תלויים אך ורק בך, אך עליך מצא את שם ההיקף (1) לפני הוספת קטעי הטקסט המותאמים אישית שלך.

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

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

הנה כמה סקופים ייתכן שתרצה להשתמש בפרויקטים Atom שלך:

• טקסט רגיל: .טקסט
• HTML: .text.html.basic
• CSS you .מקור
• סאס: .מקור
• פחות: .מקור
• JavaScript .מקור
• PHP you .text.html.php
• Python: .source.python
• Java you .מקור

אל תשכח כי תצטרך הוסף נקודה (.) לפני שם ההיקף על מנת להשתמש בו snippets.cson קובץ.

3. יצירת קטעי קוד יחיד

ליצור קטע קוד יחיד, אתה צריך להוסיף את היקף, את השם, את הקידומת, ואת הגוף של קטע את snippets.cson , באמצעות התחביר הבא:

 '.text.html.basic': 'כותרת יישומון': 'קידומת': 'wti' body ':'' 

קטע טקסט זה מוסיף a

התג עם widget-title מחלקה ל- HTML. ניתן להוסיף כל קטע קוד אחר של שורה בודדת לעורך Atom בהתאם לתחביר זה.

לאחר שמירת קובץ ההגדרות, בכל עת הקלד את הקידומת ולחץ על מקש Tab, Atom תדביק את קטע קטע הקוד לעורך הקוד שלך. שם הקטע (בדוגמה כותרת יישומון) יוצג בתיבה תוצאות ההשלמה האוטומטית.

4. יצירת ריבוי שורות קוד

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

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

 '' קישור ':' 'iml' '': '' 
    
 "" 

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

 '.text.html.basic': 'כותרת יישומון': 'קידומת': 'wti' body ':'"קישור תמונה": '' קידומת ':' 'iml' ': "" 
    
 "" 

5. הוסף טאב מפסיק

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

ניתן להוסיף עצירות טאב משתמש ב $ 1, $ 2, $ 3, ... תחביר. אטום ימקם את הסמן למקום שהוא מוצא $ 1, אז אתה יכול לקפוץ $ 2 עם מקש Tab, ולאחר מכן אל $ 3, וכן הלאה.

 '' קישור ':' 'iml' '': '' 
    
 "" 

6. הוסף פרמטרים אופציונליים

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

ערכי הפרמטרים האופציונליים הם מוצג בתיבה תוצאות השלמה אוטומטית שעולה כאשר אתה מתחיל להקליד קידומת. בדוגמה הבאה, הוספתי תיאור & a יותר… קישור הקודם כותרת יישומון קטע טקסט מותאם אישית:

 '.text.html.basic': 'כותרת יישומון': 'קידומת': 'wti' body ':'"description": "אתה יכול להוסיף כותרת יישומון עם קטע זה אל יישומון הצד שלך." descriptionMoreURL ':' http://hongkiat.com ' 

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