JavaScript beautification کیسے کام کرتی ہے؟
بیوٹیفائر آپ کے code کو کردار بہ کردار پڑھتا ہے، ہر statement کی nesting depth کو track کرتا ہے، اور اسے یکساں spacing کے ساتھ دوبارہ emit کرتا ہے۔ یہ کبھی نہیں بدلتا کہ code کیا کرتا ہے — صرف یہ کہ وہ کیسا نظر آتا ہے۔
- Tokenize. لائبریری آپ کے input کو tokens کی ایک stream میں scan کرتی ہے: keywords، identifiers، strings، operators، اور punctuation۔ Strings، template literals، اور regular-expression literals کو واحد اکائیوں کے طور پر پہچانا جاتا ہے، اس لیے کسی string کے اندر brace کو کبھی block delimiter نہیں سمجھا جاتا۔
- Nesting track کرنا. جیسے جیسے بیوٹیفائر token stream پر چلتا ہے، یہ ایک چلتا ہوا indent level رکھتا ہے۔ ہر کھلتا brace، bracket، یا parenthesis level کو گہرا کرتا ہے؛ ہر بند ہونے والا اسے واپس لاتا ہے۔ وہ depth طے کرتی ہے کہ آپ کو واپس ملنے والی ہر لائن کے سامنے کتنے indent units ہوں گے۔
- آپ کے options لاگو کرنا. آپ کا indent choice (2 spaces، 4 spaces، یا ایک tab) ایک level کی چوڑائی طے کرتا ہے۔ brace-style setting یہ فیصلہ کرتی ہے کہ opening brace اپنے سے پہلی statement سے چمٹی رہے یا اپنی لائن پر چلی جائے۔ blank-line cap لمبی خالی لائنوں کو آپ کی مقررہ حد تک کم کرتا ہے۔
- Re-emit. آخر میں formatter tokens کو indentation اور line breaks کے ساتھ واپس print کرتا ہے جو اس نے calculate کیے ہیں، اختیاری طور پر وہ semicolons شامل کرتے ہوئے جو automatic semicolon insertion runtime پر فراہم کرتا۔ نتیجہ وہی پروگرام ہے، اس طرح ترتیب دیا گیا کہ انسان پڑھ سکے۔
JavaScript بیوٹیفائی کیوں کریں؟
- منی فائڈ code پڑھنا. Production bundles ایک لائن پر single-letter variable names کے ساتھ ship ہوتے ہیں۔ Beautifying line breaks اور indentation واپس لاتا ہے تاکہ آپ کسی bug کو اس statement تک trace کر سکیں جس نے اسے پیدا کیا، source map کے بغیر بھی۔
- بے ترتیب فائلیں ٹھیک کرنا. جس code کو کئی لوگوں نے touch کیا ہو وہ mixed indentation اور brace styles میں بدل جاتا ہے۔ بیوٹیفائر سے ایک بار گزارنے سے پوری فائل ایک layout میں normalize ہو جاتی ہے، جس سے اگلا diff اصل logic changes دکھاتا ہے نہ کہ whitespace noise۔
- یہ ٹول آپ کے صفحے پر بوجھ نہیں ڈالتا. زیادہ تر آن لائن formatters صفحہ کھلتے ہی اپنی پوری لائبریری لوڈ کرتے ہیں۔ یہ ٹول js-beautify کو صرف اسی وقت lazy-load کرتا ہے جب آپ Beautify کلک کریں یا Live mode آن کریں، اس لیے صفحہ کھولنا چند kilobytes خرچ کرتا ہے نہ کہ چند سو، اور initial render تیز رہتا ہے۔
- کچھ بھی آپ کے براؤزر سے نہیں جاتا. بیوٹیفائر مکمل طور پر آپ کے device پر چلتا ہے۔ آپ کا code کبھی server پر upload نہیں ہوتا، جو اہم ہے جب آپ جو script inspect کر رہے ہیں وہ کسی client کی ہو، internal API paths رکھتی ہو، یا confidentiality agreement کے تحت ہو۔
عام استعمالات
JavaScript beautifying اس وقت سامنے آتا ہے جب کسی کو ایسا code پڑھنا ہو جو پڑھنے کے لیے نہیں لکھا گیا تھا۔
- Production debugging: Network tab سے کھینچا ہوا minified bundle paste کریں تاکہ وہ function ملے جو ایسے error stack کے پیچھے ہے جسے آپ دوسری صورت میں decode نہیں کر سکتے۔
- Code review prep: کسی contributor کی بے ترتیب-indented فائل pull request کھولنے سے پہلے reformat کریں تاکہ reviewers logic دیکھیں، layout churn نہیں۔
- Security اور compliance audits: کسی third-party analytics یا ad snippet کو expand کریں تاکہ confirm کریں کہ وہ live جانے سے پہلے بالکل کیا کرتا ہے۔
ایک عملی مثال
ایک منی فائڈ one-liner لیں: function f(a){if(a){return a*2}else{return 0}}۔ اسے اوپر indentation 2 spaces اور brace style Collapse پر paste کریں، پھر Beautify کلک کریں۔ آپ کو ایک readable block ملتا ہے: function f(a) {، پھر indented if (a) {، ایک level گہرا nested return a * 2; statement، اور نیچے matching braces صف بند۔ brace style کو Expand میں تبدیل کریں اور ہر opening brace اپنی لائن پر آ جاتی ہے۔ indentation کو Tabs میں بدلیں اور ہر level دو spaces سے tab character میں shift ہو جاتا ہے۔ structure یکساں ہے؛ صرف layout بدلتا ہے۔
FAQ
کیا یہ میرے براؤزر میں چلتا ہے؟
جی ہاں۔ js-beautify لائبریری پہلی بار lazy-load ہوتی ہے جب آپ Beautify کلک کریں یا Live mode فعال کریں، پھر cached ہو جاتی ہے۔ آپ کا code صفحہ کبھی نہیں چھوڑتا — کوئی server round-trip نہیں اور کوئی upload نہیں۔
کیا beautifying اور un-minifying ایک ہی ہے؟
یہ readable formatting واپس لاتا ہے — indentation، line breaks، اور spacing — لیکن یہ اصل variable names یا comments واپس نہیں لا سکتا جو minification نے ہٹائے۔ اگر source map موجود ہو تو آپ کے browser کا DevTools اصل names واپس پا سکتا ہے؛ صرف beautifier وہی کام کرتا ہے جو فائل میں ہے۔
کیا beautifying میرے code کا رویہ بدل دیتا ہے؟
نہیں۔ Beautification صرف whitespace اور line breaks شامل اور ہٹاتا ہے؛ پروگرام یکساں طور پر چلتا ہے۔ جو option tokens کو touch کرتا ہے وہ "Add missing semicolons" ہے، جو statement terminators insert کرتا ہے جو automatic semicolon insertion runtime پر ویسے بھی شامل کرتا — code کو بعد میں minify کرنے کے لیے محفوظ بناتا ہے۔
brace-style options کا کیا مطلب ہے؟
Collapse opening brace کو statement کی اسی لائن پر رکھتا ہے (if (x) {)، جو JavaScript کا عام convention ہے۔ Expand ہر opening brace کو اپنی لائن پر لے جاتا ہے (Allman style)۔ End-expand opening brace کو attached رکھتا ہے لیکن closing brace کے بعد نئی لائن پر else اور catch ڈالتا ہے۔
Browser-side JavaScript beautification آپ کو بغیر build step یا upload کے readable code دیتا ہے۔ کوئی minified یا بے ترتیب script paste کریں، اپنی indentation اور brace style چنیں، پھر نتیجہ کاپی یا ڈاؤن لوڈ کریں۔ کچھ بھی آپ کے device سے نہیں جاتا، کوئی account نہیں، اور لائبریری صرف اسی وقت لوڈ ہوتی ہے جب آپ مانگیں — اس لیے یہ صفحہ کھولنے پر چند kilobytes خرچ ہوتے ہیں، megabyte نہیں۔