Editorin asentaminen

Editorisi

VS Code on yksiä suosituimpia editoreita käytössä nykypäivänä. Sillä on suuri kauppa lisäosille ja se integroituu hyvin suosittujen palveluiden kuten GitHubin kanssa. Useimmat alla olevista ominaisuuksista voidaan lisätä VS Codeen lisäosina, joka tekee siitä todella konfiguroitavan!

Muita suosittuja tekstieditoreita React-yhteisössä ovat muun muassa:

• WebStorm on IDE ohjelmointiympäristö suunniteltu erityisesti JavaScriptille.
• Sublime Text editorissa on tuki JSX:lle sekä TypeScriptille, syntaksin korostus ja sisäänrakennettu automaattinen täydennys.
• Vim on laajasti konfiguroitava tekstieditori, joka tekee tekstin luomisesta ja muokkaamisesta tehokasta. Useissa UNIX ja Applen macOS järjestelmissä se tulee mukana “vi” komentona.

Suositellut tekstieditoreiden ominaisuudet

Joissain editoreissa nämä ominaisuudet tulevat sisäänrakennettuna, mutta jotkin saattavat tarvita lisäosan. Tarkista millaista tukea editorisi tarjoaa ollaksesi varma!

Lintterit

Koodilintterit taikka “nukan poistajat” etsivät ongelmia koodistasi kun kirjoitat, auttaen korjaamaan ne ajoissa. ESLint on suosittu, avoimen lähdekoodin lintteri JavaScriptille.

• Asenna ESLint suositelluilla määrityksillä Reactille (tarkista, että sinulla on Node asennettuna!)
• Integroi ESLint VSCodeen virallisella lisäosalla

Varmista, että olet ottanut käyttöön kaikki eslint-plugin-react-hooks säännöt projektillesi. Ne ovat olennaisia ja nappaavat vakavimmat bugit ajoissa. Suositeltu eslint-config-react-app esiasetus sisältää ne valmiiksi.

Muotoilu

Vihoviimeinen asia on joutua keskustelemaan toisen kehittäjän kanssa aihesta sarkain vs välilyönti! Onneksi Prettier siivoaa koodisi uudelleen muotoilemalla sen pitäytymään muutettaviin esimääriteltyihin sääntöihin. Suorita Prettier ja kaikki välilehtesi muutetaan välilyönneiksi-ja kaikki sisennykset, lainausmerkit, jne tulee muuttumaan konfiguraation mukaiseksi. Ihanteellisessa tilanteessa Prettier suoritetaan kun tallennat tiedostosi, nopeasti tehden nämä muutokset sinulle.

Voit asentaa Prettier lisäosan VSCodeen seuraamalla näitä vaiheita:

1. Käynnistä VS Code
2. Käytä Quick Open -ominaisuutta (paina CTRL/CMD + P)
3. Liitä ext install esbenp.prettier-vscode
4. Paina rivinvaihtoa

Muotoilun muutos tallentaessa

Ihannetilanteessa sinun pitäisi muotoilla koodisi jokaisen tallennuksen yhteydessä. VS Codessa on asetus tätä varten!

1. VS Codessa, paina CTRL/CMD + SHIFT + P.
2. Kirjoita “settings”
3. Paina rivinvahtoa
4. Hakupalkissa, hae “format on save”
5. Varmista, että “format on save” vaihtoehto on valittuna!

Jos ESLint säännöissäsi on muotoilusääntöjä, ne voivat olla ristiriidassa Prettierin kanssa. Suosittelemme poistamaan käytöstä kaikki ESLint muotoilusäännöt käyttämällä eslint-config-prettier, jotta ESLint on ainoastaan käytössä logiikkavirheiden etsimiseen. Jos haluat pakottaa, että tiedostot muotoillaan ennen kuin pull request yhdistetään, käytä prettier --check komentoa continuous integration -työkalussasi.