منسق الكود

نسّق كود JavaScript وTypeScript وJSX وJSON وHTML وXML وCSS وSCSS وLESS وSQL وYAML وMarkdown وGraphQL واجعله سهل القراءة

اللغة

الإدخال

الإخراج

نبذة عن منسق الكود

ينسق «منسق الكود» 13 لغة في متصفحك ويتعرف على اللغة التي لصقتها. تمر JavaScript وTypeScript وJSX وHTML وCSS وSCSS وLESS وYAML وMarkdown وGraphQL عبر Prettier 3؛ وXML عبر إضافة XML في Prettier بعد التحقق من أنه سليم البنية؛ وSQL عبر sql-formatter، مع 20 لهجة؛ وJSON عبر أداة ضبط المسافات البادئة الخاصة بالموقع، التي تحفظ كل رقم وكل تسلسل لتخطي الأحرف وترتيب المفاتيح كما كتبت. يطبق Prettier أسلوبه الخاص، لذا قد تتغير علامات الاقتباس والفواصل المنقوطة والتفاف الأسطر. وعندما يبلغ المحرك عن خطأ في بناء الجملة، لا ينسق أي شيء ويعرض الإخراج الرسالة مع موضع الخطأ كلما ذكره المحرك.

مثال

يقرأ «اكتشاف تلقائي» هذا الكود على أنه GraphQL؛ ويكتب السطر تحت الإخراج «تم التنسيق بلغة GraphQL (مكتشفة تلقائيا)».

الإدخال

query{user(id:1){name,friends(first:2){name}}}

الإخراج

query {
  user(id: 1) {
    name
    friends(first: 2) {
      name
    }
  }
}

كيفية تنسيق الكود عبر الإنترنت

1الصق الكود في «الإدخال».
2اترك «اكتشاف تلقائي» في قائمة «اللغة»، أو اختر اللغة؛ ومع SQL تظهر قائمة «لهجة SQL».
3انقر على «تنسيق».
4تحقق من السطر تحت الإخراج، الذي يذكر اللغة المستخدمة، ثم انقر على «نسخ» أو «تنزيل».

الصيغ والحدود

اللغات: JavaScript, TypeScript, JSX (React), JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown, GraphQL
لهجات SQL: 20: SQL القياسية, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, Amazon Redshift, ClickHouse, DuckDB, Trino / Presto, Spark SQL, Hive, IBM Db2, IBM Db2 for i, SingleStore, TiDB, N1QL (Couchbase)
الأسلوب: Prettier بعرض سطر 80 حرفا ومسافة بادئة من مسافتين (يبقى المحتوى النصي في XML كما كتب)؛ وJSON بمسافة بادئة من مسافتين؛ والكلمات المفتاحية في SQL بأحرف كبيرة
الاكتشاف: يقرأ غالبا أول 4,000 حرف (ويفحص JSON في النص كله)؛ ويصحح التخمين الخاطئ باختيار اللغة

أين يعالج الكود الخاص بك

يجري التنسيق في المتصفح: تجلب كل أداة تنسيق (Prettier مع الإضافة التي تحتاجها اللغة، أو sql-formatter) في أول مرة تنسق فيها تلك اللغة، ولا يرفع الكود الخاص بك أبدا. إذا فشل التنسيق، يرسل السطر الأول من الخطأ، مثل «السطر 3، العمود 12: Unexpected token»، إلى سجل الأخطاء لدينا مع اسم الأداة واسم متصفحك وإصداره، بعد حذف النصوص المقتبسة والأرقام الطويلة والعناوين منه.

الأسئلة الشائعة

هل يمكنه اكتشاف اللغة تلقائيا؟

نعم، من النص نفسه: أحرفه الأولى (وسم أو قوس معقوص أو كلمة مفتاحية من SQL أو GraphQL) وعلامات لا توجد إلا في لغة واحدة، مثل تحديد الأنواع (type annotations) في TypeScript أو $variables في SCSS. إذا كان التخمين خاطئا، فاختر اللغة وانقر على «تنسيق» مرة أخرى.

هل يغير التنسيق الكود الخاص بي؟

لا بالنسبة إلى JSON: تتغير المسافات البيضاء فقط، وتنسخ الأرقام مثل 1.10 أو المعرّفات المكونة من 20 رقما كما كتبت. أما في اللغات الأخرى فيتغير الأسلوب: قد يبدل Prettier علامات الاقتباس، ويضيف الفواصل المنقوطة، ويقسم الأسطر الطويلة، وتكتب الكلمات المفتاحية في SQL بأحرف كبيرة.

هل يبين موضع خطأ بناء الجملة؟

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

ما لهجات SQL المدعومة؟

20، تختارها من قائمة «لهجة SQL» التي تظهر مع SQL، ومنها MySQL وPostgreSQL وSQLite وSQL Server (T-SQL) وOracle (PL/SQL) وBigQuery وSnowflake وClickHouse وDuckDB. ويستخدم «منسق SQL» المحرك نفسه مع قائمة أقصر.

نصائح وحيل

✓الصق ملف JavaScript أو CSS أو HTML مصغرا لتجعله سهل القراءة قبل تصحيح أخطائه.
✓لتنسيق JSON بمسافة بادئة من 4 مسافات أو بعلامات جدولة، أو بمفاتيح مرتبة، استخدم «منسق JSON» الذي يوفر هذه الخيارات.