Editor-Einrichtung

Ein richtig konfigurierter Editor kann Code klarer lesbar und schneller schreibbar machen. Er kann dir sogar helfen, Fehler zu finden, während du sie schreibst! Wenn du zum ersten Mal einen Editor einrichtest oder deinen aktuellen Editor optimieren möchtest, haben wir ein paar Empfehlungen.

Dein Editor

VS Codeist einer der heute am weitesten verbreiteten Editoren. Er verfügt über einen großen Marktplatz für Erweiterungen und integriert sich gut mit beliebten Diensten wie GitHub. Die meisten der unten aufgeführten Funktionen können auch als Erweiterungen zu VS Code hinzugefügt werden, was ihn hochgradig konfigurierbar macht!

Andere in der React-Community beliebte Texteditoren sind:

• WebStormist eine integrierte Entwicklungsumgebung, die speziell für JavaScript entwickelt wurde.
• Sublime Textunterstützt JSX und TypeScript, bietetSyntax-Hervorhebungund Autovervollständigung von Haus aus.
• Vimist ein hochgradig konfigurierbarer Texteditor, der darauf ausgelegt ist, das Erstellen und Ändern jeglicher Art von Text sehr effizient zu gestalten. Er ist als „vi“ in den meisten UNIX-Systemen und in Apple OS X enthalten.

Empfohlene Texteditor-Funktionen

Einige Editoren bringen diese Funktionen von Haus aus mit, bei anderen muss möglicherweise eine Erweiterung hinzugefügt werden. Überprüfe, welche Unterstützung dein gewählter Editor bietet, um sicherzugehen!

Linting

Code-Linter finden Probleme in deinem Code, während du schreibst, und helfen dir, sie frühzeitig zu beheben.ESLintist ein beliebter, quelloffener Linter für JavaScript.

• Installiere ESLint mit der empfohlenen Konfiguration für React(stelle sicher, dass duNode installiert hast!)
• Integriere ESLint in VSCode mit der offiziellen Erweiterung

Stelle sicher, dass du alle Regeln deseslint-plugin-react-hooksfür dein Projekt aktiviert hast.Sie sind essenziell und fangen die schwerwiegendsten Fehler frühzeitig. Die empfohleneeslint-config-react-app-Voreinstellung enthält sie bereits.

Formatierung

Das Letzte, was du möchtest, wenn du deinen Code mit einem anderen Mitwirkenden teilst, ist eine Diskussion überTabs vs. Leerzeichen! Glücklicherweise wirdPrettierdeinen Code bereinigen, indem er ihn neu formatiert, um vorgegebenen, konfigurierbaren Regeln zu entsprechen. Führe Prettier aus, und alle deine Tabs werden in Leerzeichen umgewandelt – und auch deine Einrückungen, Anführungszeichen usw. werden entsprechend der Konfiguration angepasst. Im Idealfall wird Prettier beim Speichern deiner Datei ausgeführt und nimmt diese Änderungen schnell für dich vor.

Du kannst diePrettier-Erweiterung in VSCodeinstallieren, indem du diese Schritte befolgst:

1. Starte VS Code
2. Verwende Quick Open (drücke Strg/Cmd+P)
3. Fügeext install esbenp.prettier-vscode
4. Drücke Enter

Formatierung beim Speichern

Im Idealfall solltest du deinen Code bei jedem Speichern formatieren. VS Code hat Einstellungen dafür!

1. Drücken Sie in VS CodeCTRL/CMD + SHIFT + P.
2. Geben Sie "settings" ein
3. Drücken Sie Enter
4. Geben Sie in der Suchleiste "format on save" ein
5. Stellen Sie sicher, dass die Option "format on save" aktiviert ist!

Wenn Ihr ESLint-Preset Formatierungsregeln enthält, können diese mit Prettier in Konflikt stehen. Wir empfehlen, alle Formatierungsregeln in Ihrem ESLint-Preset miteslint-config-prettierzu deaktivieren, sodass ESLintnurzum Auffinden logischer Fehler verwendet wird. Wenn Sie sicherstellen möchten, dass Dateien formatiert sind, bevor ein Pull Request zusammengeführt wird, verwenden Sieprettier --checkfür Ihre Continuous Integration.