لقد نشرت اليوم أول ملحق VS Code - Clamp it! هذا الامتداد يجعل من السهل إنشاء الأحجام المثبتة لرمز CSS الخاص بك.

لقد قمت بذلك لأنني أردت أن أكون أكثر إنتاجية. تتضمن عمليتي الحالية الانتقال إلى موقع ويب مولد المشبك عبر الإنترنت، وإدخال الأحجام المطلوبة، ثم نسخها ولصقها في الكود الخاص بي.

لقد قمت بذلك بمساعدة ChatGPT. يتم إنتاج 90% من التعليمات البرمجية بواسطة ChatGPT. اضطررت إلى تعديل بعض الأشياء، وتوصلت إلى الفكرة، لذا أعتقد أنني أستحق بعض التقدير.

لبدء استخدامه، قم أولاً بتكوينه عن طريق تعيين الخيارات التالية في ملف settings.json العام (لوحة الأوامر: التفضيلات: فتح إعدادات المستخدم (JSON)) أو ملف settings.json لمشروعك (لوحة الأوامر: التفضيلات: فتح) إعدادات مساحة العمل (JSON)):

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

بعد ذلك، اكتب الحد الأدنى والحد الأقصى للأحجام (بالبكسل)، وقم بتمييز الأحجام المكتوبة، ثم اختر Clamp it! أمر من لوحة الأوامر:

إذا أردت، يمكنك استخدام التعريف الكامل، مثل:

16, 20, 16, 600, 1200

أين

• المعلمة الأولى هي الحد الأدنى للحجم،
• المعلمة الثانية هي الحد الأقصى للحجم،
• المعلمة الثالثة هي حجم الخط الأساسي،
• المعلمة الرابعة هي الحد الأدنى لحجم إطار العرض، و
• المعلمة الخامسة هي الحد الأقصى لحجم إطار العرض.

لاحظ أن الإخراج يكون دائمًا بوحدات REM:

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

هذا كل شيء! آمل أن يجعلك هذا الامتداد الصغير أكثر إنتاجية كما جعلني أشعر بذلك.