Visual Studio Code - WSC

  • wVSC-Theme-creator-logo.png

    Hallo alle zusammen,


    in unserer letzten Ankündigung, hatten wir erwähnt, dass wir zurzeit an einem Plugin für die IDE Visual Studio Code arbeiten ( siehe hier ).

    Ich denke, ich werde diesen Thread als Blog / DevChangelog nutzen um euch hier immer auf dem laufenden zu halten.


    Das waren nur einige Features die integriert worden sind, weitere folgen noch :)

    Feedbacks sind jederzeit Willkommen :love:


    Ziel:


    Unser Ziel ist es, die ganze Stil Entwicklung auf den Visual Studio Code IDE (Abkürzung: VSC) auszulagern.

    Im Woltlab Suite Core kann man nur in dem Admin Dashboard Stile entwickeln.

    Das nervige war, man hatte tausende Tabs offen um Templates oder das (S)CSS abzuspeichern.

    Ebenfalls konnten wir schwierig parallel an einem Stil arbeiten. Damit soll jetzt Schluss sein.


    VSC bietet ebenfalls einen Intellisense, was die Arbeit noch mehr erleichtert.


    Aktuelle Features:

    • Echtzeit Synchronisation zum eigenen Forum
    • Versionierung
    • Stil Erstellung via VSC
    • Stil Clonen via VSC
    • Bilder Synchronisation via VSC ( kein ACP / FTP mehr notwendig )
    • Alle WSC Theme Einstellungen können via VSC angepasst werden
    • Integrierte Farbpalette von Woltlab
    • Collaboration mit mehreren möglich
    • Woltlab Standard Snippets ( aus der Dokumentation )
    • Eigener Snippetgenerator
      • für (S)CSS, Template & JavaScript
      • Custom Snippets werden mit allen geteilt


    Aktueller Stand:


    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.


    External Content www.youtube.com
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.

  • Das hört sich ja super an. Ist sicher klasse so zu arbeiten ja, zudem gleich noch alles in ein repository pushen zu können ohne immer alles rein zu kopieren.

    Jop, die derzeitige Bearbeitung ist einfach nicht das Gelbe vom Ei, zumal der Editor im ACP eher nutzlos als wirklich hilfreich ist. Ich bin schon froh, dass ich in meiner Entwicklungsumgebung auf ACE setze. Hoffentlich wird sich irgendwann mal von Codemirror getrennt.

    Ich bin auf das Release gespannt und freue mich schon, es sieht jetzt schon sehr gut aus.

  • Ja was soll ich sagen außer, eh gaaaaaai'eeel....

    Alles macht in VSC mehr spaß als im ACP :)

    Habe jetzt nun Templates erstellt, kopiert oder auch JS Auslagerung und Dateierstellung.

    (S)CSS haben wir ja schon seit unserem Core mit dem Extendend SCSS Editor erstellt, in VSC macht das natürlich noch mehr spaß. Das einzige Manko was es noch zurzeit gibt, ist das der WL SCSS Compiler noch kein @use oder @forwards unterstützt, wir müssen immer noch auf das gute alte @import zurückgreifen.


    Werde die Tage dann in VSC an dem neuen Design weiter basteln, also eigentlich sofort wenn NaThan das auf der Entwicklerseite installiert hat.


    Mit dem Release müsst ihr euch noch etwas gedulden, wollten gerne das VSC Plugin in einem Stream vorstellen, sind nicht sicher ob das alles ohne eine Dokumentation reicht, bevor hier im Forum die Hölle los is :D

  • Das hört sich ja super an. Ist sicher klasse so zu arbeiten ja, zudem gleich noch alles in ein repository pushen zu können ohne immer alles rein zu kopieren.

    Ja genau, nun hätte man auch die Möglichkeit GIT ins Projekt zu integrieren :)


    Jop, die derzeitige Bearbeitung ist einfach nicht das Gelbe vom Ei, zumal der Editor im ACP eher nutzlos als wirklich hilfreich ist. Ich bin schon froh, dass ich in meiner Entwicklungsumgebung auf ACE setze. Hoffentlich wird sich irgendwann mal von Codemirror getrennt.

    Ich bin auf das Release gespannt und freue mich schon, es sieht jetzt schon sehr gut aus.

    Oh je, ja gut das ist auch ne Lösung.

    Aber ich finde die Integration zu Visual Studio Code kann man nicht mehr toppen, vor allem du hast alles was du brauchst.


    Es ist sooo nice, du hast das Forum und deine IDE auf.

    Sobald du abspeicherst lädst du die Seite neu und baaaaam :)


    Habe noch sooo viele Ideen wie man mit dem WSC anstellen könnte 8o

  • Update


    Wupp Wupp, wir haben ein weiteres Feature entwickelt.

    Nun hat man die Möglichkeit die Stile via ACP per Klick zu clonen.

    Vorher musste man in VSC ( Visual Studio Code ) einen Befehl aufrufen und die gewünschte Stil-ID angeben.


    Jetzt kann man noch einfacher via einem Klick das gewünschte Stil clonen.

    Unter anderem haben wir noch ein paar Fixes angepasst, Multi-Workspace wird nun unterstützt.


    External Content www.youtube.com
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.


    P.S: Ich habe diesen Clip mit OBS aufgenommen, irgendwie ist die Qualität nicht sooo toll. Soll aber ja nur als Preview dienen.

    Das ganze werden wir euch am Ende präsentieren.

  • Mit dem Release müsst ihr euch noch etwas gedulden,

    Schade :-(



    wollten gerne das VSC Plugin in einem Stream vorstellen, sind nicht sicher ob das alles ohne eine Dokumentation reicht, bevor hier im Forum die Hölle los is

    Eine Schritt für Schritt Anleitung wäre da wohl besser und langlebiger als ein Stream. So kann man da immer mal wider nachlesen und ihr auch darauf verlinken und ggf. einfach Änderungen anpassen.

  • Update

    Zur Zeit laufen die Entwicklungen etwas mühsam weiter.

    Folgende Features wurden bzw. werden aktuell entwickelt:

    • VSC Sync Stil Exporter
    • Sprachen über VSC (Visual Studio Code) Verwalten


    Aktuell baue ich einen eigenen Stil Exporter, der an unser Plugin angelehnt ist.

    Beim Exporter hat man einige Möglichkeiten festzulegen, was genau exportiert werden soll.


    Hier mal ein kleiner Ausschnitt:


    Export 1.PNG Export 2.PNG Export 3.PNG


    Zusätzlich soll ein neues Feature dazu kommen und zwar Sprachvariablen.

    Als Entwickler soll man die Möglichkeit haben über die IDE Stil bezogene Sprachvariablen anlegen und verwalten zu können.

    Die eigenen Sprachvariablen können dann ebenfalls während der Entwicklung ins Template eingebunden werden.

    Ebenfalls kann man dann später beim Exportieren diese Variablen mit Exportieren.


    Ein Video dazu wird evt. später folgen, da ich aktuell noch in der Entwicklung dran bin.


    Dokumentation

    Neben der Entwicklung habe ich bereits angefangen eine Dokumentation für das Plugin & für unser Visual Studio Code Extension zu schreiben.

    Ich hoffe das ich am Ende alles relativ gut erklärt und beschrieben habe, sollten später (nach dem Release) Fragen oder Probleme geben, werde ich diese jederzeit in unsere Dokumentation mit einpflegen.


    Mir liegt es besonders auf dem Herzen, eine gute, sowie verständliche Dokumentation zu haben damit jeder alles genau nachlesen kann.


    Hier ein kleiner Ausschnitt mit dem neuen LoSti's World Design:


    IMG_20210425_214316.png

  • Changelog 1.0.3

    Es ist nun wieder etwas Zeit vergangen, um Changelog 1.0.3 verkünden zu können.

    Feature

    Schriftarten:


    Zwei weitere Features wurden zum Core Modul hinzugefügt.

    Nun kann man über den VSC IDE (Visual Studio Code IDE) im Stil Projekt selber, Schriftarten hinzufügen.

    Im jeweiligen fonts Verzeichnis kannst Du lokal eine oder mehrere Schriftart(en) hinzufügen und diese direkt im (S)CSS implementieren.

    Die Schriftart wird, so wie bei den Bildern, direkt synchronisiert.


    Sprache / Language:


    Die Sprachfunktion darf natürlich in Woltlab während einer Stilentwicklung nicht fehlen.

    Ab jetzt kann man im jeweiligen Stil Projekt Sprachvariablen (multilingual) anlegen.

    Sobald man die eigenen Sprachvariablen angelegt hat (über die IDE), kann man diese direkt in den Templates verwenden.

    Damit man nicht alle selbst angelegten Sprachvariablen merken muss, haben wir zusätzlich einen WSC Language-Intellisense zur Unterstützung entwickelt.


    Der Exporter wurde dementsprechend ebenfalls angepasst, Schriftarten sowie Sprachvariablen werden automatisch exportiert.

    2 Klicks und Du musst nichts mehr selber zusammenpacken.


    Update

    Wir haben unser Kollaboration-Modul noch einmal überarbeitet und eine weitere Schnittstelle angebunden.

    Nun hat man die Möglichkeit (via Echtzeit) an einem oder mehreren Stilen gleichzeitig mit anderen zu Entwickeln.

    Ich plane noch eine weitere Schnittstelle / Bridge einzubinden.


    Zusätzlich zum Kollaboration-Modul haben wir den Discord Webhook implementiert.

    Diesbezüglich folgt später noch ein Update.

    Stuff

    • Weitere (kleinere) Optimierungen wurden angepasst
    • Automatisierte Tests für unser VSC (Visual Studio Code) Extension wurde hinzugefügt
      (Grundlegende Funktionen werden automatisch getestet)
    • Dokumentation schreiben folgt ... =O (Wurde etwas vernachlässigt...)


    Natürlich ist das nicht alles, woran ich gerade Arbeite.

    Arbeite gerade noch an einem weiteren Modul, was die Stile Entwicklung noch mehr vereinfacht und mehr Dynamik reinbringt.

    Bleibt gespannt :*LW

  • Ohne aufdringlich klingen zu wollen, aber gibt es bereits eine Info bzw. einen Zeitraum, wann das Ganze erscheinen soll?

    Zu Weihnachten :)

    NaThan ist fleißig dabei noch ein paar Bugs zu fixen, danach kommen die Tests. Dazu kann dir Nathan aber mehr sagen

  • Joa tut uns ja auch leid, aber wir wollen das ausgiebig Testen.

    Ich kann aber sagen das ich die letzten Tage neben Logos auch noch an den Stil bastel in VSC, bis jetzt funktioniert alles wie gewollt.

    Dazu kommt noch das wir ein paar nette Plugins gebastelt haben, die eigentlich nur noch ans ACP angepasst werden müssen. Wo der NaThan schon fleißig dran ist.


    Könnte ja auch Mal ein kleinen Stream auf Twitch machen wenn ihr Lust darauf habt und euch schon Mal das eine oder andere zeigen?