סקירה: עורכי JavaScript הטובים ביותר

למתכנתים של JavaScript יש כלים רבים וטובים לבחירה - כמעט רבים מכדי לעקוב אחריהם. במאמר זה אני דן בעשרה עורכי טקסט עם תמיכה טובה בפיתוח עם JavaScript, HTML5 ו- CSS ולתיעוד באמצעות Markdown. מדוע להשתמש בעורך לתכנות JavaScript במקום IDE? במילה אחת: מהירות.

ההבדל המהותי בין עורכים ל- IDE הוא בכך ש- IDE יכולים לבצע איתור באגים ולעיתים לפרופיל את הקוד שלך, ול- IDE יש תמיכה במערכות ניהול מחזור חיים של יישומים (ALM). רבים מהעורכים שאנו דנים כאן תומכים לפחות במערכת בקרת גרסאות אחת, לעתים קרובות Git, כך שהקריטריון הוא פחות מבדיל בין IDEs לעורכים ממה שהיה.

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

סביר להניח שתמצא את עורך JavaScript שבחרת בטקסט נשגב, בקוד Visual Studio או בסוגריים. אך למספר כלים אחרים - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs ו- Vim - יש לכולם משהו להמליץ ​​עליהם. בהתאם למשימה העומדת על הפרק, ייתכן שתמצא מישהו מהם שימושי.

סרטון קשור: מה זה JavaScript? היוצר ברנדן אייך מסביר

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

בואו נעבור על האפשרויות ונשווה אותן בסוף.

טקסט נשגב

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

מלבד מהירות, העוצמות הראויות לציון הרבות של טקסט נשגב מכסות תמיכה ביותר מ -70 סוגי קבצים, ביניהם JavaScript, HTML ו- CSS; ניווט כמעט מיידי והחלפת פרויקטים מיידית; בחירות מרובות (בצע חבורה של שינויים בבת אחת), כולל בחירת עמודות (בחר אזור מלבני בקובץ); חלונות מרובים (השתמש בכל המסכים שלך) וחלונות מפוצלים (נצל את הנדל"ן שלך במסך); התאמה אישית מלאה עם קבצי JSON פשוטים; ממשק API של תוסף מבוסס פיתון; ופלטת פקודות מאוחדת וניתנת לחיפוש.

עבור מתכנתים שמגיעים מעריכים אחרים, Text Sublime תומך בחבילות TextMate (לא כולל פקודות) ובאפיון Vi / Vim. התיעוד הלא רשמי של הטקסט הנשגב מעיר הערות מזלזלות (ושגויות) לגבי משתמשי Emacs ( למשל, moi ), אבל אני אעלם מהם. מדוע בכלל קיים התיעוד הלא רשמי של הטקסט הנשגב? ובכן, דבר אחד, התיעוד הרשמי פחות ממלא - הרבה פחות.

כשאמרתי "ניווט כמעט מיידי" קודם, התכוונתי לזה. לדוגמה, כדי לקפוץ מהמיקום הנוכחי על המסך להגדרה getResponseHeaderב- ajax.js, אני יכול להקליד Command-P ב- Mac או Ctrl-P במחשב האישי, ואז ajלפתוח תצוגה חולפת ל- ajax.js, ואז @grhוהזן כדי לפתוח כרטיסייה עם getResponseHeaderנבחר. טקסט נשגב מסוגל לעמוד בקצב ההקלדה שלי. זה מרגיש מגיב כמו כמה מעורכי ה- DOS הוותיקים הטובים ביותר, כמו Brief ו- Kedit.

לאחר שבחרתי  getResponseHeader, אני יכול למצוא את כל השימושים בפונקציה בהקשרם על ידי הקלדת Shift-Command-F ב- Mac, או Shift-Ctrl-F במחשב, ואז Enter. כרטיסייה חדשה תציג לי את תוצאות החיפוש כאשר מונח החיפוש מוסגר בכל קטע של חמש שורות. לחיצה כפולה על טקסט מוסגר מעלה את הקשר הקובץ המלא בכרטיסיה חדשה.

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

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

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

אתה יכול להתאים אישית הכל על טקסט נשגב: ערכת הצבעים, גופן הטקסט, כריכות המקשים הגלובליות, עצירת הלשונית, כריכות המקשים וקטעי הטקסט הספציפיים, ואפילו כללי הדגשת התחביר. ההעדפות מקודדות כקבצי JSON. הגדרות ספציפיות לשפה הן קבצי העדפות XML. קיימת קהילה פעילה סביב Sublime Text שיוצרת ומתחזקת חבילות ותוספים של Sublime Text. תכונות רבות שלתחילה חשבתי שחסר להן טקסט נשגב - כולל ממשקי JSLint ו- JSHint, JsFormat, JsMinify, PrettyJSON ו- Git - מתגלות כזמינות דרך הקהילה, באמצעות Installer Package.

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

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

עלות: תקופת ניסיון ללא הגבלה בחינם; 70 דולר למשתמש לרישיון עסקי או אישי. פלטפורמות: Windows, MacOS ו- Linux.

קוד Visual Studio

קוד Visual Studio הוא עורך וקל משקל בחינם ממיקרוסופט. יש לו רכיבים של Visual Studio, מעורבבים עם מעטפת הקוד הפתוח Atom Electron, המספקים תמיכה מצוינת לפיתוח ASP.Net Core עם C # ולפיתוח Node.js עם TypeScript ו- JavaScript. על פי הדפוס ההיסטורי של מיקרוסופט של תמיכה רק ב- Visual Studio ב- Windows, Visual Studio Code פועל גם ב- MacOS וב- Linux. צילום המסך למטה צולם ב- MacOS.

לקוד Visual Studio יש השלמת קוד JavaScript טובה להפליא, הודות להכללת מהדר TypeScript ומנוע הסלסה. קוד Visual Studio שולח את קוד ה- JavaScript שלך למהדר TypeScript ברקע כדי להסיק סוגי בנייה ולבנות טבלת סמלים. אתה יכול לראות את התוצאות בתיבה בסמוך לתחתית תמונת המסך המציגה את המידע  hasOwnProperty לשיטה.

אותה טבלת סמלים מאפשרת ל- IntelliSense לתת לך רשימות אפשרויות קופצות נהדרות להשלמת קוד לאורך הקלדת הביטוי. אתה מקבל סגירת סוגריים אוטומטית, אפשרויות השלמת מילים אוטומטיות, רשימות שיטות אוטומטיות לאחר הקלדה ., ורשימות פרמטרים אוטומטיות בשיטה. תוכל לשפר את IntelliSense על ידי הוספת הפניות לקבצי d.ts מ-  DefinitelyTypedVisual Studio Code יציע לעשות זאת עבורך כאשר הוא מזהה בעיות נפוצות, כגון השימוש  __dirname, שהוא משתנה מובנה של Node.js.

תמיכה ב- Git טובה מאוד ופשוטה לשימוש. הבאגים של Visual Studio Code מספק חוויית איתור באגים מצוינת לפיתוח Node.js (ופיתוח ASP.Net). לקוד Visual Studio יש כלים טובים מאוד עבור HTML, CSS, Less, Sass ו- JSON, שמבוססת על אותה טכנולוגיה שמפעילה את כלי המפתח של Internet Explorer F12. בנוסף, יש לו אינטגרציה הניתנת להתאמה אישית עם רצי משימות חיצוניים כגון  gulp ו  jake.

קוד Visual Studio משך מערכת אקולוגית חזקה של תוספים - למשל, לתמיכה ב- Angular ו- React. עכשיו זה העורך שאני ממליץ עליו כשאני כותב מדריכים על בניית אפליקציות עם מסגרות וספריות JavaScript ו- TypeScript.

עלות: קוד פתוח בחינם. פלטפורמה: Windows, MacOS ו- Linux.

סוֹגְרַיִם

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

לסוגרים יש תמיכה טובה ב- JavaScript, CSS, HTML ו- Node.js. יש לו גם תכונות נחמדות כגון עריכה מקוונת של CSS הקשורה למזהה HTML (Quick Edit). בנוסף, Brackets כולל ממשק משתמש נקי ותצוגה מקדימה חיה של דפי אינטרנט שאתה עורך. זו בחירה טובה מאוד עבור עורך קוד בחינם.

השלמה אוטומטית של JavaScript בסוגריים טובה מאוד, עם סגירה אוטומטית של סוגריים, סוגריים זוויתיים וסוגריים מרובעים, כמו גם תפריטים נפתחים אוטומטיים למילות מפתח, משתנים ושיטות, כולל שיטות jQuery לאחר הקלדתך $. סוגריים יכולים לשלוט בבאגים של Node.js ולהפעיל מחדש את הצומת מפריט תפריט. קל להוסיף הרחבות לפונקציונליות נוספת כגון תמיכה ב- TypeScript ו- JSX, שילוב Bower ושילוב Git.

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

עלות: קוד פתוח בחינם. פלטפורמות: Windows, MacOS, Linux. 

אָטוֹם

Atom הוא עורך תכנות חופשי ופתוח בקוד פתוח מבית GitHub עבור Windows, MacOS ו- Linux המשתלב באפליקציית GitHub ויש לו אלפי חבילות ועיצובים זמינים. אני מסתדר עם כמה חבילות קהילה, בתוספת חבילות הליבה והנושאים.

לא מפתיע, בהתחשב במקורו, מקור האטום מתארח ב- GitHub. הוא כתוב ב- CoffeeScript ומשולב ב- Node.js. Atom הוא גרסה מיוחדת של Chromium שנועדה להיות עורך טקסט ולא דפדפן אינטרנט; כל חלון Atom הוא בעצם דף אינטרנט שניתן. צוות אטום מפתח את אטום באטום.

הביצועים של אטום די טובים כשאינו מעדכן את עצמו. הוא מוצג באופן מלא מחוץ לקופסה, עם מאתר מטושטש, חיפוש והחלפה מהיר של הפרויקט, מספר סמנים ובחירות, חלונות מרובים, קטעי טקסט, קיפול קוד ויכולת לייבא דקדוקים ונושאים של TextMate. Atom יכולה להתקין שני כלי עזר לשורת הפקודה: Atom להפעיל את העורך ממעטפת, ו- APM לניהול החבילות של Atom, ברוח NPM עבור Node.js. אני מוצא את עצמי משתמש באטום הרבה בעת דפדוף במאגרים ששכפלתי מ- GitHub, מכיוון שיישום GitHub כולל פריט בתפריט ההקשר לשם כך.

עלות: קוד פתוח בחינם. פלטפורמות: Windows, MacOS, Linux.

קומודו עריכה

קומודו עריכה, הגרסה החינמית של ActiveState לפונקציונליות מופחתת של קומודו IDE, היא עורך רב לשוני די טוב. כל מה שהיה לי לומר על Komodo IDE כעורך (ראה "סקירה: 6 IDE הטובים ביותר ב- JavaScript") חל על Komodo Edit.