Aufbau einer React-Komponente
Meine Vorstellung davon, wie jede React-Komponente aussehen sollte
104
8 min.
50
3 min.
Der SSG-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Git fest.
Eine Commit-Meldung sollte wie folgt aufgebaut sein:
<Typ>([Geltungsbereich]): <kurze Beschreibung>
[Commit-Text]
[Fußzeile(n)]
Typ – Klassifizierung des Commits:
Gültigkeitsbereich (optional) gibt den betroffenen Teil des Projekts an (z. B. ui, api, auth):
feat(api): Neuer Endpunkt für Benutzer hinzugefügt
Beschreibung beschreibt die Änderungen, vorzugsweise im Imperativ, maximal 50 Zeichen.
Der Haupttext erläutert, was und warum geändert wurde.
Die Fußzeile wird für Breaking Changes verwendet, inkompatible Änderungen werden mit BREAKING CHANGE: oder feat! gekennzeichnet, zum Beispiel feat!: veraltete api-methoden entfernt, sowie für Verweise auf Issues, zum Beispiel Closes #123.
Die Pipeline sorgt für die Formatierung, die Überprüfung der Commits und das sichere Zusammenführen von Branches.
npm i -D \ husky \ lint-staged \ @commitlint/cli \ @commitlint/config-conventional \ @commitlint/types \ conventional-changelog-conventionalcommits \ @archoleat/commitlint-define-config
Lint-staged überprüft nur indizierte Änderungen:
export default { '*': 'prettier --write', 'src/**/*.{tsx,ts}': 'eslint --fix', 'src/**/*.scss': 'stylelint --fix', };
Commitlint überprüft das Format der Commits und die zulässigen Typen:
import { defineConfig } from '@archoleat/commitlint-define-config'; export default defineConfig({ extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', [ 'build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'spec', 'style', ], ], }, });
Das Plugin für defineConfig finden Sie hier
In Husky gibt es einen Fehler, bei dem Änderungen manchmal verloren gehen können, wenn der Commit die Überprüfung nicht besteht!
Änderungen in den Staging-Bereich aufnehmen:
git add .
Commit erstellen:
git commit -m "feat(header): Schaltfläche zum Wechseln des Themes hinzugefügt"
Pre-Commit:
lint-staged wird gestartet, Prettier, ESLint und Stylelint beheben Fehler in den indizierten Dateien, anschließend werden die korrigierten Dateien erneut in den Index aufgenommen.
commit-msg:
commitlint überprüft, ob der Commit-Titel den Regeln von Conventional Commits entspricht.
Ergebnis:
Der Commit ist erfolgreich abgeschlossen, wenn alle Prüfungen bestanden wurden, andernfalls wird der Commit mit einer Fehlermeldung abgelehnt.
Ähnliche Kategorien:
Meine Vorstellung davon, wie jede React-Komponente aussehen sollte
104
8 min.
Der SSF-U-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Vollbildmodus fest
34
2 min.
Der SSA-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Akkordeons fest
51
2 min.
Analyse kritischer Fehler im Webdesign. Warum Slider, Autoplay und schwerfällige Seiten die Konversionsrate sowie die Platzierungen bei Google und Yandex verschlechtern
46
2 min.
Der SSP-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Paginierung fest
57
1 min.
Der SSPS-Standard legt Anforderungen an die Struktur und Benennung von Dateien und Ordnern im Projekt fest
166
2 min.