Aujourd'hui, j'ai publié ma première extension VS Code - Clamp it ! Cette extension facilite la génération des tailles restreintes pour votre code CSS.

Je l'ai fait parce que je voulais être plus productif. Mon processus actuel consistait à accéder à un site Web de générateur de pinces en ligne, à saisir les tailles souhaitées, puis à les copier-coller dans mon code.

Je l'ai réalisé avec l'aide de ChatGPT. 90% du code est produit par ChatGPT. J'ai dû peaufiner certaines choses et j'ai eu l'idée, donc je suppose que je mérite un certain crédit.

Pour commencer à l'utiliser, configurez-le d'abord en définissant les options suivantes dans le fichier settings.json global (Palette de commandes : Préférences : Ouvrir les paramètres utilisateur (JSON)) ou le fichier settings.json de votre projet (Palette de commandes : Préférences : Ouvrir Paramètres de l'espace de travail (JSON) :

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

Ensuite, saisissez les tailles minimale et maximale (en pixels), mettez en surbrillance les tailles saisies, puis choisissez Clamp it ! commande de la palette de commandes :

Si vous le souhaitez, vous pouvez utiliser la définition complète, comme ceci :

16, 20, 16, 600, 1200

où

• le premier paramètre est la taille minimale,
• le deuxième paramètre est la taille maximale,
• le troisième paramètre est la taille de police de base,
• le quatrième paramètre est la taille minimale de la fenêtre d'affichage, et
• le cinquième paramètre est la taille maximale de la fenêtre d'affichage.

Notez que la sortie est toujours en unités REM :

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

C'est ça! J'espère que cette petite extension vous rendra plus productif comme elle m'a rendu.