Wie ich an zwei Tagen einen Code-Formatierer erstellt habe

Vor kurzem habe ich einen Wireframe für einen Code-Schönmacher erstellt. Am nächsten Tag beschloss ich, ihn in ein echtes Werkzeug zu verwandeln. Das gesamte Projekt war in weniger als zwei Tagen abgeschlossen.

Ich habe schon seit einiger Zeit darüber nachgedacht, einen neuen Code-Formatierer zu entwickeln. Die Idee ist nicht neu, aber jedes Mal, wenn ich das Werkzeug eines anderen benutze, stelle ich fest, dass ich dieselben Einstellungen wieder anwenden und jedes Mal *jedes einzelne Mal* Werbung umgehen muss. 🤦🏻‍

Ich wollte ein einfaches Werkzeug, das ohne viel Aufwand gut funktioniert, also habe ich letzte Woche Papier und Stift zur Hand genommen und mit dem Entwurf begonnen. Ich bin ein großer Fan davon, Wireframes von Hand zu zeichnen. Es gibt einfach etwas an Bleistift und Papier, das den Design-Teil meines Gehirns besser arbeiten lässt als das Starren auf einen Bildschirm.

Nachdem ich den Wireframe gezeichnet hatte, war ich sofort inspiriert. Am nächsten Tag nahm ich mir eine Auszeit von meiner üblichen Routine, um ihn in etwas Reales zu verwandeln. 👨🏻‍💻

Schau es dir an

Das Design

Ich wusste, dass der Code-Editor der Hauptfokus des Tools sein sollte, also habe ich oben eine schmale Menüleiste erstellt, die den Modus (z. B. HTML, CSS, JavaScript) und die Einstellungen steuert. Schließlich habe ich auch einen "Über uns"-Button hinzugefügt.

Der Editor selbst nimmt den größten Teil des Bildschirms ein, fügt sich aber so gut ein, dass man ihn kaum bemerkt. Anstatt Platz mit Anleitungen zu verschwenden, habe ich einen Platzhalter verwendet, der verschwindet, wenn man zu tippen beginnt.

Unten habe ich eine Statusleiste erstellt, die Live-Statistiken über den Code anzeigt, einschließlich des aktuellen Modus, der Einrückungseinstellungen, der Zeilenanzahl, der Zeichenanzahl und der Dokumentgröße in Bytes. Auf der rechten Seite der Statusleiste befinden sich die Schaltflächen "Löschen" und "Bereinigen + Kopieren". In der Mitte befindet sich ein Logo, das schamlos meinen eigenen Dienst bewirbt.

Ich glaube nicht, dass viele Entwickler wirklich auf Handys programmieren, aber ich wollte trotzdem, dass dies auch auf Mobilgeräten funktioniert. Neben den üblichen responsiven Techniken musste ich die Fenstergröße beobachten und die Tabulatorposition anpassen, wenn der Bildschirm zu schmal wird.

Ich verwende Flexbox und Viewport-Einheiten für die vertikale Größenanpassung. Das war eigentlich ziemlich einfach zu machen, mit Ausnahme einer kleinen iOS-Eigenart. Hier ist ein Pen, der den grundlegenden Wireframe zeigt. Beachten Sie, wie sich das Textfeld erstreckt, um den ungenutzten Platz zwischen Header und Footer auszufüllen.

Siehe den Pen
Vollbild-Texteditor mit Header + Footer von Cory LaViska (@claviska)
auf CodePen.

Wenn Sie sich den JavaScript-Tab ansehen, sehen Sie die iOS-Eigenart und die Umgehungslösung. Ich bin mir nicht sicher, wie man so etwas mit Feature-Erkennung umgehen kann, daher ist es im Moment nur eine einfache Geräteprüfung.

Verwaltung der Einstellungen

Ich wollte die am häufigsten verwendeten Einstellungen leicht zugänglich machen, aber auch erweiterte Einstellungen für jeden Modus anbieten. Dazu habe ich die Einstellungsknopf-Schaltfläche zu einem Popover mit einem Link zu weiterführenden Einstellungen gemacht. Wenn eine Einstellung geändert wird, aktualisiert sich die Benutzeroberfläche sofort und die Einstellungen werden in localStorage gespeichert.

Ich habe hier Vue.js genutzt. Jede Einstellung wird einer Daten-Eigenschaft zugeordnet, und wenn eine davon geändert wird, aktualisiert sich die Benutzeroberfläche (falls erforderlich) und ich rufe saveSettings() auf. Es funktioniert ungefähr so.

function saveSettings() {
  const settings = {};

  // settingsToStore is an array of property names that will be persisted
  // and "this" is referencing the current Vue model
  settingsToStore.map(key => settings[key] = this[key]);
  localStorage.setItem('settings', JSON.stringify(settings);
}

Jede Einstellung ist eine Daten-Eigenschaft, die mit localStorage synchronisiert wird. Dies ist eine eher primitive Art der Zustandsverwaltung, daher werde ich die App möglicherweise später aktualisieren, um eine Zustandsverwaltungsbibliothek wie Vuex zu verwenden.

Zum Wiederherstellen der Einstellungen habe ich eine Funktion restoreSettings(), die beim Start der App ausgeführt wird.

function restoreSettings() {
  const json = localStorage.getItem('settings');

  if (json) {
    try {
      const settings = JSON.parse(json);

      Object.keys(settings).forEach(key => {
        if (settingsToStore.includes(key)) {
          this[key] = settings[key];
        }
      });
    } catch (err) {
      window.alert('There was an error loading your previous settings');
    }
  }
}

Die Funktion ruft die Einstellungen aus localStorage ab und wendet sie dann einzeln an, wobei sichergestellt wird, dass nur gültige Einstellungen in settingsToStore importiert werden.

Der Link "Erweiterte Einstellungen" öffnet einen Dialog mit Tabs für jeden Modus. Trotz über 30 Einstellungen insgesamt ist alles organisiert und leicht zugänglich, sodass sich die Benutzer nicht überfordert fühlen.

Anwenden von Themes

Dark Mode ist heutzutage der letzte Schrei, daher ist er standardmäßig aktiviert. Es gibt auch ein helles Theme für diejenigen, die es bevorzugen. Die gesamte Benutzeroberfläche ändert sich, mit Ausnahme von Popovers und Dialogen.

Ich habe die Verwendung von prefers-color-scheme in Betracht gezogen, was zufällig kürzlich in Firefox 67 eingeführt wurde, aber ich habe entschieden, dass ein Schalter wahrscheinlich besser wäre. Die Browserunterstützung für die Farbdesign-Abfrage ist noch nicht so gut, außerdem sind Entwickler seltsam. (Zum Beispiel benutze ich macOS mit hellem Theme, aber mein Texteditor ist dunkel.)

Definieren von Funktionen

Das Ideen für Funktionen zu entwickeln ist ziemlich einfach. Schwierig ist es, die Funktionen für eine erste Veröffentlichung zu begrenzen. Hier sind die wichtigsten Funktionen, die ich sofort veröffentlicht habe:

• Formatiert HTML-, CSS- und JavaScript-Code
• Syntaxhervorhebung mit Tag-/Klammerabgleich
• Code einfügen oder Dateien per Drag & Drop laden
• Automatische Erkennung der Einrückungspräferenz basierend auf eingefügtem Code oder abgelegter Datei
• Helle und dunkle Themes
• Reinigen und Kopieren mit einem Klick
• Tastenkombinationen
• Die meisten JS-Beautify-Optionen sind konfigurierbar
• Einstellungen werden dauerhaft in localStorage gespeichert
• Minimale Benutzeroberfläche ohne Werbung (nur ein dezenter Hinweis auf meinen eigenen Dienst) 🙈

Ich habe auch ein paar Ostereier zum Spaß eingebaut. Versuchen Sie, die Seite zu aktualisieren, Tastenkombinationen zu erkunden und sie auf Facebook oder Twitter zu teilen, um sie zu finden. 😉

Die verwendeten Werkzeuge und Bibliotheken

Ich bin ein großer Fan von Vue.js. Es ist wahrscheinlich übertrieben für dieses Projekt, aber das Vue CLI hat es mir ermöglicht, mit allen neuesten Werkzeugen über einen einzigen einfachen Befehl zu starten.

vue create beautify-code

Ich musste keine Zeit mit dem Scaffolding verschwenden, was mir geholfen hat, dies schnell zu entwickeln. Außerdem war Vue praktisch für Dinge wie Live-Statistiken, Ändern von Themes, Umschalten von Einstellungen usw. Ich habe verschiedene Element UI-Komponenten für Dinge wie Schaltflächen, Formularelemente, Popovers und Dialoge verwendet.

Der Editor wird von CodeMirror mit benutzerdefinierten Stilen betrieben. Es ist ein gut unterstütztes und fantastisches Projekt, das ich für die Code-Bearbeitung im Browser uneingeschränkt empfehlen kann.

Die Bibliothek, die die gesamte Formatierung übernimmt, heißt JS Beautify und unterstützt JavaScript, HTML und CSS. JS Beautify läuft auf der Client-Seite, daher gibt es wirklich kein Backend für diese App – Ihr Browser erledigt die gesamte Arbeit!

JS Beautify ist unglaublich einfach zu bedienen. Installieren Sie es mit npm install js-beautify und führen Sie Ihren Code durch die entsprechende Funktion.

import beautify from 'js-beautify';

const code = 'Your code here';
const settings = {
  // Your settings here
};

// HTML
const html = beautify.html(code, settings)

// CSS
const css = beautify.css(code, settings)

// JavaScript
const js = beautify.js(code, settings)

Jede Funktion gibt einen String mit dem formatierten Code zurück. Sie können die Ausgabe jedes Sprach durch Angabe Ihrer eigenen Einstellungen ändern.

Ich wurde ein paar Mal nach Prettier gefragt, einem vergleichbaren Tool. Es ist also erwähnenswert, dass ich JS Beautify gewählt habe, weil es weniger voreingenommen und besser konfigurierbar ist. Wenn genügend Nachfrage besteht, werde ich in Erwägung ziehen, eine Option zum Umschalten zwischen JS Beautify und Prettier hinzuzufügen.

Ich habe all diese Bibliotheken schon einmal verwendet, daher war die Integration eigentlich ziemlich einfach. 😅

---

Dieses Projekt wurde durch meine App Surreal CMS ermöglicht. Wenn Sie nach einem großartigen CMS für statische Websites suchen, schauen Sie es sich an – es ist kostenlos für persönliche, schulische und gemeinnützige Websites!

Oh, und falls Sie sich fragen, welchen Editor ich verwendet habe… es ist Visual Studio Code. 👨🏻‍💻