今日、最初の VS Code 拡張機能を公開しました - Clamp it!この拡張機能を使用すると、CSS コードの固定サイズを簡単に生成できます。

生産性を高めたかったので作成しました。私の現在のプロセスには、オンラインのクランプ ジェネレーター Web サイトにアクセスし、希望のサイズを入力し、それをコピーしてコードに貼り付けることが含まれていました。

ChatGPT の助けを借りて作りました。コードの 90% は ChatGPT によって生成されます。いくつかの点を微調整する必要があり、そのアイデアを思いついたので、ある程度の評価は得られると思います。

使用を開始するには、まずグローバル settings.json ファイル (コマンド パレット: [基本設定]: [ユーザー設定 (JSON)] を開く) またはプロジェクトの settings.json ファイル (コマンド パレット: [基本設定]: [開く]) で次のオプションを設定して構成します。ワークスペース設定 (JSON)):

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

次に、最小サイズと最大サイズ (ピクセル単位) を入力し、入力したサイズを強調表示して、[クランプする] を選択します。コマンドパレットからのコマンド:

必要に応じて、次のように完全な定義を使用できます:

16, 20, 16, 600, 1200

どこ

• 最初のパラメータは最小サイズです。
• 2 番目のパラメータは最大サイズです。
• 3 番目のパラメータは基本フォント サイズです。
• 4 番目のパラメータは最小ビューポート サイズであり、
• 5 番目のパラメータは最大ビューポート サイズです。

出力は常に REM 単位であることに注意してください:

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

それでおしまい！この小さな拡張機能によって、私と同じように皆さんの生産性も向上することを願っています。