תוספים מומלצים ל-Sublime Text 3

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

במאמר זה אמליץ על תוספים אשר אני משתמש איתם בפיתוח השותף שלי ואני חושב שהם יכולים להועיל לכם בעבודת הפיתוח היומיומית. Sublime Text הוא כלי העבודה המרכזי והעיקרי שלי, בין אם אני מפתח Front-End או Back-End הוא הבחירה מושלמת שיש.

אודות Sublime Text

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

ל-Sublime Text 3 יש כיום מעל ל-3,500 הרחבות אשר מרחיבות את היכולות של העורך, החל משינוי העיצוב של העורך, הוספת Snippets, ניהול פרוייקטים והיד עוד נטויה.

איך מתקינים תוספים ב-Sublime Text 3?

לפני נדבר על התוספים, קודם נסביר איך מתקינים מנהל חבילות (Package Manager) ל-Sublime Text על מנת להקל על תהליך ההתקנה וההסרה של תוספים.

ראשית, נכנס לתוכנה ונלחץ Ctrl + ` או Control + `, ובחלונית הקטנה שנפתחה בתחתית המסך נדביק את הקוד הבא ונלחץ Enter.
במידה והקוד הנ״ל לא עובד לכם, דאגו לקחת את הקוד החדש מהעמוד הרישמי של Package Manager.

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

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

כעת, לאחר שהתקנו את המנהל חבילות, נלחץ על Ctrl + Shift + P או Command + Shift + P ונקליד Install ונבחר באופציה Package Control: Install Package על מנת להתקין את התוסף שאנחנו רוצים, בחלונית שתפתח נקליד את שם התוסף, נבחר אותו מהרשימה ונלחץ על Enter ונמתין מספר שניות לסיום ההתקנה.

תוספים ל-Sublime Text 3

Material Theme

התוסף הראשון שנדבר עליו הוא בעצם תבנית עיצוב שטוחה (Flat) אשר מממשת את הגדרות ה-Material Design מבית Google. לאחר התקנת התבנית יש להפעיל את התבנית ע״י ניתוב בתפריטים:

• Windows // ננווט ל- Preferences > Color Scheme > Material Theme > schemes ונבחר ב-Material-Theme.
• Mac // הניווט דומה אך יש לבחור קודם בתפריט Sublime Text.

All Autocomplete

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

AngularJS

תוסף אשר מוסיף קטעי קוד (Snippets) של AngularJS, איתם ניתן לעבוד יותר בקלות עם הספרייה וגם מגביר את יכולת ההשלמה האוטומטית.

AutoFileName

תוסף חיוני אשר מאפשר לעורך תוכן להשלים שמות קבצים ונתיבים, לדוגמא, כאשר כותבים תגית <img> ומגיעים ל-src="", העורך תוכן יציג את רשימת הקבצים והתיקיות אשר נמצאים במיקום של הקובץ הנוכחי ויעזור לכם לרשום את הנתיב של הקובץ אותו אתם מחפשים.

AutoSpell

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

BracketHighlighter

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

Default File Type

תוסף אשר יודע לצבוע את הקוד ולבחור את ה-Syntax לפי סיומת הקובץ בצורה אוטומטית, משהו שלא מאופשר בברירת המחדל ב-Sublime Text.

Diffy

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

Emmet

למי שעדיין לא מכיר את Emmet (לשעבר Zen Code), זאת שיטה אשר מאפשרת לכתוב קוד HTML ו-CSS מקוצר, וע"י הקשה של Tab, התוסף הופך את זה ל-HTML ו-CSS רגיל.

Gutter Color

תוסף קליל ופשוט אשר מציג את הצבע שהוקש בקבצי CSS ליד המספר שורה של הצבע, כלומר, אם ב-CSS רשמנו red או #0df603, הצבע יופיע בצד של השורה כך נוכל לדעת מה הצבע.

Placeholders

תוסף אשר מאפשר להטמיע טקסט Lorem Ipsum בצורה מהירה בתור Placeholder, כך נוכל לראות איך יראה העיצוב שלנו עם כמות שונה של טקסטים.

Pretty JSON

תוסף אשר מוסיף את האפשרות להציג את ה-Syntax של קבצי JSON בצורה נוחה ע"י צביעת הטקסט.

SASS Build

תוסף אשר מאפשר ל-Sublime Text לקמפל קבצי SASS ו-SCSS בצורה אוטומטית, דבר אשר חוסף שימוש בתוכנה חיצונית או ב-CLI.

Sidebar Enhancements

תוסף אשר נותן ל-Sidebar של Sublime Text כוח רב יותר ע״י הוספה של פקודות לתפריט הפעולות כגון העברה, פתיחה בתוכנות חיצוניות וכד׳.

SublimeOnSaveBuild

תוסף אשר מבצע את פעולת ה-Build בצורה אוטומטית כאשר שומרים קובץ, מאוד שימושי כאשר עובדים עם קבצי SASS או כאשר עובדים עם JSHint וכד׳.

TodoReview

תוסף אשר מאפשר לשים הערות בסגנון <!--- TODO: bla bla --> בקוד וע"י בחירה בהצגה, לקבל את כל המשימות ששמתם לעצמכם בקוד במסד אחד עם קישורים לקבצים הרלוונטיים.

WordHighlight

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

WordPress

תוסף אשר נותן ל-Sublime Text את האפשרות להשלים את הקוד שאתם כותבים ע"י הצגה של פונקציות WordPress והפרמטרים שהן מקבלות.

סיכום

ישנם המון תוספים ל-Sublime Text, ומידי יום מתפרסמים עוד ועוד, תוספים אלו הפכו את Sublime Text לאחד מעורכי הקוד הפופלריים והחזקים שיש כיום. מזמין אתכם לחפש תוספים נוספים ולקסטם את Sublime Text כאוות נפשכם.

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