|
1 | 1 | --- |
2 | | -title: Editor Setup |
| 2 | +title: התקנת עורך קוד |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <Intro> |
6 | 6 |
|
7 | | -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. |
8 | | - |
| 7 | +עורך קוד שמקונפג כראוי עוזר לקרוא ולכתוב קוד בקלות ובמהירות. בנוסף הוא יכול לעזור לנו לתפוס באגים בזמן שאנחנו כותבים אותם! אם זאת הפעם הראשונה שאתה מתקין עורך קוד או שאתה מחפש לשפר את שלך, יש לנו כמה המלצות. |
| 8 | + |
9 | 9 | </Intro> |
10 | 10 |
|
11 | 11 | <YouWillLearn> |
12 | 12 |
|
13 | | -* What the most popular editors are |
14 | | -* How to format your code automatically |
| 13 | +* אילו עורכי קוד הם הכי פופולריים |
| 14 | +* איך לסדר את הקוד שלך אוטומטית |
15 | 15 |
|
16 | 16 | </YouWillLearn> |
17 | 17 |
|
18 | | -## Your editor {/*your-editor*/} |
| 18 | +## העורך שלך {/*your-editor*/} |
19 | 19 |
|
20 | | -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! |
| 20 | +אחד מעורכי הקוד הפופולריים ביותר (אם לא הכי) הוא [VS Code](https://code.visualstudio.com/). יש לו תוספים רבים שניתן להתקין והוא מתממשק טוב עם שירותים כמו גיטהאב. ניתן להוסיף את רוב הפיצ׳רים הכתובים כאן בהמשך ל-VS Code כתוספים. |
21 | 21 |
|
22 | | -Other popular text editors used in the React community include: |
| 22 | +עורכי קוד נוספים שמשתמשים בהם בקהילת ריאקט כוללים: |
23 | 23 |
|
24 | | -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. |
25 | | -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. |
26 | | -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. |
| 24 | +* וובסטורם - [WebStorm](https://www.jetbrains.com/webstorm/) הוא סביבת פיתוח שעוצבה במיוחד לפיתוח בעזרת JavaScript. |
| 25 | +* סאבליים טקסט - [Sublime Text](https://www.sublimetext.com/) תומך ב-syntax highlighting של JSX ו-TypeScript. |
| 26 | +* וים - [Vim](https://www.vim.org/) הוא עורך קוד גמיש מאוד שנבנה על מנת לאפשר פיתוח מהיר. הוא כלול ברוב מערכות ההפעלה מבוססות Unix וב-MacOS. |
27 | 27 |
|
28 | | -## Recommended text editor features {/*recommended-text-editor-features*/} |
| 28 | +## פיצ׳רים מומלצים בעורכי קוד {/*recommended-text-editor-features*/} |
29 | 29 |
|
30 | | -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! |
| 30 | +חלק מעורכי הקוד מגיעים עם פיצ׳רים אלה ישר מהקופסה, אבל אחרים דורשים את הוספתם באמצעות תוסף. בדוק מה מובנה בעורך הקוד שלך ליתר ביטחון. |
31 | 31 |
|
32 | 32 | ### Linting {/*linting*/} |
33 | 33 |
|
34 | | -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. |
| 34 | +לינטרים מוצאים בעיות בקוד שלך בזמן שאתה כותב אותו, מה שמאפשר תיקון מוקדם. לינטר פופולרי ומומלץ הוא [ESLint](https://eslint.org/). |
35 | 35 |
|
36 | | -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) |
| 36 | +* [התקן ESLint עם האופציות המומלצות לריאקט](https://www.npmjs.com/package/eslint-config-react-app) (וודא שיש לך [Node מותקן!](https://nodejs.org/en/download/current/)) |
37 | 37 | * [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
38 | 38 |
|
39 | 39 | **Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them. |
40 | 40 |
|
41 | 41 | ### Formatting {/*formatting*/} |
42 | 42 |
|
43 | | -The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. |
| 43 | +הדרך האחרון שאתה רוצה כשאתה משתף קוד עם מפתח אחר הוא להיכנס לוויכוח [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces). למזלנו, [prettier](https://prettier.io/)) ינקה את הקוד שלך על ידי התאמתו לחוקים קיימים. בעת הרצת prettier, כל ה-tabs יהפכו ל-spaces, וגרשיים כפולים או יחידים ישונו בהתאם לקונפיגורציה. בסביבת פיתוח אידיאלית, Prettier ירוץ בעת שמירת קובץ, ויעשה את כל השינויים הללו אוטומטית. |
44 | 44 |
|
45 | | -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: |
| 45 | +ניתן להתקין את Prettier ב[VS Code](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) בעזרת הצעדים הבאים: |
46 | 46 |
|
47 | | -1. Launch VS Code |
48 | | -2. Use Quick Open (press Ctrl/Cmd+P) |
49 | | -3. Paste in `ext install esbenp.prettier-vscode` |
50 | | -4. Press Enter |
| 47 | +1. פתח את VS Code |
| 48 | +2. הרץ את Quick Open (בעזרת Ctrl/Cmd+p) |
| 49 | +3. הדבק בפנים את `ext install esbenp.prettier-vscode` |
| 50 | +4. לחץ Enter |
51 | 51 |
|
52 | 52 | #### Formatting on save {/*formatting-on-save*/} |
53 | 53 |
|
54 | | -Ideally, you should format your code on every save. VS Code has settings for this! |
| 54 | +באופן אידיאלי, כדאי לאפשר לתוסף לסדר את הקוד בכל שמירת קובץ. מזל ש-VS Code מאפשר לנו את זה! |
55 | 55 |
|
56 | | -1. In VS Code, press `CTRL/CMD + SHIFT + P`. |
57 | | -2. Type "settings" |
58 | | -3. Hit Enter |
59 | | -4. In the search bar, type "format on save" |
60 | | -5. Be sure the "format on save" option is ticked! |
| 56 | +1. ב-VS Code, לחץ `CTRL/CMD + SHIFT + P`. |
| 57 | +2. כתוב "settings" |
| 58 | +3. לחץ Enter |
| 59 | +4. בשורת החיפוש, כתוב "format on save" |
| 60 | +5. וודא כי האופצייה "format on save" מסומנת |
61 | 61 |
|
62 | | -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. |
| 62 | +> אם קונפיג הESLint שלך מכיל חוקים שקשורים לסידור קוד, הם עלולים להתנגש עם Prettier. אנחנו ממליצים לכבות את חוקים אלו בקונפיג הESLint שלך באמצעות [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier), ככה שESLint עובד רק על מנת לתפוס שגיאות לוגיות. אם אתה רוצה להחיל סידור קוד לפני מירג׳וג׳ PR, השתמש ב-[`prettier --check`](https://prettier.io/docs/en/cli.html#--check) ב-CI שלך. |
0 commit comments