FPC PAS2JS Studio

pas2js Compiler-Integration, Web Form Designer und VSCode Extension-Entwicklung in Pascal.

Package-ID: wvds.wvds-fpc-pas2js-studio

PAS2JS Studio erweitert den Solution Manager um Werkzeuge für die Entwicklung mit dem pas2js Compiler (Pascal to JavaScript):

• VSCode Extension Entwicklung — Pascal-basierte Extensions bauen, testen, paketieren
• Web-Anwendungen — Browser-Apps mit pas2js kompilieren und live testen
• Web Form Designer — Visueller WFM-Editor für Web-Formulare
• Live Server — Automatischer Rebuild und Browser-Vorschau

Wird automatisch erkannt wenn package.json ein VSCode Extension Manifest ist (engines.vscode vorhanden).

Das Projekt erscheint als virtuelles Projekt im Solution Manager Tree View — mit allen Pascal-Units, npm Dependencies und InnoSetup-Skripten.

pas2js Web-Apps werden über .wfm oder .wfmproj Dateien erkannt.

Pascal (.pas) → pas2js → extension.pas2js.js → esbuild → extension.js

1. pas2js kompiliert Pascal zu JavaScript
2. esbuild bundelt npm-Dependencies und minimiert (Release)
3. Ergebnis: einzelne extension.js in dist/

Rechtsklick auf ein VSCode Extension-Projekt zeigt das Extension Build Submenü:

• Build (Debug) / Build (Release) / Rebuild / Clean
• Watch / Run Tests
• Package VSIX / Install / Publish
• Minify

Am Extension-Projekt im Tree View:

• Build (Play-Icon) — Debug-Build
• Watch (Eye-Icon) — Watch-Modus starten

Im Watch-Modus startet ein lokaler HTTP-Server:

• Port: konfigurierbar über fpc-pas2js.webApp.liveServerPort (Standard: 8080)
• Auto-Open: Browser öffnet automatisch (fpc-pas2js.webApp.autoOpenBrowser)
• Auto-Reload: Seite wird bei Datei-Änderungen automatisch neu geladen

Der WFM Designer öffnet sich automatisch für .wfm Dateien.

Ein Web-Formular besteht aus:

• .pas — Pascal-Unit mit Formular-Logik
• .wfm — Formular-Layout (ähnlich .lfm für LCL)

pas2js Web-Apps können im Browser debuggt werden:

• Debugger-Typ: pas2js-browser
• Debug-Port: konfigurierbar über fpc-pas2js.debug.browserDebugPort (Standard: 9222)

Konfiguration: fpc-pas2js.debug.sourceMapMode

Validate Source Maps: Prüft ob Source Maps korrekt generiert wurden.

PAS2JS Studio bringt eine eigene Formatter-Konfiguration mit:

Der Test Explorer integriert sich in die VSCode Testing-API und erkennt FPCUnit-Tests automatisch.

Tests folgen dem FPCUnit-Muster:

unit MyFeature.test;
 
interface
 
uses
  fpcunit, testregistry;
 
type
  TMyFeatureTest = class(TTestCase)
  published
    procedure Test_Add_ReturnsSum;
    procedure Test_Divide_ByZero_Raises;
  end;
 
implementation
 
procedure TMyFeatureTest.Test_Add_ReturnsSum;
begin
  AssertEquals(4, Add(2, 2));
end;
 
procedure TMyFeatureTest.Test_Divide_ByZero_Raises;
begin
  AssertException(EDivByZero, @DoDivideByZero);
end;
 
initialization
  RegisterTest(TMyFeatureTest);
end.

• Test-Dateien werden im konfigurierten test.testDir nach test.testPattern gesucht
• Klassen die von TTestCase erben werden als Test-Suites erkannt
• published Methoden die mit Test beginnen werden als einzelne Tests erkannt

• Run Tests — Alle Tests kompilieren und ausführen
• Debug Tests — Tests im Debugger ausführen (Breakpoints in Test-Code möglich)

• Ergebnisse erscheinen im VSCode Testing Panel (Seitenleiste)
• Fehlerhafte Tests zeigen die Fehlermeldung und Zeilennummer
• Grün = bestanden, Rot = fehlgeschlagen, Gelb = übersprungen

Eigene pasls-Konfiguration:

• fpc-pas2js.pasls.enabled — Language Server aktivieren
• fpc-pas2js.paslsPath — Pfad zu pasls
• fpc-pas2js.lazarusSourcePath — Lazarus-Quellen für Referenzen

Alle Einstellungen beginnen mit fpc-pas2js.:

PAS2JS Studio registriert Pascal und WFM Sprachen:

• Pascal (.pas, .pp, .inc) — TextMate Grammar
• WFM (.wfm) — Web Form Markup

• WvdS FPC Tools Übersicht
• Installation und Konfiguration
• FPC Solution Manager
• FPC ISS Designer
• Häufige Fragen (FAQ)