21 oktober 2021

React/TypeScript favoriete app setup

Hoe ziet mijn favoriete React/Typescript project eruit? Ik zal je aan de hand van een stapsgewijze handleiding om een nieuw CRA React TypeScript project op te zetten met een custom ESLint configuratie die gebruik maakt van Prettier uitleggen hoe en waarom mijn favoriete app setup er nu precies zo uitziet. Vervolgens zal ik uitleggen hoe je lint-staged en husky kunt gebruiken om pre-commit en pre-push hooks toe te voegen voor linting en het automatisch uitvoeren van tests.

TL;DR

Druk, druk, geen tijd om dit allemaal te gaan lezen? Clone gewoon de bijbehorende git repo en check zelf hoe het allemaal in elkaar zit.

Prettier ≠ ESLint

ESLint en Prettier zijn beide tools die worden gebruikt in de JavaScript wereld om de kwaliteit en consistentie van code te verbeteren, maar ze hebben verschillende doelen en functionaliteiten.

Hoewel ze allebei helpen bij het verbeteren van de code kwaliteit, hebben ESLint en Prettier verschillende functies. ESLint detecteert problemen en fouten in JavaScript code, terwijl Prettier code opmaakt volgens een vooraf gedefinieerde style guide. Het biedt een consistente opmaak voor de code en helpt bij het verminderen van discussies binnen teams.

Beide libraries kunnen volledig geïntegreerd worden in het ontwikkelproces en kunnen waarschuwingen en fouten genereren op basis van configuratie bestanden die onderdeel uitmaken van de codebase.

1. Maak een nieuw React TypeScript project met CRA

Om te beginnen, maak je een nieuw React TypeScript project aan met behulp van Create React App (CRA). Om dit te doen, open je een terminal en voer je het volgende commando uit:

npx create-react-app my-perfect-app --template typescript

Dit maakt een nieuw React TypeScript project aan met de naam my-perfect-app.

2. Installeer ESLint, Prettier en de nodige plugins

Vervolgens moet je ESLint en Prettier installeren, samen met enkele andere ESLint plugins die je zult gebruiken in de configuratie van je project. Om dit te doen, voer je de volgende commando's uit in je terminal om deze npm packages als development dependencies te installeren:

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

npm i -D is gelijk aan npm install --save-dev, maar dan korter.

Hier volgt een korte beschrijving van wat elk van deze packages doet:

eslint de main library voor ESLint.
prettier de main library voor Prettier.
eslint-config-prettier een configuratie die ESLint vertelt om alle regels die strijdig zijn met Prettier uit te schakelen.
eslint-plugin-prettier een plugin die ESLint vertelt om Prettier te gebruiken om de code te formatteren.
eslint-plugin-react een plugin die ESLint specifieke regels geeft voor het werken met React.

3. Maak een ESLint configuratie bestand

Maak nu een .eslintrc.js bestand aan in de hoofdmap van je project en voeg de volgende inhoud toe:

module.exports = {
  extends: ['react-app', 'plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'warn',
  },
};

Desgewenst kun je ook een .eslintrc.json of .eslintrc bestand aanmaken, alleen zijn deze bestanden iets minder handig m.b.t het commenten of hergebruiken van code. Vooral naarmate je project groter wordt en je ESLint configuratie ook groter wordt. Vandaar dat mijn voorkeur een .js bestand geniet.

Hier een korte beschrijving van wat elk van deze items doet:

extends hiermee kun je andere configuratie bestanden uitbreiden. Hier gebruiken we:
- react-app om de standaard instellingen van CRA te krijgen.
- plugin:@typescript-eslint/recommended om aanbevolen regels te krijgen voor het werken met TypeScript.
- prettier om de regels van Prettier te gebruiken.
plugins hiermee kun je plugins voor ESLint configureren. Hier voegen we de Prettier plugin toe.
rules hiermee kun je specifieke regels instellen. Hier stellen we ESLint in om Prettier te gebruiken voor formattering en fouten of waarschuwingen te geven als Prettier ergens tegenaan loopt.

Om de nieuw toegevoegde ESLint configuratie daadwerkelijk effect te laten hebben, dien je de door CRA aan de package.json toegevoegde eslint configuratie te verwijderen. Haal hiervoor de volgende JSON node weg:

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

4. Maak een Prettier configuratie bestand

Maak nu een .prettierrc.js bestand aan in de hoofdmap van je project en voeg de gewenste formatteringsregels toe. Hier is een voorbeeld:

module.exports = {
  singleQuote: true,
  semi: false,
  printWidth: 100,
}

Wederom kun je hier net als voor de ESLint configuratie kiezen voor een .prettierc.json of .prettierrc bestand. Maar om dezelfde reden als bovenstaand en omwille van consistentie kiezen we ook hier voor een .js bestand.

rc staat voor 'runtime configuration'. Het is een conventie om de naam van dit soort bestanden hierop te laten eindigen.

Dit zorgt ervoor dat enkele aanhalingstekens worden gebruikt in plaats van dubbele aanhalingstekens, er geen puntkomma's aan het einde van regels worden toegevoegd en de regel lengte langer kan zijn dan de standaard 80 karakters. Standaard werkt Prettier met een aanbevolen set van regels, zg. defaults, via deze .prettierrc configuratie kun je deze naar eigen smaak overschrijven. Zie voor alle opties prettier.io/docs/en/options.html

5. Installeer lint-staged en husky

Nu kun je lint-staged en husky installeren als development dependencies. Dit zijn twee tools die je kunt gebruiken om pre-commit en pre-push hooks toe te voegen aan je project. Voer het volgende commando uit in je terminal:

npm i -D lint-staged husky

6. Voeg scripts toe aan je package.json

Voeg nu de volgende scripts toe aan het package.json bestand van je project, als ook een lint-staged node:

"scripts": {
  "lint": "eslint src/**/*.{ts,tsx} --fix",
  "test:coverage": "react-scripts test --coverage --watchAll=false",
  "type-check": "tsc -p tsconfig.json --noEmit --incremental",
  "precommit": "lint-staged",
  "prepush": "npm run type-check & npm run test:coverage"
},

"lint-staged": {
  "src/**/*.{ts,tsx}": [
    "eslint --fix"
  ],
  "**/*.md": [
    "prettier --write"
  ]
}

Hier is een korte beschrijving van wat elk van deze scripts doet:

lint dit voert ESLint uit over alle TypeScript bestanden in de src map en past eventuele fixes toe die nodig zijn.
test:coverage dit script runt de standaard CRA test job en genereert eveneens een code coverage rapport.
precommit dit voert lint-staged uit voordat een git commit wordt gemaakt, wat ervoor zorgt dat alle bestanden die zijn gewijzigd, worden ge-lint en gefixeerd voordat ze worden toegevoegd aan de commit.
prepush dit voert de test job met coverage en een TS type-check uit voordat een git push wordt gedaan, wat ervoor zorgt dat alle tests zullen moeten slagen voordat het mogelijk is dat commits naar je git remote worden gepusht.
lint-staged dit configureert lint-staged om ESLint uit te voeren op alle staged (gewijzigde) TypeScript bestanden in de src folder en de wijzigingen toe te voegen aan de commit. Tevens zal het al je Markdown bestanden volgens Prettier defaults formatteren.

7. Voeg de hooks toe aan je git repository

Voer de volgende commando's uit in je terminal om husky te installeren bij elke npm install, door een prepare script toe te voegen aan je package.json en de hooks toe te voegen aan je git repository:

npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npm run precommit"
npx husky add .husky/pre-push "npm run prepush"

Dit configureert husky om de pre-commit en pre-push hooks toe te voegen aan je locally distributed repository, die de linting en tests zullen uitvoeren voordat de code wordt toegevoegd of gepusht.

En dat is het! Je hebt nu een nieuw CRA React TypeScript project opgezet met een custom ESLint configuratie die gebruik maakt van Prettier. Je hebt ook lint-staged en husky toegevoegd om pre-commit en pre-push git hooks toe te voegen voor linting en het uitvoeren van tests. Je bent nu klaar om aan de slag te gaan met het bouwen van je React applicatie met behulp van moderne ontwikkelingspraktijken.

Maar er is nog veel meer mogelijk!

8. Geavanceerde ESLint configuratie opties

Wanneer je in een grote codebase met een hoop developers werkt en niet iedereen dezelfde editor of IDE gebruikt, dan kan het reviewen van code (ook wel MRs of PRs genoemd) veel werk zijn. Als je dan ook nog eens onnodige lines of code moet reviewen die geen functionaliteit wijzigen, maar alleen maar de volgorde van module imports hebben gewijzigd, dan is ESLint zeer handig!

Er is namelijk een ESLint package dat ervoor kan zorgen dat alle import statements ongeacht IDE automatisch op een zelfde manier en volgorde worden afgedwongen, wat voor minder LOC diffs zorgt.

Hoe configureer je dit?

Voeg in je .eslintrc.js aan de extends node de volgende plugin toe: plugin:import/typescript
Eveneens in je .eslintrc.js bestand, voeg je aan de rules node de volgende entries toe

'import/order': [
  'warn',
  {
    'newlines-between': 'always',
    groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
    alphabetize: { order: 'asc', caseInsensitive: true },
  },
  ],
'sort-imports': ['warn', { ignoreCase: true, ignoreDeclarationSort: true }],
'import/no-default-export': ['warn'],

Bekijk het volledige .eslintrc.js bestand met de volledige configuratie hier

Bovenstaande settings zijn naar mijn ervaring in een team vaak de beste settings, waarmee volledig gedefinieerd is hoe imports gedaan worden, ongeacht editor of developer.

Andere handige ESLint rules zijn o.a. no-console en react/jsx-one-expression-per-line, een handige JXS formatting rule om bijv. uit te zetten, naast vele andere JSX rules waarmee je volledig in control bent over hoe je JSX code lines worden geformatteerd.

Zie github.com/karaoak/react-typescript-app-setup voor een applicatie precies opgezet zoals hierboven beschreven (inclusief stap 8) als werkende app.

Projecten

Contact

Over ons

Blog