مُنسِّق JavaScript
نسِّق JavaScript وTypeScript باستخدام Prettier، مع تحكم في المسافة البادئة والفاصلة المنقوطة ونمط علامات الاقتباس. مُحلِّل حقيقي، لذا تُعامَل حرفيًا القوالب النصية والتعبيرات النمطية وJSX بشكل صحيح.
- الملفات لا تغادر جهازك أبدًا
- مجاني، بدون تسجيل
- بدون علامات مائية
- يعمل دون اتصال بعد التحميل
كيفية استخدام مُنسِّق JavaScript
- 1
ألصق كودك
JavaScript أو TypeScript أو JSX.
- 2
حدّد نمطك
المسافة البادئة، الفاصلة المنقوطة، وتفضيل علامات الاقتباس.
- 3
انسخ النتيجة
مُنسَّق بالضبط كما سيفعل Prettier في محررك.
لماذا يتطلب تنسيق JavaScript فعليًا تشغيل Prettier
Prettier ليس مجرد الإلهام لإخراج تنسيق هذه الأداة — إنه حزمة Prettier نفسها، مُنزَّلة ومُشغَّلة في متصفحك بدلًا من عبر Node على خادم، لذا النتيجة مطابقة بايت لبايت لما سينتجه تشغيل `npx prettier` محليًا بنفس التكوين. ذلك التمييز مهم لأن تنسيق JavaScript صعب حقًا تقريبه: فعله بشكل صحيح يتطلب تحليل اللغة بالكامل، لا مطابقة أنماط، ومُنسِّق يُقارب فقط سلوك Prettier سيختلف عن تكوين Prettier الفعلي لمشروع بالضبط في الحالات الحدّية التي تهم — داخل مُزخرِف، نوع عام معقد، أو تعبير JSX غير عادي.
لماذا تنكسر أدوات تنسيق JavaScript الساذجة في الكود الحقيقي
يحتوي JavaScript عدة تراكيب تجعل نهج عد الأقواس والفاصلات المنقوطة البسيط يفشل مباشرة. يمكن أن تحتوي القوالب النصية نصًا عشوائيًا بين علامات التنصيص الخلفية، بما في ذلك أحرف تبدو بالضبط ككود — `` `function() { return "not real code"; }` `` قيمة سلسلة واحدة، لا ثلاث جمل، ومُنسِّق لا يتتبع حدود القوالب النصية سيُسيء تفسيرها. تعبيرات نمطية حرفية أسوأ: `/{}/` يحتوي أحرفًا تبدو كأقواس معقوفة لكنها جزء من نمط التعبير النمطي نفسه، لا صياغة بنيوية. يُضيف الإدراج التلقائي للفاصلة المنقوطة طبقة ثالثة من الصعوبة، بما أن JavaScript يسمح بحذف الفاصلات المنقوطة في سياقات كثيرة ويستنتج أين تنتهي جملة وفقًا لقواعد ليس لدى مُنسِّق ساذج قائم على الأسطر طريقة لتكرارها بشكل صحيح. تحليل اللغة فعليًا في شجرة صياغة مناسبة، كما يفعل Prettier، هو ما يتجنب أنماط الفشل الثلاثة — مُنسِّق اختصار يُخطئ حتى في واحد منها في كود إنتاج خطر، لا راحة.
ما لا يفعله Prettier عمدًا
يُنسِّق Prettier الكود — يُوحِّد المسافات البيضاء والأسطر الجديدة ونمط علامات الاقتباس واختيارات عرضية مماثلة — ولا يتحقق صراحة من صحة الكود أو سلامة أنواعه أو خلوّه من الأخطاء. ملف بخطأ نوع، مرجع لمتغير غير مُعرَّف، أو خطأ منطقي يُنسَّق دون شكوى ما دام صحيحًا نحويًا، لأن التنسيق والتحقق من الأنواع اهتمامان منفصلان تتعامل معهما أدوات منفصلة. مُترجم TypeScript نفسه، أو أداة فحص مثل ESLint، هو حيث يُتحقَّق من الصحة؛ ينتهي عمل هذه الأداة عند جعل الكود ذا نمط متسق وقابل للقراءة.
لماذا تلجأ الفرق إلى نمط مشترك بدلًا من الجدال حوله
تبويبات مقابل مسافات، علامات اقتباس مفردة مقابل مزدوجة، فاصلة منقوطة أو لا — لا يؤثر أي من هذه الاختيارات بشكل ملموس على كيفية تشغيل الكود، وكانت الخلافات حولها تستهلك وقتًا حقيقيًا في نقاشات مراجعة الكود لا علاقة لها بالصحة. القيمة الحقيقية المُقدَّمة من Prettier هي إزالة ذلك النقاش من الطاولة تمامًا: مجموعة صغيرة وحاسمة من قواعد التنسيق مُطبَّقة تلقائيًا ومتطابقة في كل مكان تعني أن النقاش يُحسَم مرة واحدة، في التكوين، بدلًا من تكراره في كل طلب سحب من ذلك الحين فصاعدًا.
مطابقة تكوين مشروع معين
كل خيار مُعرَض هنا — عرض المسافة البادئة، الفاصلة المنقوطة، نمط علامات الاقتباس — يعكس إعداد تكوين Prettier حقيقيًا، لذا لصق كود من مشروع بملف `.prettierrc` معروف ومطابقة نفس تلك الإعدادات هنا يُعيد إنتاج بالضبط ما ستنتجه أداة ذلك المشروع نفسها، دون الحاجة لتثبيت أي شيء محليًا فقط للتحقق من كيفية تنسيق مقتطف.
الأسئلة الشائعة
هل هذا نفس تشغيل Prettier محليًا؟
نعم — إنه Prettier نفسه، يعمل في متصفحك بدلًا من Node. بنفس الخيارات تحصل على إخراج مطابق بايت لبايت لـ`npx prettier` على نفس الملف.
لماذا لا تُستخدَم أداة تنسيق أبسط؟
لأن أدوات التنسيق الساذجة تكسر الكود الحقيقي. الأقواس المعقوفة داخل القوالب النصية والتعبيرات النمطية، وJSX، والإدراج التلقائي للفاصلة المنقوطة كلها تتطلب تحليل اللغة فعليًا. أداة تنسيق تُفسد بصمت ملفًا واحدًا من كل خمسين أسوأ من عدمها.
هل تعمل مع TypeScript وJSX؟
نعم. تُحلَّل تعليقات الأنواع والأنواع العامة والمُزخرِفات (decorators) وJSX كلها. لاحظ أنها تُنسِّق فقط — لا تتحقق من الأنواع ولا تُحوِّل.
لماذا فشل التنسيق؟
الكود به خطأ صياغة — يجب على Prettier تحليله قبل أن يستطيع طباعته. تتضمن الرسالة سطر وعمود المشكلة الأولى، وهو عادةً كافٍ لإيجادها.
هل يُرسَل كودي إلى خادم؟
لا. يُنزَّل Prettier إلى متصفحك ويعمل هناك. لا يغادر الكود المملوك جهازك أبدًا، وهذا غير صحيح في معظم أدوات التنسيق عبر الإنترنت.
مهام شائعة لأداة مُنسِّق JavaScript
قد تحتاج أيضًا إلى
مُنسِّق JSON
نسِّق وتحقق من وصغِّر JSON فورًا
مُنسِّق HTML
جمِّل وضع مسافة بادئة لـHTML بشكل صحيح
مُنسِّق CSS
جمِّل أو صغِّر أوراق الأنماط
مُرمِّز ومُفكِّك ترميز Base64
رمِّز وفُك ترميز Base64 وBase64URL
أداة تصغير CSS
صغّر أوراق الأنماط بأداة تصغير حقيقية تفهم CSS
مولّد التجزئة (Hash)
MD5 وSHA-1 وSHA-256 وSHA-384 وSHA-512
أداة تصغير JS
صغّر جافاسكريبت بتصغير حقيقي، لا بتعابير نمطية
مُفكِّك ترميز JWT
فُك ترميز وافحص JSON Web Tokens