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!