Ein einfaches Geheimnis, um Ihren Code automatisch lesbarer zu machen

(Ryan Chong) (2. Dezember 2020)

Tabulatoren oder Leerzeichen?

Das ist die Frage. Entwickler sind sehr einfühlsam. Wenn es also an der Zeit ist, sich für etwas zu entscheiden, das trivial erscheint, wie das Verwenden von Tabulatoren oder Leerzeichen, kann es sich schnell zu Flammenkriegen entwickeln. Mein Lager gegen dein Lager.

Aber das ist nicht das einzige, worüber Entwickler streiten. Früher erhielten wir während des Codeüberprüfungsprozesses häufig viele Kommentare zu unserer Codeformatierung.

Zum Beispiel erhalten wir Kommentare zu:

  • Inkonsistenter Einzug
  • Inkonsistente Verwendung von einfachen und doppelten Anführungszeichen
  • Inkonsistente Einfügung von Semikolons
  • Inkonsistente Verwendung von Tabulatoren gegen Leerzeichen

Entwickler sind auch hocheffiziente Leute. Es dauerte nicht lange, bis sie entschieden, dass es nicht die beste Zeit ist, Tage darüber zu streiten, welche Konvention die andere übertrumpft.

Und so kamen sie auf eine Lösung: Code-Formatierer .

So funktioniert es. Definieren Sie zunächst eine Standardkonfiguration. Teilen Sie dann die Standardkonfiguration mit allen, die an demselben Projekt arbeiten. Der Code-Formatierer formatiert Ihren Code automatisch basierend auf dieser Konfiguration, bevor er das Code-Repository erreicht. Infolgedessen ist der Code aller Benutzer unabhängig von ihrer ursprünglichen Formatierung konsistent.

Es gibt viele Arten von Code-Formatierern, aber letztendlich entsteht ein Standard . Hübscher wird von vielen als Standard in der FE-Entwicklung angesehen. Ich werde gleich erklären, wie es funktioniert.

Aber zuerst sprechen wir über die Installation von Prettier.

Prettier installieren

Wenn nicht, gehen Sie zu Ihren Lieblingscode-Editor und installieren Sie die Erweiterung. Wir verwenden Visual Studio-Code (VS-Code). Klicken Sie in VS Code einfach auf das Erweiterungsfenster und suchen Sie nach „Hübscher“. Sie sehen etwas Ähnliches wie im folgenden Screenshot.

Schönere Konfiguration einrichten

Als nächstes müssen wir die schönere Konfiguration definieren. Dies soll hübscher sagen, dass der Code mithilfe von Tabulatoren oder Leerzeichen, einfachen oder doppelten Anführungszeichen usw. formatiert werden soll. Die vollständige Liste der Konfiguration finden Sie hier .

Unsere schönere Konfiguration

Aktivieren Sie dann in VS Codes settings.json den Javascript-Formatierer und wählen Sie auch, wann formatiert werden soll.

Unsere settings.json

Alternativ können Sie auch die GUI-Version (Einstellungen> Benutzereinstellungen öffnen) öffnen und die entsprechenden Einstellungen manuell umschalten.

Unsere GUI-Einstellungen

Funktionsweise von Prettier

Betrachten Sie das Beispiel unten. Der erste Screenshot zeigt einen Teil des Javascript-Codes in seiner unformatierten Version. Es ist schwer herauszufinden, wo der Code beginnt und endet.

Bei einem Code-Formatierer wie Prettier müssen wir ihn nur noch speichern und alles wird

formatierter Code
Nachher: ​​Formatierter Code

Zusammenfassung

Das manuelle Formatieren von Code ist nicht die beste Zeit. Entscheiden Sie sich für einen Standard und implementieren Sie diesen Standard als Konfiguration. Schließlich werden Sie bei Ihrer nächsten Codeüberprüfung keine zusätzliche Zeit damit verbringen, die Codeformate zu kommentieren.

TeamSpirit stellt Senior- / Junior-Software-Ingenieure in Singapur ein. Wenn Sie daran interessiert sind, mit freundlichen Kollegen zusammenzuarbeiten, die Ihre Vorschläge schätzen und Ihnen viel Autonomie geben, senden Sie bitte Ihren Lebenslauf an rekrut.sg @ teamspirit.com