Warum Sie Spalteneinrückungen verwenden sollten, um die Lesbarkeit Ihres Codes zu verbessern

Ich denke, dass der wichtigste Aspekt der Programmierung die Lesbarkeit des Quellcodes ist, den Sie schreiben oder pflegen. Dies beinhaltet viele Dinge, von der Syntax der Programmiersprache bis zu den Variablennamen, Kommentaren und Einrückungen. Hier diskutiere ich die letzte davon, Einrückung .

Es geht nicht um die Größe der Einrückungen oder die Wahl zwischen Tabulatoren und Leerzeichen oder darum, ob dies in einer Sprache wie Python erforderlich sein sollte. Viele Leute verwenden gerne eine maximale Zeilenlänge für jede Codezeile, normalerweise 80 oder 120 Zeichen. Bei dieser Idee gibt es keine maximale Länge, und manchmal müssen Sie die horizontale Bildlaufleiste verwenden. Aber flipp nicht aus, es ist nicht für den gesamten Code - es ist nur für einige Teile davon.

Vier Beispiele für Verbesserungen mit Codeeinzug

Erstes Beispiel

Schauen Sie sich diesen Code an:

Die Lesbarkeit ist nicht so gut, und Sie könnten am Ende so etwas haben, um das Durcheinander zu vermeiden:

Und Ihre sieben Zeilen haben sich in fast 40 Zeilen verwandelt. Dies mit nur drei oder vier Eigenschaften pro Objekt. Wenn es acht Eigenschaften wären, würden es 70 Zeilen werden.

Die Idee, über die ich spreche, ist, so etwas zu verwenden (ich nenne es "Code mit Spalteneinzug"):

Zweites Beispiel

Es ist nicht nur für Objektliterale. Es kann für jeden Code verwendet werden, der eine Gruppe ähnlicher Zeilen ist. Dieser Prozess kann schnell sein. Sie können die erste Zeile kopieren, einfügen und dann die sich ändernden Teile in jeder Zeile überschreiben.

Es kann auch in JS verwendet import werden. Vergleichen Sie diese beiden Versionen:

Diese dreizehn Importe sind alphabetisch nach Pfaden sortiert. Alle von ihnen sind aus dem vsOrdner - fünf von vs/baseund acht von vs/platform.

Sie können das nicht sehen, ohne Ihre Augen über jede Linie hin und her zu bewegen. Das zu tun ist ärgerlich. Natürlich müssen Sie keine Statistiken darüber erstellen, wie Ihre Dateien andere importieren. Aber irgendwann werden Sie diesen Code lesen, um zu sehen, ob Sie etwas aus der richtigen Datei importiert haben oder ob eine Datei bereits importiert wurde.

Sehen Sie nun, wie es aussieht, wenn derselbe Code in Spalten eingerückt ist:

Macht es das nicht ein bisschen besser?

Drittes Beispiel

In diesem Beispiel haben wir eine Methodendeklaration vom TypeScript-Compiler:

Auch hier können Sie den Unterschied zwischen den Linien leichter erkennen. Es hilft Ihnen, alle fünf Zeilen gleichzeitig zu lesen und viel weniger Aufwand zu betreiben. Wenn Sie in jeder dieser 5 Zeilen einen Parameter hinzufügen müssen, können Sie dies nur einmal tun, indem Sie den mehrzeiligen Cursor in fast allen Code-Editoren verwenden.

Viertes Beispiel

Hier ist das letzte Beispiel mit dem Original und dem Vergleich zusammen:

Vorteile :

  • Ihr Code sieht sauberer aus.
  • Ihr Code hat die Lesbarkeit verbessert
  • Möglicherweise können Sie die Anzahl der Zeilen in Ihrem Code reduzieren

Nachteile :

  • Die automatische Formatierungsoption von Code-Editoren kann das Layout beeinträchtigen
  • Wenn Sie einem Zeilenblock eine Zeile hinzufügen, müssen Sie manchmal alle anderen Zeilen ändern
  • Das Schreiben von Code kann zeitaufwändig sein

Welche Tools können dazu beitragen?

Ich habe einige Zeit auf diese Weise manuell eingerückt. Es ist langweilig, aber wenn Sie anfangen, können Sie nicht mehr aufhören. Sie sehen sich Ihren Code an, all diese wiederholten Zeilen, die in Spalten eingerückt sein könnten, um besser lesbar zu sein, und Sie können nicht weitermachen, ohne dies zu tun. Es macht süchtig.

Ich verwende Visual Studio und Visual Studio Code und habe versucht, eine Erweiterung oder ein Plugin zu finden, mit denen dies erreicht werden kann. Ich habe keine gefunden. Im November 2017 begann ich mit der Erstellung meiner eigenen Erweiterung für Visual Studio Code und nannte sie Smart Column Indenter.

Ich habe im selben Monat eine erste verwendbare Version veröffentlicht. Schauen Sie sich an, wie es funktioniert:

Es gibt Bereiche, in denen die Erweiterung verbessert werden könnte. Derzeit funktioniert es nur mit *.ts, *.jsund *.jsonDateien. Ich denke, dass dies auch bei XML- und HTML-Dateien hilfreich sein kann, z. B. beim Einrücken von Spalten in dieselben Attribute wiederholter Tags oder in verschiedene Tags, die in einer Gruppe von Zeilen wiederholt werden.

Sobald der Code für die Spalteneinrückung ausgewählt wurde, arbeitet der Algorithmus in drei Schritten:

  1. Lexikalische Analyse (oder Tokenisierung) des Codes. Ich habe das TypeScript npm-Paket als Abhängigkeit installiert und die Compiler-API verwendet, um zu vermeiden, dass das Rad hier neu erfunden wird.
  2. Führen Sie den LCS-Algorithmus (Longest Common Subsequence) aus, indem Sie jede Codezeile als Folge von Token übergeben. Das ist der schwierige Teil. Viele Referenzen im Internet sprechen über das LCS für nur zwei Sequenzen als Eingabe, was mit dynamischer Programmierung leicht gelöst werden kann . Da normalerweise mehr als zwei Codezeilen in Spalten eingerückt werden sollen, besteht das Problem darin, die längste gemeinsame Sequenz (LCS) mehrerer Zeichenfolgen zu finden. Dies ist ein NP-hartes Problem. Da dies ein generisches Problem ist, habe ich ein separates npm-Paket (multiple-lcs) mit einer grundlegenden Implementierung erstellt, um dies zu erreichen. In einigen Fällen ist es nicht die beste Lösung, aber es ist praktikabel.
  3. Schreiben Sie den Code neu, um die im LCS angezeigten Token in Spalten einzurücken. Jedes Token im LCS wird in eine neue Spalte eingefügt.

Für einige Arten von Token, wie z. B. Zeichenfolgen oder Variablennamen, wird der Typname anstelle des Inhalts im LCS-Algorithmus verwendet. Das Ergebnis ist eine größere Teilsequenz.

Ich habe die gesamte Logik in einem separaten npm-Paket (Smart-Column-Indenter) abgelegt. Wenn Sie eine Erweiterung oder ein Plugin wie dieses für eine andere JavaScript-basierte IDE erstellen möchten, können Sie dieses Paket verwenden.

Mein erster Grund für die Erstellung dieser Lösung war der Proof-of-Concept. Ich würde gerne wissen, was andere Programmierer über meine Lösung denken. Wenn es Ihnen gefallen hat, klatschen Sie bitte .

Wenn Sie konstruktive Kritik haben oder andere Tools kennen, die dasselbe tun, hinterlassen Sie bitte einen Kommentar. Dies ist ein Artikel, den ich nützlich fand.

Danke fürs Lesen.

Update (2018–03–29): Nachdem es vor ein paar Tagen veröffentlicht wurde, habe ich viele Rückmeldungen erhalten, die meisten davon sind negativ, aber ich danke Ihnen allen, es ist gut zu wissen, warum viele Leute nicht mögen es. Ich habe später herausgefunden, dass die Leute es normalerweise "Code-Ausrichtung" nennen. Sie werden nichts über "Spalteneinzug" finden. Wenn Sie also mehr darüber suchen möchten, suchen Sie stattdessen nach "Code-Ausrichtung". Ich habe es getan und einen interessanten Blog-Beitrag aus Terence Edens Blog gefunden, da sich die meisten negativen Kommentare auf Probleme mit VCS-Zusammenführungen, Verlauf und schmutzigen Unterschieden beziehen. Ich werde seine Schlussfolgerung kopieren: „Wenn unsere Tools das Verständnis dieser Ideen verbessern schwierig, es sind die Werkzeuge, die sich ändern müssen - nicht wir. “

Update (2018–05–03): Als hätte jemand vom GitHub-Team die negativen Kommentare zur Code-Ausrichtung hier gelesen, können Sie jetzt Leerzeichen in der Codeüberprüfung ignorieren.

Update (2018–05–20): Wenn Sie Visual Studio (nicht Code) verwenden, hat Shadman Kudchikar eine ähnliche Erweiterung erstellt. Sie können sie hier lesen oder hier herunterladen.

Faktoid

Wir haben jetzt 22-Zoll-Bildschirme mit einer Auflösung von 1920 x 1080. Es gibt keinen Grund, sich auf 80 Zeichen pro Zeile zu beschränken, obwohl Sie sich für das maximale Limit entscheiden müssen. Der Ursprung dieses Limits von 80 Zeichen ist: