Editor einrichten

Dein Editor

VS Code ist einer der populärsten Editoren die derzeit benutzt werden. Er verfügt über einen riesigen Markplatz mit Erweiterungen und kann populäre Dienste wie GitHub sehr gut integrieren. Die meisten der unten genannten Features können ebenfalls als Erweiterungen zu VS Code hinzugefügt werden und machen ihn dadurch sehr anpassungsfähig

Weitere populäre Texteditoren die von der React Community benutzt werden:

• WebStorm ist eine integrierte Entwicklungsumgebung die speziell für JavaScript entworfen wurde.
• Sublime Text unterstützt JSX und TypeScript, syntax highlighting und Autovervollständigung sind bereits integriert.
• Vim ist ein sehr flexibel konfigurierbarer Texteditor der entwickelt wurde um das erstellen und ändern von jeder Form von Text möglichst effizient zu machen. Er ist als “vi” in den meisten UNIX-Systemen und in Apple OS X enthalten.

Empfohlene Features bei Texteditoren

Einige Editoren haben diese Features bereits integriert, während man bei anderen eine Eweiterung hinzufügen muss. Überprüfe sicherheitshalber, welche Features dein Editor unterstützt um

Linting

Code Linter finden Probleme in deinem Code während du ihn schreibst, das hilft dir sie frühzeitig zu korrigieren. ESLint ist ein beliebter, quelloffener Linter für JavaScript

• ESLint mit den für React empfohlenen Einstellungen installieren (stelle sicher, dass du Node installiert hast!)
• Integriere ESLint mit der offiziellen Erweiterung in VSCode

Stelle sicher, dass du alle eslint-plugin-react-hooks Regeln für dein Projekt eingeschalten hast. Sie sind unverzichtbar und helfen dabei, die schwerwiegendsten Fehler frühzeitig zu erkennen. Die empfohlenen Voreinstellungen von eslint-config-react-app enthalten diese bereits.

Formatierung

Was man in jedem Fall vermeiden möchte wenn man Code mit anderen Mitwirkenden teilt, ist es, über die Verwendung von Tabs vs. Spaces zu diskutieren! Glücklicherweise kann Prettier den Code aufräumen indem es ihn gemäß anpassbarer Regeln neu formatiert. Führe Prettier aus und alle deine Tabs werden zu Spaces - und deine Einrückungen, Anführungszeichen, etc. werden ebenfalls geändert damit sie den Vorgaben entsprechen. Idealerweise ist dein Editor so eingestellt, dass Prettier ausgeführt wird sobald die Datei gespeichert wird um die Formatierungen für dich möglichst einfach vorzunehmen.

Du kannst die Prettier Erweiterung in VSCode einrichten indem du die folgenden Schritten ausführst.

1. VS Code starten
2. Benutze den Schnellzugriff (STRG/CMD+P)
3. Fürge dort ext install esbenp.prettier-vscode ein
4. Drücke Enter

Formattieren beim speichern

Idealerweise solltest du deinen Code bei jedem speichern formattieren. In VS Code lässt sich das einfach einstellen!

1. In VS Code, drücke CTRL/CMD + SHIFT + P.
2. Tippe “settings” ein
3. Drücke Enter
4. In der Suchleiste, “format on save” eintippen
5. Stelle sicher dass die “format on save” Option markiert ist!

If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use prettier --check for your continuous integration.