Postavka Radnog okruženja (Editora)

Vaš editor

VS Code je jedan od najpopularnijih editora koji se koriste danas. Ima veliko tržište ekstenzija i dobro se integriše sa popularnim servisima kao što je GitHub. Većina funkcija navedenih ispod mogu se dodati u VS Code kao ekstenzije, što ga čini visoko konfigurabilnim!

Drugi popularni editori koji se koriste u React zajednici su:

• WebStorm je integrisano razvojno okruženje dizajnirano posebno za JavaScript.
• Sublime Text ima ugrađenu podršku za JSX i TypeScript, podršku za sintaksu i automatsko završavanje.
• Vim je visoko konfigurabilan tekst editor napravljen da pravljenje i menjanje bilo kog tipa teksta bude veoma efikasno. Uključen je kao “vi” sa većinom UNIX sistema i sa Apple OS X.

Preporučene funkcije editora

Neki editori dolaze sa ugrađenim funkcijama, dok drugi zahtevaju dodavanje ekstenzija. Proverite koje funkcije podržava vaš editor koji ste izabrali!

Linting

Linting alati pronalaze probleme u vašem kodu dok ga pišete, pomažući vam da ih ispravite na vreme. ESLint je popularan open source linter za JavaScript.

• Instalirajte ESLint sa preporučenom konfiguracijom za React (budite sigurni da imate Node instaliran!)
• Integrišite ESLint u VSCode sa zvaničnom ekstenzijom

Budite sigurni da ste omogućili sva eslint-plugin-react-hooks pravila za vaš projekat. Oni su esencijalni i hvataju najozbiljnije greške na vreme. Preporučena eslint-config-react-app konfiguracija već ih uključuje.

Formatiranje

Poslednja stvar koju želite da radite kada delite vaš kod sa drugim saradnicima je da se upustite u diskusiju o tabovima i razmacima! Srećom, Prettier će očistiti vaš kod tako što će ga preformatirati u skladu sa unapred podešenim, konfigurabilnim pravilima. Pokrenite Prettier i svi vaši tabovi će biti konvertovani u razmake - i vaša uvlačenja, navodnici, itd. će takođe biti promenjeni u skladu sa konfiguracijom. U idealnom slučaju, Prettier će se pokrenuti kada sačuvate vaš fajl, brzo praveći ove izmene za vas.

Možete instalirati Prettier ekstenziju u VSCode prateći ove korake:

1. Pokrenite VS Code
2. Koristite Brzo otvaranje (pritisnite Ctrl/Cmd+P)
3. Zalepite ext install esbenp.prettier-vscode
4. Pritisnite Enter

Formatiranje pri čuvanju

Idealno, trebalo bi da formatirate vaš kod pri svakom čuvanju. VS Code ima podešavanja za ovo!

1. U VS Code, pritisnite CTRL/CMD + SHIFT + P.
2. Ukucajte “settings”
3. Pritisnite Enter
4. U pretraživaču, ukucajte “format on save”
5. Budite sigurni da je “format on save” opcija označena!

Ako vaš ESLint preset ima pravila za formatiranje, ona mogu biti u konfliktu sa Prettier-om. Preporučujemo da onemogućite sva pravila za formatiranje u vašem ESLint preset-u koristeći eslint-config-prettier tako da ESLint bude samo korišćen za hvatanje logičkih grešaka. Ako želite da primoravate da se fajlovi formatiraju pre nego što se spoje u glavnu granu, koristite prettier --check za vašu kontinuiranu integraciju.