Wiederkehrende Aufgaben automatisieren
Die Vorlesungen und Kurse, die ich als Dozent bzw. Trainer gebe, behandeln die Entwicklung von Apps mit React Native, Expo und JavaScript. Code-Beispiele und Live-Coding-Sessions sind dabei ein wichtiger Bestandteil der Wissensvermittlung. Daher erstelle ich sehr oft Beispiel-Projekte und zeige dann in diesen Projekten bestimmte Aspekte der App-Entwicklung mit React Native und Expo. Die Erstellung neuer Projekte erfolgt über die das CLI-Tool create-expo-app:
npx create-expo-app my-app
Nachdem das Projekt erstellt wurde, gibt es noch ein paar Dinge zu tun, bevor ich in die eigentliche Entwicklung bzw. Coding-Session einsteige:
- Einen Linter für JavaScript installieren und konfigurieren, um während der Entwicklung direkt auf mögliche (Tipp-)Fehler oder Unsauberkeiten hingewiesen zu werden.
- Einen Code-Formatierer installieren und konfigurieren, um stets einen einheitlichen formatierten Quellcode zu haben, der gut lesbar ist.
Für meine Arbeit nutze ich ESLint als Linter und Prettier für die Code-Formatierung. Beide Tools lassen sich bspw. per npm installieren und anschließend über eine Konfigurationsdatei an die eigenen Bedürfnisse anpassen. Da diese Installation und Konfiguration jedoch stets ein paar manuelle Schritte und etwas Zeit erfordern, habe ich mir für meine Arbeit in kleines Skript geschrieben, dass diese Aufgaben automatisiert ausführt.
Ein Shell-Skript zur Automatisierung
Nach der Erstellung eines neuen Projektes mittels create-expo-app kann ich das Skript folgendermaßen aufrufen:
curl -s "https://raw.githubusercontent.com/rbrki07/create-expo-app-post-setup/main/run.sh" | bash
Das Skript erledigt folgende Aufgaben automatisiert:
- Es installiert eslint, eslint-config-universe, eslint-plugin-react-native und eslint-plugin-jest per npm. Anschließend lädt es die vorbereitete Konfigurationsdatei .eslintrc.json.
- Es installiert prettier und lädt die vorbereitete Konfigurationsdatei .prettierrc.json.
- Da ich bei meiner Arbeit VS Code verwende, lädt das Skript im letzten Schritt zwei VS-Code-spezifische Konfigurationsdateien:
- settings.json: Setzt Prettier als Default-Formatierer und konfiguriert die automatische Formatierung des Quellcodes beim Speichern einer Datei.
- extensions.json: Schlägt zwei VS-Code-Plugins für ESLint und Prettier vor, die die Integration mit VS Code umsetzen.
Fazit
Mit Hilfe des Shell-Skriptes kann ich jedes neue Beispiel-Projekt in Sekunden so erweitern, dass ESLint und Prettier installiert und nach meinen Bedürfnissen eingerichtet werden. Dies gibt mir die Sicherheit und den Komfort, den ich gerne für Code-Beispiele und Live-Coding-Sessions in meinen Vorlesungen und Kursen habe.
Der Quellcode für das Skript ist bei GitHub verfügbar.
Update 05.04.2024
Das Skript installiert zusätzlich simple-git-hooks und richtet anschließend einen Pre-Commit-Hook ein, der automatisch ESlint und Prettier ausführt, um zu überprüfen, ob der Code den konfigurierten Vorgaben entspricht.