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

העורך שלך

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

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

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

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

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

מוך

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

• התקן ESLint עם האופציות המומלצות לריאקט (וודא שיש לך Node מותקן!)
• שלבו את ESLint ב-VS Code עם התוסף הרשמי

ודאו הפעלתם את הכללים של eslint-plugin-react-hooks בפרויקט שלכם. הכללים האלה חיוניים ותופסים באגים חמורים קודם. המומלץ המוגדר מראש eslint-config-react-app כבר כולל אותם.

עיצוב

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

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

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

עיצוב בשמירה

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

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

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