منسّق الأكواد وضاغطها
نسّق أو اضغط HTML وCSS وJavaScript وSQL، مع اكتشاف اللغة تلقائيًا، وكل ذلك داخل متصفحك.
منسّق الأكواد - تنسيق وضغط HTML وCSS وJavaScript وSQL أونلاين
الصق كودًا وصلك في سطر واحد، أو كودًا جاهزًا للنشر، وحوّله إلى ما تحتاجه: مرتّبًا بمسافات بادئة واضحة وسهل القراءة، أو مضغوطًا إلى أقل عدد ممكن من البايتات. يتعامل المنسّق مع HTML وCSS وJavaScript وSQL، ويتعرّف تلقائيًا على اللغة التي لصقتها، وينجز كل شيء داخل متصفحك، فلا يغادر جهازك كود المصدر ولا الاستعلامات التي تحمل أسماء جداولك ولا المقتطفات المأخوذة من مشروع لعميل.
التنسيق موجّه إلى البشر: مراجعة طلب دمج (pull request)، أو قراءة حزمة مضغوطة، أو تتبّع خطأ في استعلام كتبه أحدهم في سطر واحد طويل. أما الضغط فموجّه إلى الآلات: الملفات الأصغر تُحمَّل أسرع وتستهلك نطاقًا تردديًا أقل. أداة واحدة تغطي الاتجاهين.
طريقة الاستخدام
- الصق الكود. يكون خيار اللغة مضبوطًا على اكتشاف تلقائي؛ اختر HTML أو CSS أو JavaScript أو SQL بنفسك إن أخطأ التخمين.
- اضغط تنسيق لترتيبه بمسافات بادئة، أو ضغط لتصغيره.
- اضبط المسافة البادئة على مسافتين أو 4 مسافات أو علامات جدولة، ومع SQL اختر لهجة SQL وطريقة كتابة الكلمات المفتاحية.
- اضغط نسخ أو تنزيل. يعرض السطر أسفل الأداة الحجم قبل المعالجة وبعدها، ومقدار ما وفّره الضغط.
ما الذي تستخدمه كل لغة
| اللغة | التنسيق | الضغط |
|---|---|---|
| HTML | js-beautify: الوسوم المتداخلة بمسافات بادئة، والوسوم السطرية تبقى في سطرها | حذف التعليقات والمسافات بين العناصر الكتلية؛ مع ترك pre وtextarea وscript وstyle دون مساس |
| CSS | js-beautify: تصريح واحد في كل سطر | حذف التعليقات والمسافات مع الإبقاء على النصوص، والإبقاء على المسافات حيث تحتاجها القيم، مثل 0 auto وcalc(100% - 32px) |
| JavaScript | js-beautify: الأقواس المعقوفة والكتل والاستدعاءات المتسلسلة بمسافات بادئة | Terser: يحلّل الكود، ويزيل الزوائد، ويختصر أسماء المتغيرات المحلية |
| SQL | sql-formatter: كل عبارة في سطرها، مع مراعاة اللهجة | حذف التعليقات وطيّ المسافات خارج علامات الاقتباس إلى مسافة واحدة |
المكتبات الثلاث مفتوحة المصدر، ولا تُحمَّل إلا عند أول استخدام للغتها، فتبقى الصفحة نفسها خفيفة.
تنسيق SQL
مراجعة استعلام طويل مكتوب في سطر واحد أمر مرهق. يضع منسّق SQL كلًّا من SELECT وFROM وWHERE وGROUP BY وكل JOIN في سطر مستقل، ويزيح الأعمدة والشروط تحتها. وللّهجات أهميتها لأن قواعد البيانات تختلف في الصياغة: الأسماء المحاطة بعلامة الاقتباس المائلة (backtick) من MySQL، والأقواس المربعة من SQL Server، والتحويل بـ :: من PostgreSQL. اختر لهجتك من بين SQL القياسية وMySQL وMariaDB وPostgreSQL وSQLite وSQL Server وOracle PL/SQL وBigQuery وSnowflake. ويمكن كتابة الكلمات المفتاحية بـ أحرف كبيرة (UPPERCASE) أو أحرف صغيرة (lowercase) أو كما كُتبت؛ أما أسماء جداولك وأعمدتك فلا تتغير أبدًا.
ضغط آمن
يجب أن يتصرف الكود المضغوط تمامًا كالأصل، والطريقة الآمنة لضمان ذلك هي فهم الكود بدل حذف الأحرف عشوائيًا. لذلك يُضغط JavaScript بواسطة Terser الذي يحلّله أولًا إلى شجرة صياغة؛ فإن احتوى الكود على خطأ نحوي حصلت على رقم السطر والعمود بدل مخرجات معطوبة. ويحتفظ ضاغط CSS بالمسافات التي تحمل معنى، ويترك ضاغط HTML مسافة واحدة بين العناصر السطرية مثل <span>a</span> <span>b</span>، لأن حذفها يلصق كلمتين على الصفحة.
ضغط الكود هنا (minify) ليس بديلًا عن الضغط الذي يجريه الخادم. فـ Gzip أو Brotli يقلّص الملفات النصية عادةً بنسبة 70% أو أكثر فوق ما يحققه تصغير الكود، والطريقتان تعملان معًا بانسجام.
استخدامات شائعة
- قراءة ملف مضغوط من مكتبة خارجية أو من حزمة الإنتاج أثناء تتبّع الأخطاء.
- ترتيب HTML صدّرته أداة تصميم رسائل بريد أو نظام إدارة محتوى قبل تعديله يدويًا.
- مراجعة استعلام منسوخ من سجل، أو من سطر تصحيح في ORM، أو من رسالة زميل في الدردشة.
- تصغير مقتطف من CSS أو JavaScript قبل تضمينه داخل صفحة أو قالب بريد إلكتروني.
أدوات ذات صلة
بالنسبة إلى JSON، يتحقق منسّق JSON من صحته وينسّقه، ويحوّله محوّل JSON إلى YAML أو CSV أو XML. ولترى بالضبط ما غيّره التنسيق، الصق النسختين قبل وبعد في أداة مقارنة النصوص. ولمهمة واحدة بعينها، تفتح صفحات المهام هذه الأداة جاهزة للعمل: منسّق HTML ومنسّق SQL وضاغط CSS وضاغط JavaScript ومنسّق JavaScript.