|
1 | 1 | --- |
2 | | -title: Editor Setup |
| 2 | +title: Mpangilio wa Kihariri |
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. |
| 7 | +Kihariri kilichosawazishwa vizuri kinaweza kufanya kodi iwe rahisi kusoma na haraka kuandika. Inaweza hata kukusaidia kugundua makosa unapoandika! Ikiwa ni mara yako ya kwanza kupanga kihariri au unatafuta kuboresha kihariri chako cha sasa, tuna mapendekezo machache. |
8 | 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 | +* Vihariri maarufu zaidi ni vipi |
| 14 | +* Jinsi ya kupanga muundo wa kodi yako kiotomatiki |
15 | 15 |
|
16 | 16 | </YouWillLearn> |
17 | 17 |
|
18 | | -## Your editor {/*your-editor*/} |
| 18 | +## Kihariri chako {/*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/) ni moja ya vihariri maarufu zaidi vinavyotumika leo. Ina soko kubwa la viendelezi na inaingiliana vizuri na huduma maarufu kama GitHub. Nyingi ya maumbili yalivyoorodheshwa hapa chini yanaweza kuongezwa kwenye VS Code kama viendelezi pia, na kuifanya iwe rahisi sana kuisuka! |
21 | 21 |
|
22 | | -Other popular text editors used in the React community include: |
| 22 | +Vihariri vingine vya maandishi maarufu vinavyotumika katika jamii ya React ni pamoja na: |
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/) ni mazingira jumuishi ya usanidi yaliyoundwa mahususi kwa ajili ya JavaScript. |
| 25 | +* [Sublime Text](https://www.sublimetext.com/) ina msaada wa JSX na TypeScript, [uangaziaji wa sintaksi](https://stackoverflow.com/a/70960574/458193) (syntax highlighting) na ukamilishaji wa maneno (autocomplete) uliomo ndani yake. |
| 26 | +* [Vim](https://www.vim.org/) ni kihariri cha maandishi kinachoweza kusukwa sana kilichoundwa ili kufanya uundaji na ubadilishaji wa aina yoyote ya maandishi kuwa wenye ufanisi mkubwa. Inajumuishwa kama "vi" kwenye mifumo mingi ya UNIX na Apple OS X. |
27 | 27 |
|
28 | | -## Recommended text editor features {/*recommended-text-editor-features*/} |
| 28 | +## Maumbile ya kihariri cha maandishi yanavyopendekezwa {/*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 | +Baadhi ya vihariri huja na maumbile haya yakiwa yamejengwa ndani, lakini vingine vinaweza kuhitaji kuongeza kiendelezi. Angalia msaada unaotolewa na kihariri chako unachopendelea ili kuwa na uhakika! |
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 | +Code linters hupata matatizo katika kodi yako unapoandika, zikikusaidia kuyarekebisha mapema. [ESLint](https://eslint.org/) ni linter maarufu ya chanzo wazi (open source) kwa ajili ya JavaScript. |
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/)) |
37 | | -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
| 36 | +* [Sakinisha ESLint kwa mpangilio uliopendekezwa kwa React](https://www.npmjs.com/package/eslint-config-react-app) (hakikisha una [Node imesakinishwa!](https://nodejs.org/en/download/current/)) |
| 37 | +* [Unganisha ESLint katika VSCode na kiendelezi rasmi](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
38 | 38 |
|
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. |
| 39 | +**Hakikisha kuwa umewezesha sheria zote za [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) kwa mradi wako.** Ni muhimu na hugundua makosa makubwa zaidi mapema. Mpangilio wa [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) uliopendekezwa tayari unazijumuisha. |
40 | 40 |
|
41 | | -### Formatting {/*formatting*/} |
| 41 | +### Uumbizaji {/*formatting*/} |
42 | 42 |
|
43 | | -The last thing you want to do when sharing your code with another contributor is get into a 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 | +Jambo la mwisho unalotaka kufanya unapoandika kodi na mchangiaji mwingine ni kuingia katika mjadala kuhusu [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Kwa bahati nzuri, [Prettier](https://prettier.io/) itasafisha kodi yako kwa kuiumbiza upya ili kufuata sheria zilizowekwa. Endesha Prettier, na tabo zako zote zitabadilishwa kuwa nafasi (spaces)—na mpangilio wako, alama za nukuu, n.k. pia zitabadilishwa ili kufuata usanidi. Katika mpangilio bora, Prettier itaendesha unapohifadhi faili yako, ikikufanyia marekebisho haya haraka. |
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 | +Unaweza kusakinisha [kiendelezi cha Prettier katika VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) kwa kufuata hatua hizi: |
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. Fungua VS Code |
| 48 | +2. Tumia Quick Open (bonyeza Ctrl/Cmd+P) |
| 49 | +3. Bandika `ext install esbenp.prettier-vscode` |
| 50 | +4. Bonyeza Enter |
51 | 51 |
|
52 | | -#### Formatting on save {/*formatting-on-save*/} |
| 52 | +#### Kuumbiza wakati wa kuhifadhi {/*formatting-on-save*/} |
53 | 53 |
|
54 | | -Ideally, you should format your code on every save. VS Code has settings for this! |
| 54 | +Kwa kweli, unapaswa kuumbiza kodi yako kila unapohifadhi. VS Code ina mipangilio ya hili! |
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. Katika VS Code, bonyeza `CTRL/CMD + SHIFT + P`. |
| 57 | +2. Andika "settings" |
| 58 | +3. Bonyeza Enter |
| 59 | +4. Kwenye sehemu ya utafutaji, andika "format on save" |
| 60 | +5. Hakikisha chaguo la "format on save" limewekwa alama ya kuteua (ticked)! |
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 | +> Ikiwa mpangilio wako wa ESLint una sheria za uumbizaji, zinaweza kugongana na Prettier. Tunapendekeza kulemaza sheria zote za uumbizaji katika mpangilio wako wa ESLint ukitumia [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) ili ESLint itumike *tu* kwa ajili ya kugundua makosa ya kimantiki. Ikiwa unataka kuhakikisha kuwa faili zimeumbizwa kabla ya pull request kuunganishwa, tumia [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) kwa muunganisho wako unaoendelea (CI). |
0 commit comments