Mpangilio wa Kihariri

Kihariri chako

VS Code 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!

Vihariri vingine vya maandishi maarufu vinavyotumika katika jamii ya React ni pamoja na:

• WebStorm ni mazingira jumuishi ya usanidi yaliyoundwa mahususi kwa ajili ya JavaScript.
• Sublime Text ina msaada wa JSX na TypeScript, uangaziaji wa sintaksi (syntax highlighting) na ukamilishaji wa maneno (autocomplete) uliomo ndani yake.
• Vim 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.

Maumbile ya kihariri cha maandishi yanavyopendekezwa

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!

Linting

Code linters hupata matatizo katika kodi yako unapoandika, zikikusaidia kuyarekebisha mapema. ESLint ni linter maarufu ya chanzo wazi (open source) kwa ajili ya JavaScript.

• Sakinisha ESLint kwa mpangilio uliopendekezwa kwa React (hakikisha una Node imesakinishwa!)
• Unganisha ESLint katika VSCode na kiendelezi rasmi

Hakikisha kuwa umewezesha sheria zote za eslint-plugin-react-hooks kwa mradi wako. Ni muhimu na hugundua makosa makubwa zaidi mapema. Mpangilio wa eslint-config-react-app uliopendekezwa tayari unazijumuisha.

Uumbizaji

Jambo la mwisho unalotaka kufanya unapoandika kodi na mchangiaji mwingine ni kuingia katika mjadala kuhusu tabs vs spaces! Kwa bahati nzuri, Prettier 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.

Unaweza kusakinisha kiendelezi cha Prettier katika VSCode kwa kufuata hatua hizi:

1. Fungua VS Code
2. Tumia Quick Open (bonyeza Ctrl/Cmd+P)
3. Bandika ext install esbenp.prettier-vscode
4. Bonyeza Enter

Kuumbiza wakati wa kuhifadhi

Kwa kweli, unapaswa kuumbiza kodi yako kila unapohifadhi. VS Code ina mipangilio ya hili!

1. Katika VS Code, bonyeza CTRL/CMD + SHIFT + P.
2. Andika “settings”
3. Bonyeza Enter
4. Kwenye sehemu ya utafutaji, andika “format on save”
5. Hakikisha chaguo la “format on save” limewekwa alama ya kuteua (ticked)!

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 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 kwa muunganisho wako unaoendelea (CI).