התקנת עורך קוד

העורך שלך

אחד מעורכי הקוד הפופולריים ביותר (אם לא הכי) הוא VS Code. יש לו תוספים רבים שניתן להתקין והוא מתממשק טוב עם שירותים כמו גיטהאב. ניתן להוסיף את רוב הפיצ׳רים הכתובים כאן בהמשך ל-VS Code כתוספים.

עורכי קוד נוספים שמשתמשים בהם בקהילת ריאקט כוללים:

• וובסטורם - WebStorm הוא סביבת פיתוח שעוצבה במיוחד לפיתוח בעזרת JavaScript.
• סאבליים טקסט - Sublime Text תומך ב-syntax highlighting של JSX ו-TypeScript.
• וים - Vim הוא עורך קוד גמיש מאוד שנבנה על מנת לאפשר פיתוח מהיר. הוא כלול ברוב מערכות ההפעלה מבוססות Unix וב-MacOS.

פיצ׳רים מומלצים בעורכי קוד

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

Linting

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

• התקן ESLint עם האופציות המומלצות לריאקט (וודא שיש לך Node מותקן!)
• Integrate ESLint in VSCode with the official extension

Make sure that you’ve enabled all the eslint-plugin-react-hooks rules for your project. They are essential and catch the most severe bugs early. The recommended eslint-config-react-app preset already includes them.

Formatting

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

ניתן להתקין את Prettier בVS Code בעזרת הצעדים הבאים:

1. פתח את VS Code
2. הרץ את Quick Open (בעזרת Ctrl/Cmd+p)
3. הדבק בפנים את ext install esbenp.prettier-vscode
4. לחץ Enter

Formatting on save

באופן אידיאלי, כדאי לאפשר לתוסף לסדר את הקוד בכל שמירת קובץ. מזל ש-VS Code מאפשר לנו את זה!

1. ב-VS Code, לחץ CTRL/CMD + SHIFT + P.
2. כתוב “settings”
3. לחץ Enter
4. בשורת החיפוש, כתוב “format on save”
5. וודא כי האופצייה “format on save” מסומנת

אם קונפיג הESLint שלך מכיל חוקים שקשורים לסידור קוד, הם עלולים להתנגש עם Prettier. אנחנו ממליצים לכבות את חוקים אלו בקונפיג הESLint שלך באמצעות eslint-config-prettier, ככה שESLint עובד רק על מנת לתפוס שגיאות לוגיות. אם אתה רוצה להחיל סידור קוד לפני מירג׳וג׳ PR, השתמש ב-prettier --check ב-CI שלך.