JavaScript اور HTML بیوٹی فائر

استعمال کا طریقہ 3 مراحل
  1. زبان اور حاشیہ بندی چنیں۔
  2. اپنا کوڈ چسپاں کریں۔
  3. خوبصورت بنائیں دبائیں، پھر کاپی کریں۔
ترتیب دیا گیا کوڈ

ترتیب دینے کا کام مکمل طور پر آپ کے براؤزر میں اوپن سورس js-beautify انجن پر چلتا ہے — وہی جو زیادہ تر ایڈیٹر ایکسٹینشنز کے پیچھے ہے — اس لیے آپ کا کوڈ کبھی کہیں اپ لوڈ نہیں ہوتا۔

یہ ٹول کیسے کام کرتا ہے

ترتیب دینے کا کام js-beautify کرتی ہے، وہی لائبریری جو بہت سے ایڈیٹروں کے دوبارہ ترتیب دینے والے حکم کے پیچھے ہے، اور یہاں کہیں سے منگوانے کے بجائے مقامی طور پر رکھی گئی ہے۔ تین انداز دستیاب ہیں — JavaScript، HTML اور CSS — اور یہ واقعی مختلف پارسر ہیں، ایک ہی معمول میں سوئچ نہیں، اسی لیے غلط انداز چننے سے وقفہ بندی واضح طور پر غلط آتی ہے، کوئی باریک غلطی نہیں۔

وقفہ بندی آپ کی مرضی سے ہے، خالی جگہوں میں یا ٹیب میں۔ پہلے سے موجود خالی سطریں دو مسلسل تک برقرار رکھی جاتی ہیں، اس لیے افعال کے درمیان کا جان بوجھ کر رکھا گیا وقفہ بچ جاتا ہے جبکہ اتفاقی سلسلے صاف ہو جاتے ہیں۔ سطر لپیٹنا بند رکھا گیا ہے، کیونکہ سخت لپیٹ کا کالم عموماً اس چیز سے ٹکراتا ہے جو منصوبہ پہلے سے کر رہا ہو۔

ترتیب دینا کیا ٹھیک کرتا ہے اور کیا نہیں

  • یہ ترتیب دیتا ہے، دوبارہ نہیں لکھتا: نہ کسی متغیر کا نام بدلتا ہے، نہ کوئی بیان آگے پیچھے ہوتا ہے، نہ منطق کو چھیڑا جاتا ہے۔ جو کوڈ پہلے غلط تھا وہ بعد میں بھی غلط ہے، بس زیادہ صفائی سے رکھا ہوا۔
  • انداز فائل کے مطابق چنیں، لاحقے کے مطابق نہیں: مارک اپ سے بھری ٹیمپلیٹ فائل کو HTML والا انداز چاہیے خواہ اس کا نام کچھ اور بتائے، اور صفحے کے اندر موجود JavaScript ارد گرد کی ہر چیز کے ساتھ HTML والے انداز ہی سے ترتیب پاتا ہے۔
  • یہ لِنٹر نہیں ہے: کچھ جانچا نہیں جاتا۔ جو کوڈ پارس نہ ہو سکے وہ مرمت کے بجائے ناکامی بتاتا ہے، اور جو کوڈ پارس تو ہو جائے مگر مشکوک ہو وہ بغیر کسی تبصرے کے ترتیب پا جاتا ہے۔
  • جس منصوبے کا اپنا فارمیٹر ہو وہ اسی کو استعمال کرے: Prettier اور ESLint منصوبے کے طے شدہ انداز کو ساتھ لیے چلتے ہیں۔ یہ کہیں اور سے آئے ہوئے ٹکڑے کے لیے ہے، یا ایسی فائل کے لیے جس کا ایسا کوئی انتظام نہ ہو۔

The same library behind a great many editors' reformat command

Formatting is handled by js-beautify, vendored locally rather than fetched from anywhere, which is the same library sitting behind the reformat command in a great many code editors. The [msm_tool slug="js-beautifier"] offers three modes — JavaScript, HTML and CSS — and they are genuinely separate parsers rather than one routine switching behaviour, which is why picking the wrong one produces indentation that is obviously wrong rather than subtly off.

It reformats, it does not rewrite

No variable is renamed, no statement is reordered, and no logic is touched at any point in the process. Code that was wrong before formatting is exactly as wrong afterwards — simply laid out more clearly, which makes the underlying problem easier to spot rather than fixing it automatically.

Choose the mode to match what was actually pasted

A template file full of markup wants the HTML mode even where its filename suggests otherwise, and JavaScript embedded directly inside a page gets formatted correctly by the HTML mode along with everything around it. The content in front of you, not the extension it happened to arrive with, is what should decide the mode.

It is not a linter

Nothing about the code is checked for correctness beyond whether it can be parsed at all. Code that fails to parse reports a failure rather than being repaired, and code that parses cleanly but is questionable in some other way is formatted exactly as given, without comment either way.

Why my code failed to format at all

A parse failure nearly always means a genuine syntax error somewhere in the source — an unclosed brace, bracket or string being the usual culprits. The formatter has no way to guess past a broken structure, so it reports the failure rather than attempting a repair that could easily make things worse.

Where a project's own formatter should win instead

Prettier and ESLint carry a project's specifically agreed style, and using this instead of either where one is already configured would fight against decisions the project has already made. This tool exists for a snippet arriving from somewhere else, or a file that has no formatting setup behind it at all.

اکثر پوچھے گئے سوالات

خاص طور پر JavaScript اور HTML بیوٹی فائر کے بارے میں۔ اس زمرے سے متعلق عمومی سوالات کے جواب زمرے کے صفحے پر موجود ہیں۔

نہیں۔ صرف خالی جگہ اور سطری ٹوٹیں ہلتی ہیں۔ نہ کسی چیز کا نام بدلتا ہے، نہ ترتیب، نہ کچھ دوبارہ لکھا جاتا ہے۔
وہ جو آپ کے چسپاں کیے ہوئے سے میل کھائے، فائل کے نام سے نہیں۔ مارک اپ کو HTML والا انداز چاہیے، جو اس کے اندر کے script اور style کو بھی ترتیب دیتا ہے۔
وہ پارس نہ ہو سکا، جس کا تقریباً ہمیشہ مطلب نحوی غلطی ہے — کوئی بند نہ کیا گیا بریکٹ، قوس یا سٹرنگ۔ فارمیٹر اسے درست نہیں کرے گا۔
جہاں منصوبے میں پہلے سے فارمیٹر ترتیب دیا گیا ہو، وہاں نہیں۔ وہ طے شدہ انداز رکھتا ہے۔ یہ کہیں اور سے آئے ٹکڑوں کے لیے ہے۔
نہیں۔ لائبریری آپ کے براؤزر میں چلتی ہے، اسی لیے یہاں ملکیتی کوڈ چسپاں کرنا محفوظ ہے۔

نئے ٹولز، خصوصیات اور کارکردگی بڑھانے کے مشوروں کی اطلاع پانے کے لیے سبسکرائب کریں۔