Hoje publiquei minha primeira extensão do VS Code - Clamp it! Esta extensão facilita a geração de tamanhos fixos para seu código CSS.

Fiz isso porque queria ser mais produtivo. Meu processo atual incluía acessar um site de gerador de pinças on-line, inserir os tamanhos desejados e, em seguida, copiar e colar em meu código.

Consegui isso com a ajuda do ChatGPT. 90% do código é produzido pelo ChatGPT. Tive que ajustar algumas coisas e tive a ideia, então acho que mereço algum crédito.

Para começar a usá-lo, primeiro configure-o definindo as seguintes opções no arquivo global settings.json (Paleta de comandos: Preferências: Abrir configurações do usuário (JSON)) ou no arquivo settings.json do seu projeto (Paleta de comandos: Preferências: Abrir Configurações do espaço de trabalho (JSON)):

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

Em seguida, digite os tamanhos mínimo e máximo (em pixels), destaque os tamanhos digitados e escolha Fixar! comando da paleta de comandos:

Se quiser, você pode usar a definição completa, assim:

16, 20, 16, 600, 1200

onde

• o primeiro parâmetro é o tamanho mínimo,
• o segundo parâmetro é o tamanho máximo,
• o terceiro parâmetro é o tamanho base da fonte,
• o quarto parâmetro é o tamanho mínimo da janela de visualização e
• o quinto parâmetro é o tamanho máximo da janela de visualização.

Observe que a saída está sempre em unidades REM:

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

É isso! Espero que esta pequena extensão torne você mais produtivo, assim como me tornou.