Heute habe ich meine erste VS Code-Erweiterung veröffentlicht – Clamp it! Mit dieser Erweiterung können Sie ganz einfach die geklemmten Größen für Ihren CSS-Code generieren.

Ich habe es gemacht, weil ich produktiver sein wollte. Mein aktueller Prozess bestand darin, eine Online-Website für Klemmengeneratoren aufzurufen, die gewünschten Größen einzugeben und sie dann zu kopieren und in meinen Code einzufügen.

Ich habe es mit Hilfe von ChatGPT erstellt. 90 % des Codes werden von ChatGPT erstellt. Ich musste ein paar Dinge optimieren und kam auf die Idee, also verdiene ich wohl etwas Anerkennung.

Um es zu verwenden, konfigurieren Sie es zunächst, indem Sie die folgenden Optionen in der globalen Datei „settings.json“ (Befehlspalette: Einstellungen: Benutzereinstellungen öffnen (JSON)) oder Ihrer Projektdatei „settings.json“ (Befehlspalette: Einstellungen: Öffnen) festlegen Arbeitsbereichseinstellungen (JSON)):

{
  "clampExtension.globalMinViewport": 600,
  "clampExtension.globalMaxViewport": 1440,
  "clampExtension.baseFontSize": 16
}

Als nächstes geben Sie die minimale und maximale Größe (in Pixeln) ein, markieren die eingegebenen Größen und wählen dann „Klemmen!“. Befehl aus der Befehlspalette:

Wenn Sie möchten, können Sie die vollständige Definition verwenden, etwa so:

16, 20, 16, 600, 1200

Wo

• Der erste Parameter ist die Mindestgröße,
• Der zweite Parameter ist die maximale Größe,
• Der dritte Parameter ist die Basisschriftgröße,
• Der vierte Parameter ist die minimale Größe des Ansichtsfensters und
• Der fünfte Parameter ist die maximale Größe des Ansichtsfensters.

Beachten Sie, dass die Ausgabe immer in REM-Einheiten erfolgt:

clamp(1rem, calc(0.821rem   0.476vw), 1.25rem)

Das ist es! Ich hoffe, dass diese kleine Erweiterung Sie produktiver macht, als sie mich gemacht hat.