So drucken Sie hervorgehobenen Code in der Node.JS-Konsole

Vorwort

Wenn der Code ausgeführt wird und ein Fehler auftritt, drucken wir den Fehler aus. Der Fehler enthält Stapelinformationen, mit denen sich die entsprechende Codeposition lokalisieren lässt. Manchmal hoffen wir jedoch, den Code des Fehlerorts direkter und genauer ausdrucken zu können. Zum Beispiel:

Dies kann mit @babel/code-frames erfolgen:

const { codeFrameColumns } = erfordern('@babel/code-frame');

const res = CodeFrameColumns(Code, {
  Start: { Zeile: 2, Spalte: 1 },
  Ende: { Zeile: 3, Spalte: 5 },
}, {
  HighlightCode: wahr,
  Nachricht: „Hier ist etwas schiefgelaufen“
});

konsole.log(res);

Fühlt es sich magisch an? Wie wird das obige Codeformat (Coderahmen) ausgedruckt?

In diesem Artikel werden wir das Prinzip untersuchen.

Dabei werden drei zentrale Fragen beantwortet:

• So drucken Sie den Coderahmen aus, der den entsprechenden Positionscode markiert (das Druckformat im obigen Bild)
• So implementieren Sie Syntaxhervorhebung
• So drucken Sie Farben in der Konsole

So drucken Sie einen Coderahmen

Ignorieren wir die Hervorhebung und drucken es in diesem Format:

Irgendwelche Ideen?

Tatsächlich ist es relativ einfach, sich das vorzustellen. Nachdem wir den Quellcode und die Zeilen- und Spaltennummern des Anfangs- und Endes der Markierung eingegeben haben, können wir berechnen, welche Zeilen und Spalten die Markierungen anzeigen, und dann jede Codezeile der Reihe nach verarbeiten. Wenn diese Zeile keine Markierung enthält, lassen Sie sie so, wie sie ist. Wenn diese Zeile eine Markierung enthält, drucken Sie am Anfang eine Markierung ">" und darunter eine Zeile mit einer Markierung "^". Die letzte Markierungszeile druckt auch eine Fehlermeldung.

Werfen wir einen Blick auf die Implementierung von @babel/code-frame:

Teilen Sie zunächst die Zeichenfolge für jede Zeile in ein Array auf und berechnen Sie dann die Position des Markers basierend auf der übergebenen Position.

Beispielsweise die Spalten 1 bis 12 in der zweiten Zeile und die Spalten 0 bis 5 in der dritten Zeile.

Verarbeiten Sie dann jede Zeile. Wenn diese Zeile eine Markierung enthält, wird sie im Format Markierung + Zeilenabstand (Zeilennummer) + Code geschrieben. Drucken Sie dann eine weitere Markierungszeile und die letzte Markierungszeile druckt die Nachricht. Keine Markierung, wird nicht verarbeitet.

Der endgültige Coderahmen sieht wie folgt aus:

Wir haben Code-Frame-Splicing implementiert und die Hervorhebung vorübergehend ignoriert. Wie machen wir also die Syntaxhervorhebung?

So implementieren Sie Syntaxhervorhebung

Das Implementieren der Syntaxhervorhebung erfordert ein Verständnis des Codes. Wenn es sich jedoch nur um Hervorhebung handelt, reicht eine lexikalische Analyse aus. Babel macht dasselbe. Das Paket @babel/highlight implementiert die Logik zum Hervorheben von Code.

Erster Blick auf die Wirkung:

Konstante a = 1;
Konstante b = 2;
konsole.log(a + b);

Der obige Quellcode ist in Token-Arrays unterteilt:

[
[ 'Leerzeichen', '\n' ], [ 'Schlüsselwort', 'const' ],
[ 'Leerzeichen', ' ' ], [ 'Name', 'a' ],
[ 'Leerzeichen', ' ' ], [ 'Satzzeichen', '=' ],
[ 'Leerzeichen', ' ' ], [ 'Zahl', '1' ],
[ 'Satzzeichen', ';' ], [ 'Leerzeichen', '\n' ],
[ 'Schlüsselwort', 'const' ], [ 'Leerzeichen', ' ' ],
[ 'Name', 'b' ], [ 'Leerzeichen', ' ' ],
[ 'Satzzeichen', '=' ], [ 'Leerzeichen', ' ' ],
[ 'Zahl', '2' ], [ 'Satzzeichen', ';' ],
[ 'Leerzeichen', '\n' ], [ 'Name', 'Konsole' ],
[ 'Satzzeichen', '.' ], [ 'Name', 'Protokoll' ],
[ 'Klammer', '(' ], [ 'Name', 'a' ],
[ 'Leerzeichen', ' ' ], [ 'Satzzeichen', '+' ],
[ 'Leerzeichen', ' ' ], [ 'Name', 'b' ],
[ 'Klammer', ')' ], [ 'Satzzeichen', ';' ],
[ 'Leerzeichen', '\n' ]
]

Wie werden Token aufgeteilt?

Im Allgemeinen handelt es sich bei der lexikalischen Analyse um einen endlichen Automaten (DFA), die Implementierung ist hier jedoch relativ einfach und erfolgt durch reguläres Matching:

Das Paket js-tokens stellt einen regulären Ausdruck und eine Funktion bereit. Der reguläre Ausdruck wird zum Identifizieren von Token verwendet. Es gibt viele Gruppen darin, und die Funktion gibt unterschiedliche Typen für unterschiedliche Gruppenindizes zurück, sodass die Tokenidentifizierung und -klassifizierung abgeschlossen werden kann.

Dies wird auch im Paket @babel/highlight verwendet:

(Reguläre Ausdrücke weisen bei der lexikalischen Analyse viele Einschränkungen auf, z. B. die Unfähigkeit, Rekursion zu verarbeiten. Daher ist diese Methode nicht universell. Für die allgemeine lexikalische Analyse ist weiterhin die Verwendung von Zustandsmaschinen (DFAs) erforderlich.)

Nachdem die Klassifizierung abgeschlossen ist, werden verschiedene Token in unterschiedlichen Farben angezeigt und eine Karte kann erstellt werden.

@babel/highlight macht dasselbe:

Wir wissen, wie man mit der API von Chalk Syntaxhervorhebung durchführt und Farben druckt, aber wie funktioniert das Drucken von Farben in der Konsole?

So drucken Sie Farben in der Konsole

Die Konsole druckt ASCII-Codes, aber nicht alle Codes entsprechen sichtbaren Zeichen. Einige Zeichen in ASCII-Codes entsprechen Steuerzeichen. Beispielsweise ist 27 ESC, die ESC-Taste auf unserer Tastatur, die Abkürzung für Escape. Durch Drücken können einige Steuerfunktionen ausgeführt werden. Hier können wir den Status der Steuerung der Druckfarbe aufrufen, indem wir den ASCII-Code von ESC drucken.

Das Format ist folgendes:

Drucken Sie einen ASCII-Code von ESC, gefolgt von [ für Anfang, m für Ende und n durch ; getrennten Steuerzeichen dazwischen. Dadurch können viele Stile gesteuert werden, wie etwa Vordergrundfarbe, Hintergrundfarbe, Fettdruck, Unterstreichung usw.

Der ASCII-Code von ESC ist 27 und es gibt mehrere Möglichkeiten, ihn zu schreiben: eine ist die Zeichendarstellung \e, eine ist die hexadezimale Zahl \0x1b (die hexadezimale Zahl entspricht 27) und eine ist die oktale Zahl \033. Alle drei stellen ESC dar.

Probieren wir es aus: 1 bedeutet fett, 36 bedeutet, dass die Vordergrundfarbe Cyan ist, und 4 bedeutet unterstrichen. Folgende drei Schreibweisen sind gleichwertig:

\e[36;1;4m
\033[36;1;4m
\0x1b[36;1;4m

Versuchen wir es:

Die Bilder sind alle im richtigen Stil gedruckt!

Wenn Sie den Stil nach dem Hinzufügen entfernen möchten, können Sie natürlich ein \e[0m hinzufügen (\033[0m, \0x1b[0m sind gleichwertig).

Die verschiedenen Methoden von Chalk (Node.js-Bibliothek zum Drucken von Farben im Terminal) dienen zum Kapseln dieser ASCII-Farbsteuerzeichen.

Der Code nach jeder Codezeile oben ist hervorgehoben:

Dadurch ist ein Druck in unterschiedlichen Farben möglich.

Zusammenfassen

An diesem Punkt können wir die Effekte am Anfang erzielen: Unterstützt den Druck von Coderahmen, unterstützt die Hervorhebung der Syntax und kann in Farbe drucken

In diesem Artikel untersuchen wir das Implementierungsprinzip dieses Effekts, beginnend mit der Art und Weise, wie der Coderahmen gespleißt wird, dann wie jede Codezeile hervorgehoben wird und schließlich wie die Hervorhebung in Farbe gedruckt wird.

Ob Drucken eines Coderahmens, Hervorheben der Syntax oder Drucken von Farben in der Konsole, dies sind alles sehr gängige Funktionen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Prinzipien dieser drei Aspekte gründlich zu beherrschen.

Dies ist das Ende dieses Artikels über den hervorgehobenen Code zum Drucken auf der Node.js-Konsole. Weitere verwandte Inhalte zum Hervorheben auf der Node.js-Konsole finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!