Hoy publiqué mi primera extensión de VS Code: ¡sujétela! Esta extensión facilita la generación de tamaños fijados para su código CSS.

Lo hice porque quería ser más productivo. Mi proceso actual incluía ir a un sitio web de generador de abrazaderas en línea, ingresar los tamaños deseados y luego copiarlos y pegarlos en mi código.

Lo hice con la ayuda de ChatGPT. El 90% del código es producido por ChatGPT. Tuve que modificar algunas cosas y se me ocurrió la idea, así que creo que merezco algo de crédito.

Para comenzar a usarlo, primero configúrelo estableciendo las siguientes opciones en el archivo global settings.json (Paleta de comandos: Preferencias: Abrir Configuración de usuario (JSON)) o en el archivo settings.json de su proyecto (Paleta de comandos: Preferencias: Abrir Configuración del espacio de trabajo (JSON):

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

A continuación, escriba los tamaños mínimo y máximo (en píxeles), resalte los tamaños escritos y luego elija ¡Sujetar! comando de la paleta de comandos:

Si quieres, puedes usar la definición completa, así:

16, 20, 16, 600, 1200

dónde

• el primer parámetro es el tamaño mínimo,
• el segundo parámetro es el tamaño máximo,
• el tercer parámetro es el tamaño de fuente base,
• el cuarto parámetro es el tamaño mínimo de la ventana gráfica, y
• el quinto parámetro es el tamaño máximo de la ventana gráfica.

Tenga en cuenta que la salida siempre está en unidades REM:

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

¡Eso es todo! Espero que esta pequeña extensión te haga más productivo como me hizo a mí.