Editor Setup

Il tuo editor

VS Code è uno degli editor più popolari al momento. Ha un grande marketplace di estensioni e si integra molto bene con servizi popolari come GitHub. Molte delle funzioni elencate di seguito possono essere aggiunte a VS Code come estensioni, rendendolo altamente configurabile!

Altri editor di testo popolari in uso nella comunità React sono:

• WebStorm che è un ambiente integrato di sviluppo progettato specificatamente per JavaScript.
• Sublime Text offre supporto JSX e TypeScript, evidenziazione della sintassi e autocompletamento.
• Vim è un editor di testo altamente configurabile progettato per rendere la modifica di ogni tipo di testo molto efficiente. É incluso nella maggioranza delle distribuzioni UNIX e Apple OS X lanciando il comando “vi”.

Funzioni degli editor di testo raccomandate

Alcuni editor hanno queste funzioni già incluse, altri potrebbero richiedere l’installazione di una estensione. Verifica cosa è supportato dal tuo editor preferito per sicurezza!

Linting

I code linters individuano problemi nel codice man mano che lo si scrive, permettendo di fixarli sul nascere. ESLint è un linter per JavaScript open source molto popolare.

• Installa ESLint con la configurazione raccomandata per React (accertati di avere Node installato!)
• Integra ESLint in VSCode con l’estensione ufficiale

Accertati di aver attivato tutte le regole eslint-plugin-react-hooks per il tuo progetto. Sono essenziali per individuare gravi bugs al più presto possibile. Il preset raccomandato eslint-config-react-app le include già.

Formattazione

L’ultima cosa che vuoi avere quando condividi il tuo codice con un altro collaboratore è una discussione riguardo tabs contro spazi! Fortunatamente, Prettier ripulirà il tuo codice riformattandolo conformemente ad una configurazione presettata. Esegui Prettier, e tutti i tuoi tabs verranno convertiti in spazi e la tua indentazione, virgolette, ecc verranno cambiate a seconda della configurazione. Nel setup ideale, ogni volta che salvi un file, Prettier applicherà queste modifiche per conto tuo automaticamente.

Puoi installare l’estensione Prettier in VSCode seguendo questi passi:

1. Lancia VS Code
2. Usa Quick Open (premendo Ctrl/Cmd+P)
3. Incolla ext install esbenp.prettier-vscode
4. Premi Invio

Formattazione automatica al salvataggio del file

Idealmente, dovresti riformattare il tuo codice ad ogni salvataggio. VS Code ha un settaggio apposito!

1. In VS Code, premi CTRL/CMD + SHIFT + P.
2. Scrivi “settings”
3. Premi Invio
4. Nella barra di ricerca, scrivi “format on save”
5. Accertati che l’opzione “format on save” sia selezionata!

Se il tuo preset ESLint ha regole di formattazione, potrebbero andare in conflitto con Prettier. Ti raccomandiamo di disabilitare tutte le regole di formattazione nel tuo preset ESLint usando eslint-config-prettier facendo si che ESLint venga usato solo per identificare errori. Se vuoi fare in modo che la formattazione sia forzata prima che una pull request sia “merged”, usa prettier --check nella tua pipeline di continuous integration.