js beautify
v1.15.1 ?
سيقوم هذا المجمّل الصغير بإعادة تنسيق الإشارات المرجعية وإعادة المسافة البادئة لها، وجافا سكريبت القبيحة، وفك ضغط البرامج النصية المعبأة بواسطة أداة التعبئة الشهيرة لـ Dean Edward، بالإضافة إلى إزالة التشويش جزئيًا من البرامج النصية التي تمت معالجتها بواسطة حزمة npm javascript-obfuscator.
افتح beautifier.io لتجربته. الخيارات متاحة عبر واجهة المستخدم.
أضع هذا في المقدمة والوسط لأن المالكين الحاليين لديهم وقت محدود للغاية للعمل في هذا المشروع حاليًا. يعد هذا مشروعًا شائعًا ويستخدم على نطاق واسع ولكنه يحتاج بشدة إلى المساهمين الذين لديهم الوقت للالتزام بإصلاح الأخطاء التي يواجهها العملاء والمشكلات الأساسية في التصميم الداخلي والتنفيذ.
إذا كنت مهتمًا، فيرجى إلقاء نظرة على CONTRIBUTING.md ثم إصلاح المشكلة المميزة بعلامة "الإصدار الأول الجيد" وإرسال العلاقات العامة. كرر كلما كان ذلك ممكنا. شكرًا!
يمكنك تثبيت أداة التجميل لـ Node.js أو Python.
يمكنك تثبيت حزمة NPM js-beautify . عند تثبيته عالميًا، فإنه يوفر برنامج نصي js-beautify قابل للتنفيذ. كما هو الحال مع برنامج Python النصي، يتم إرسال النتيجة الجميلة إلى stdout ما لم يتم تكوينها بطريقة أخرى.
$ npm -g install js-beautify
$ js-beautify foo.js يمكنك أيضًا استخدام js-beautify كمكتبة node (تثبيت محليًا، الإعداد الافتراضي npm ):
$ npm install js-beautifyما ورد أعلاه تثبيت أحدث إصدار مستقر. لتثبيت إصدارات بيتا أو RC:
$ npm install js-beautify@nextيمكن إضافة أداة التجميل على صفحتك كمكتبة ويب.
تتم استضافة JS Beautifier على خدمتين من خدمات CDN: cdnjs وrawgit.
لسحب أحدث إصدار من إحدى هذه الخدمات، قم بتضمين مجموعة واحدة من علامات البرنامج النصي أدناه في مستندك:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js " > </ script >مثال لاستخدام علامة JS في html:
<!DOCTYPE html >
< html lang =" en " >
< body >
. . .
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" script.js " > </ script >
</ body >
</ html >تتوفر الإصدارات الأقدم عن طريق تغيير رقم الإصدار.
إخلاء المسؤولية: هذه خدمات مجانية، لذا لا توجد ضمانات لوقت التشغيل أو الدعم.
لتثبيت نسخة بايثون من أداة التجميل:
$ pip install jsbeautifierعلى عكس إصدار JavaScript، يمكن لإصدار Python إعادة تنسيق JavaScript فقط. لا يعمل مع ملفات HTML أو CSS، ولكن يمكنك تثبيت css-beautify لـ CSS:
$ pip install cssbeautifierيمكنك تجميل JavaScript باستخدام JS Beautifier في متصفح الويب الخاص بك، أو على سطر الأوامر باستخدام Node.js أو Python.
افتح beautifier.io. الخيارات متاحة عبر واجهة المستخدم.
بعد تضمين علامات <script> في ملف html الخاص بك، فإنها تعرض ثلاث وظائف: js_beautify و css_beautify و html_beautify
مثال لاستخدام تجميل سلسلة json:
const options = { indent_size : 2 , space_in_empty_paren : true }
const dataObj = { completed : false , id : 1 , title : "delectus aut autem" , userId : 1 , }
const dataJson = JSON . stringify ( dataObj )
js_beautify ( dataJson , options )
/* OUTPUT
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/ عند تثبيته عالميًا، يوفر أداة التجميل برنامج نصي js-beautify قابل للتنفيذ. يتم إرسال النتيجة الجميلة إلى stdout ما لم يتم تكوينها بطريقة أخرى.
$ js-beautify foo.js لاستخدام js-beautify كمكتبة node (بعد التثبيت محليًا)، قم باستيراد واستدعاء طريقة التجميل المناسبة لـ JavaScript (JS) أو CSS أو HTML. جميع توقيعات الطرق الثلاثة هي beautify(code, options) . code هو سلسلة التعليمات البرمجية المراد تجميلها. الخيارات هي كائن يحتوي على الإعدادات التي ترغب في استخدامها لتجميل الكود.
أسماء خيارات التكوين هي نفس أسماء واجهة سطر الأوامر (CLI) ولكن مع شرطات سفلية بدلاً من الشرطات. على سبيل المثال، --indent-size 2 --space-in-empty-paren سيكون { indent_size: 2, space_in_empty_paren: true } .
var beautify = require ( 'js-beautify/js' ) . js ,
fs = require ( 'fs' ) ;
fs . readFile ( 'foo.js' , 'utf8' , function ( err , data ) {
if ( err ) {
throw err ;
}
console . log ( beautify ( data , { indent_size : 2 , space_in_empty_paren : true } ) ) ;
} ) ; إذا كنت تستخدم عمليات استيراد ESM، فيمكنك استيراد js-beautify على النحو التالي:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; بعد التثبيت، للتجميل باستخدام بايثون:
$ js-beautify file.js يذهب الإخراج الجميل إلى stdout بشكل افتراضي.
لاستخدام jsbeautifier كمكتبة أمر بسيط:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...أو لتحديد بعض الخيارات:
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) أسماء خيارات التكوين هي نفس أسماء واجهة سطر الأوامر (CLI) ولكن مع شرطات سفلية بدلاً من الشرطات. سيتم تعيين المثال أعلاه في سطر الأوامر كـ --indent-size 2 --space-in-empty-paren .
هذه هي علامات سطر الأوامر لكل من البرامج النصية Python وJS:
CLI Options:
-f, --file Input file(s) (Pass '-' for stdin)
-r, --replace Write output in-place, replacing input
-o, --outfile Write output to file (default stdout)
--config Path to config file
--type [js|css|html] ["js"] Select beautifier type (NOTE: Does *not* filter files, only defines which beautifier type to run)
-q, --quiet Suppress logging to stdout
-h, --help Show this help
-v, --version Show the version
Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators.
[first newline in file, otherwise "n]
-n, --end-with-newline End output with newline
--editorconfig Use EditorConfig to set up the options
-l, --indent-level Initial indentation level [0]
-p, --preserve-newlines Preserve line-breaks (--no-preserve-newlines disables)
-m, --max-preserve-newlines Number of line-breaks to be preserved in one chunk [10]
-P, --space-in-paren Add padding spaces within paren, ie. f( a, b )
-E, --space-in-empty-paren Add a single space inside empty paren, ie. f( )
-j, --jslint-happy Enable jslint-stricter mode
-a, --space-after-anon-function Add a space before an anonymous function's parens, ie. function ()
--space-after-named-function Add a space before a named function's parens, i.e. function example ()
-b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
-u, --unindent-chained-methods Don't indent chained method calls
-B, --break-chained-methods Break chained method calls across subsequent lines
-k, --keep-array-indentation Preserve array indentation
-x, --unescape-strings Decode printable characters encoded in xNN notation
-w, --wrap-line-length Wrap lines that exceed N characters [0]
-X, --e4x Pass E4X xml literals through untouched
--good-stuff Warm the cockles of Crockford's heart
-C, --comma-first Put commas at the beginning of new line instead of end
-O, --operator-position Set operator position (before-newline|after-newline|preserve-newline) [before-newline]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in HTML
والتي تتوافق مع مفاتيح الخيارات التي تم وضع خط تحتها خط لكلا واجهات المكتبة
الإعدادات الافتراضية لكل خيارات CLI
{
"indent_size" : 4 ,
"indent_char" : " " ,
"indent_with_tabs" : false ,
"editorconfig" : false ,
"eol" : " n " ,
"end_with_newline" : false ,
"indent_level" : 0 ,
"preserve_newlines" : true ,
"max_preserve_newlines" : 10 ,
"space_in_paren" : false ,
"space_in_empty_paren" : false ,
"jslint_happy" : false ,
"space_after_anon_function" : false ,
"space_after_named_function" : false ,
"brace_style" : " collapse " ,
"unindent_chained_methods" : false ,
"break_chained_methods" : false ,
"keep_array_indentation" : false ,
"unescape_strings" : false ,
"wrap_line_length" : 0 ,
"e4x" : false ,
"comma_first" : false ,
"operator_position" : " before-newline " ,
"indent_empty_lines" : false ,
"templating" : [ " auto " ]
}الإعدادات الافتراضية لم يتم كشفها في CLI
{
"eval_code" : false ,
"space_before_conditional" : true
}لاحظ أنه لا يتم عرض كافة الإعدادات الافتراضية عبر واجهة سطر الأوامر (CLI). تاريخيًا، لم تكن واجهات برمجة تطبيقات Python وJS متطابقة بنسبة 100%. لا تزال هناك بعض الحالات الإضافية الأخرى التي تمنعنا من التوافق مع واجهة برمجة التطبيقات بنسبة 100%.
بالإضافة إلى وسيطات CLI، يمكنك تمرير التكوين إلى JS القابل للتنفيذ عبر:
jsbeautify_ مسبوقةJSON يُشار إليه بواسطة المعلمة --config.jsbeautifyrc يحتوي على بيانات JSON على أي مستوى من نظام الملفات أعلى من $PWDمصادر التكوين المقدمة سابقًا في هذه المكدس ستتجاوز المصادر اللاحقة.
الإعدادات عبارة عن شجرة ضحلة يتم توريث قيمها لجميع اللغات، ولكن يمكن تجاوزها. يعمل هذا مع الإعدادات التي تم تمريرها مباشرة إلى واجهة برمجة التطبيقات (API) في أي من التطبيقين. في تطبيق JavaScript، يمكن للإعدادات المحملة من ملف التكوين، مثل .jsbeautifyrc، أيضًا استخدام الوراثة/التجاوز.
فيما يلي مثال لشجرة التكوين التي تعرض جميع المواقع المدعومة لعقد تجاوز اللغة. سنستخدم indent_size لمناقشة كيفية عمل هذا التكوين، ولكن يمكن وراثة أي عدد من الإعدادات أو تجاوزها:
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}باستخدام المثال أعلاه سيكون له النتيجة التالية:
indent_size من 4 مسافات من إعداد المستوى الأعلى.end_with_newline .indent_size بمقدار مسافة واحدة.indent_size من 4 مسافات من إعداد المستوى الأعلى.preserve-newlines على true . بالإضافة إلى الملف التنفيذي js-beautify ، يتم أيضًا توفير css-beautify و html-beautify كواجهة سهلة في تلك البرامج النصية. وبدلاً من ذلك، سيؤدي js-beautify --css أو js-beautify --html إلى تحقيق نفس الشيء، على التوالي.
// Programmatic access
var beautify_js = require ( 'js-beautify' ) ; // also available under "js" export
var beautify_css = require ( 'js-beautify' ) . css ;
var beautify_html = require ( 'js-beautify' ) . html ;
// All methods accept two arguments, the string to be beautified, and an options object.تعد أدوات تجميل CSS وHTML أبسط بكثير من حيث النطاق، وتمتلك خيارات أقل بكثير.
CSS Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators. (default newline - "\n")
-n, --end-with-newline End output with newline
-b, --brace-style [collapse|expand] ["collapse"]
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
--indent-empty-lines Keep indentation on empty lines
HTML Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators. (default newline - "\n")
-n, --end-with-newline End output with newline
-p, --preserve-newlines Preserve existing line-breaks (--no-preserve-newlines disables)
-m, --max-preserve-newlines Maximum number of line-breaks to be preserved in one chunk [10]
-I, --indent-inner-html Indent <head> and <body> sections. Default is false.
-b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
-S, --indent-scripts [keep|separate|normal] ["normal"]
-w, --wrap-line-length Maximum characters per line (0 disables) [250]
-A, --wrap-attributes Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"]
-M, --wrap-attributes-min-attrs Minimum number of html tag attributes for force wrap attribute options [2]
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned")
-d, --inline List of tags to be considered inline tags
--inline_custom_elements Inline custom elements [true]
-U, --unformatted List of tags (defaults to inline) that should not be reformatted
-T, --content_unformatted List of tags (defaults to pre) whose content should not be reformatted
-E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them.
--editorconfig Use EditorConfig to set up the options
--indent_scripts Sets indent level inside script tags ("normal", "keep", "separate")
--unformatted_content_delimiter Keep text content together between this string [""]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,none,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in html
تتيح لك التوجيهات التحكم في سلوك أداة التجميل من داخل ملفات المصدر الخاصة بك. يتم وضع التوجيهات في التعليقات داخل الملف. التوجيهات بالتنسيق /* beautify {name}:{value} */ في CSS وJavaScript. في HTML يتم تنسيقها كـ <!-- beautify {name}:{value} --> .
توجيه ignore يجعل أداة التجميل تتجاهل جزءًا من الملف تمامًا، وتتعامل معه كنص حرفي لم يتم تحليله. سيبقى الإدخال أدناه دون تغيير بعد التجميل:
// Use ignore when the content is not parsable in the current language, JavaScript in this case.
var a = 1 ;
/* beautify ignore:start */
{ This is some strange { template language { using open - braces ?
/* beautify ignore:end */ملاحظة: يعمل هذا التوجيه فقط في HTML وJavaScript، وليس CSS.
يؤدي توجيه preserve إلى تحليل Beautifier ثم الاحتفاظ بالتنسيق الحالي لقسم من التعليمات البرمجية.
سيبقى الإدخال أدناه دون تغيير بعد التجميل:
// Use preserve when the content is valid syntax in the current language, JavaScript in this case.
// This will parse the code and preserve the existing formatting.
/* beautify preserve:start */
{
browserName : 'internet explorer' ,
platform : 'Windows 7' ,
version : '8'
}
/* beautify preserve:end */أنت حر في استخدام هذا بأي طريقة تريدها، في حال وجدت هذا مفيدًا أو مناسبًا لك ولكن يجب عليك الاحتفاظ بإشعار حقوق الطبع والنشر والترخيص. (معهد ماساتشوستس للتكنولوجيا)
شكرًا أيضًا لجيسون دايموند، وباتريك هوف، ونوتشوم سوسونكو، وأندرياس شنايدر، وديف فاسيليفسكي، وفيتال باتمانوف، ورون بالدوين، وغابرييل هاريسون، وكريس جيه شول، وماتياس بينينز، وفيتوريو غامباليتا وآخرين.
(README.md: [email protected])
