Wie ich in zwei Tagen einen Code -Verschönerer erstellt habe

Kürzlich habe ich ein Drahtrahmendiagramm eines Code -Verschönerungs -Tools entworfen. Am nächsten Tag beschloss ich, es in ein echtes Werkzeug zu verwandeln. Das gesamte Projekt wurde in weniger als zwei Tagen abgeschlossen.

Ich habe darüber nachgedacht, ein neues Code -Verschönerungs -Tool zu erstellen. Die Idee ist nicht einzigartig, aber jedes Mal, wenn ich das Werkzeug eines anderen verwende, werde ich immer wieder die gleichen Einstellungen anwenden und jedes Mal Anzeigen vermeiden. ?? ‍

Ich wollte ein einfaches und benutzerfreundliches Tool ohne Probleme, also habe ich letzte Woche etwas Papier genommen und angefangen, einen Wireframe zu skizzieren. Ich mag es wirklich, Drahtrahmen von Hand zu zeichnen. Mein Gehirn entworfen mit Bleistift und Papier und arbeitet besser als auf den Bildschirm.

Ich wurde sofort inspiriert, nachdem ich den Drahtmodell gezeichnet hatte. Am nächsten Tag nahm ich meine tägliche Arbeit Zeit und verwandelte sie in die Realität. ??‍?

Ergebnisse anzeigen

Design

Ich weiß, dass ich möchte, dass der Code -Editor im Mittelpunkt des Tools steht. Daher habe ich eine schlanke Menüleiste oben für Steuermodi (z. B. HTML, CSS, JavaScript) und Einstellungen erstellt. Ich habe auch einen "About" -Button hinzugefügt.

Der Editor selbst nimmt den größten Teil des Bildschirms auf, fügt sich jedoch gut in den Hintergrund ein, sodass Sie es kaum bemerken. Anstatt Anweisungen zur Verschwendung von Platz zu verwenden, habe ich einen Platzhalter verwendet, der beim Tippen verschwindet.

Am Ende habe ich eine Statusleiste erstellt, in der Echtzeitstatistiken zum Code angezeigt werden, einschließlich des aktuellen Modus, Einstellungseinstellungen, Zeilenzahl, Anzahl der Zeichen und Dokumentgröße in Bytes. Auf der rechten Seite der Statusleiste befinden sich klare und saubere und kopierende Tasten. In der Mitte zeigt das Logo meinen eigenen Service.

Ich glaube nicht, dass viele Entwickler Code auf ihre Telefone schreiben werden, aber ich möchte immer noch, dass dieses Tool auf mobilen Geräten ausgeführt wird. Zusätzlich zu den häufig verwendeten Responsive -Techniken musste ich auch die Fenstergröße überwachen und die Registerkartenposition einstellen, wenn der Bildschirm zu eng wurde.

Ich verwende Flexbox- und Ansichtsfenster für die vertikale Größenänderung. Dies ist bis auf ein kleines iOS -Problem einfach zu tun. Hier ist ein Stift, der den Basisdrahtrahmen zeigt. Beachten Sie, wie sich der Textbereich erstreckt, um den nicht verwendeten Raum zwischen dem Titel und der Fußzeile zu füllen.

Wenn Sie sich die Registerkarte JavaScript ansehen, sehen Sie iOS -Probleme und -Lösungen. Ich bin mir nicht sicher, wie ich eine solche Funktion erkennen soll. Jetzt ist es jetzt nur eine einfache Geräteprüfung.

Verarbeitung festlegen

Ich möchte, dass die am häufigsten verwendeten Einstellungen leicht zugänglich sind, aber auch erweiterte Einstellungen für jeden Modus freilegen. Dazu habe ich die Einstellungsschaltfläche zu einem Popup mit Links zu erweiterten Einstellungen gemacht. Nach dem Ändern der Einstellungen wird die Benutzeroberfläche sofort aktualisiert und die Einstellungen werden lange in LocalStorage gespeichert.

Ich benutze Vue.js hier. Jede Einstellung wird einer Dateneigenschaft zugeordnet, und wenn sich eine von ihnen ändert, wird die UI -Aktualisierungen (falls erforderlich) und ich rufe Speichern (). Es ist ungefähr so.

 Funktion rettensettings () {
  const Einstellungen = {};

  // SettingStostore ist ein Array von Attributnamen, die bestehen bleiben // "Dies" bezieht sich auf das aktuelle Vue -Modell settingStostore.map (KEY => Einstellungen [Schlüssel] = dieses [Schlüssel]);
  localStorage.setItem ('Einstellungen', JSON.Stringify (Einstellungen));
}

Jede Einstellung ist eine Dateneigenschaft, die mit LocalStorage synchronisiert ist. Dies ist eine eher primitive Art des staatlichen Speichers. Daher kann ich die Anwendung später aktualisieren, um staatliche Verwaltungsbibliotheken wie Vuex zu verwenden.

Um die Einstellungen wiederherzustellen, habe ich eine restauresettings () -Funktion, die ausgeführt wird, wenn die Anwendung startet.

 Funktion restauresettings () {
  const json = localStorage.getItem ('Einstellungen');

  if (json) {
    versuchen {
      const Einstellungen = JSON.Parse (JSON);

      Object.Keys (Einstellungen) .foreach (Key => {
        if (settingStostore.includes (Schlüssel)) {
          diese [Schlüssel] = Einstellungen [Schlüssel];
        }
      });
    } catch (err) {
      window.alert ('Fehler laden vorherige Einstellungen');
    }
  }
}

Diese Funktion erhält Einstellungen von LocalStorage und wendet sie nacheinander an, um sicherzustellen, dass nur gültige Einstellungen in SettingStostore importiert werden.

Die Link Advanced Settings öffnet einen Dialog mit jeder Registerkarte "jeder Modus". Trotz insgesamt über 30 Einstellungen ist alles organisiert und zugänglich, sodass Benutzer sich nicht überfordert fühlen.

Thema anwenden

Der dunkle Modus ist heutzutage sehr beliebt und ist daher standardmäßig aktiviert. Für diejenigen, die es mögen, gibt es auch ein helles Farbthema. Die gesamte Benutzeroberfläche ändert sich außer für Popups und Dialoge.

Ich habe darüber nachgedacht, dass es in letzter Zeit in Firefox 67 in Firefox 67 in prefers-color-scheme 67 war, aber ich habe beschlossen, die Tasten zu wechseln. Die Unterstützung des Browsers für Farbthema -Präferenzanfragen ist nicht sehr gut und die Entwickler sind seltsam. (Zum Beispiel verwende ich MacOS mit einem hellen Thema, aber mein Texteditor ist dunkel.)

Funktionen definieren

Es ist einfach, einen Feature -Punkt zu finden. Es ist schwierig, die Funktionen der ersten Version zu begrenzen. Hier sind die relevantesten Funktionen, die ich sofort gepostet habe:

• Verschönern Sie HTML, CSS und JavaScript -Code
• Syntax -Hervorhebung mit Etikett-/Klammer -Matching
• Fügen Sie eine Datei ein oder fallen Sie ab, um den Code zu laden
• Erkennen Sie automatisch Eindrückungspräferenzen basierend auf eingefügten Code oder Drag-and-Drop-Dateien
• Helle und dunkle Themen
• Ein-Klick-Reinigung und Kopieren
• Tastaturverknüpfungen
• Die meisten JS -Verschönerungsoptionen sind konfigurierbar
• Die Einstellungen werden auf unbestimmte Zeit in LocalStorage gespeichert
• Minimale Benutzeroberfläche, keine Anzeigen (nur eine unauffällige Werbung für meinen eigenen Dienst)?

Ich habe auch zum Spaß einige Ostereier hinzugefügt. Versuchen Sie, die Seite zu aktualisieren, Verknüpfungen zu erkunden und sie auf Facebook oder Twitter zu teilen, um sie zu finden. ?

Tools und Bibliotheken, die ich verwende

Ich mag Vue.js. Für dieses Projekt ist es vielleicht ein bisschen zu viel, aber die Vue CLI ermöglicht es mir, mit den neuesten Tools mit einem einfachen Befehl zu beginnen.

 Vue erstellen Sie wunderschöner Code

Ich musste keine Zeit damit verschwenden, Gerüste zu bauen, was mir half, dieses Werkzeug schnell zu bauen. Darüber hinaus ist VUE in Echtzeitstatistiken, sich ändern, Themen, Schalteinstellungen usw. sehr bequem. Ich habe verschiedene Element-UI-Komponenten wie Schaltflächen, Formularelemente, Popups und Dialoge verwendet.

Der Editor wird von Codemirror betrieben und verwendet benutzerdefinierte Stile. Dies ist ein gut unterstütztes und großartiges Projekt, das ich für die Bearbeitung von In-Browser-Code sehr empfehle.

Die Bibliothek, die die gesamte Verschönerung ausführt, heißt JS verschönert, die JavaScript, HTML und CSS übernimmt. JS verschönert läuft auf der Client -Seite, sodass diese Anwendung kein Backend hat - Ihr Browser erledigt die ganze Arbeit!

JS verschönert ist sehr einfach zu bedienen. Installieren Sie es mit npm install js-beautify und führen Sie Ihren Code über die entsprechende Funktion aus.

 Schönheit von 'JS-Beautify' importieren;

const code = 'dein Code hier';
const Einstellungen = {
  // Ihre Einstellungen hier
};

// html
const html = schön.html (Code, Einstellungen)

// CSS
const css = schön.css (Code, Einstellungen)

// JavaScript
const js = schön.js (Code, Einstellungen)

Jede Funktion gibt eine Zeichenfolge zurück, die den verschönerten Code enthält. Sie können die Ausgabemethode jeder Sprache ändern, indem Sie Ihre eigenen Einstellungen übergeben.

Ich wurde mehrmals nach schöneren gefragt, ein ähnliches Werkzeug. Es ist also erwähnenswert, dass ich mich für Js verschönern wollte, weil es nicht zu willkürlich und konfigurierbarer ist. Wenn die Nachfrage groß genug ist, würde ich in Betracht ziehen, eine Option zum Wechseln zwischen JS verschönern und schöner hinzuzufügen.

Ich habe diese Bibliotheken schon einmal verwendet, daher ist die Integration tatsächlich sehr einfach. ?

Dieses Projekt ist meiner Anwendung surrealer CMS zu verdanken. Wenn Sie nach einem hervorragenden CMS für statische Websites suchen, überprüfen Sie es - es ist kostenlos für persönliche, pädagogische und gemeinnützige Websites!

Oh, wenn Sie wissen möchten, welchen Editor ich verwende, ist es Visual Studio -Code. ??‍?

Das obige ist der detaillierte Inhalt vonWie ich in zwei Tagen einen Code -Verschönerer erstellt habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!