js beautify
v1.15.1 ?
เครื่องมือตกแต่งเล็กๆ น้อยๆ นี้จะฟอร์แมตใหม่และเยื้อง bookmarklet, JavaScript ที่น่าเกลียด, คลายสคริปต์ที่อัดแน่นโดย Packer ยอดนิยมของ Dean Edward รวมถึงสคริปต์ถอดรหัสที่สร้างความสับสนบางส่วนที่ประมวลผลโดย javascript-obfuscator แพ็คเกจ npm
เปิด beautyifier.io เพื่อทดลองใช้ ตัวเลือกมีให้ใช้งานผ่าน UI
ฉันวางสิ่งนี้ไว้ที่ด้านหน้าและตรงกลางเนื่องจากเจ้าของปัจจุบันมีเวลาจำกัดมากในการทำงานในโครงการนี้ในปัจจุบัน นี่เป็นโปรเจ็กต์ที่ได้รับความนิยมและใช้กันอย่างแพร่หลาย แต่ต้องการผู้ร่วมให้ข้อมูลที่มีเวลามุ่งมั่นที่จะแก้ไขข้อบกพร่องที่ลูกค้าเผชิญและปัญหาเบื้องหลังการออกแบบภายในและการใช้งาน
หากคุณสนใจ โปรดดูที่ CONTRIBUTING.md จากนั้นแก้ไขปัญหาที่มีป้ายกำกับ "Good first issue" และส่ง PR ทำซ้ำได้บ่อยที่สุด ขอบคุณ!
คุณสามารถติดตั้งบิวติฟายเออร์สำหรับ 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 >เวอร์ชันเก่าสามารถใช้งานได้โดยการเปลี่ยนหมายเลขเวอร์ชัน
ข้อจำกัดความรับผิดชอบ: บริการเหล่านี้เป็นบริการฟรี ดังนั้นจึงไม่มีการรับประกันความพร้อมในการทำงานหรือการสนับสนุน
หากต้องการติดตั้ง beautifier เวอร์ชัน Python:
$ pip install jsbeautifierไม่เหมือนกับเวอร์ชัน JavaScript เวอร์ชัน Python สามารถฟอร์แมต JavaScript ได้เท่านั้น มันใช้ไม่ได้กับไฟล์ HTML หรือ CSS แต่คุณสามารถติดตั้ง css-beautify สำหรับ CSS:
$ pip install cssbeautifierคุณสามารถตกแต่ง JavaScript ให้สวยงามได้โดยใช้ JS Beautifier ในเว็บเบราว์เซอร์ของคุณ หรือบนบรรทัดคำสั่งโดยใช้ Node.js หรือ Python
เปิด Beautifier.io ตัวเลือกมีให้ใช้งานผ่าน UI
หลังจากที่คุณฝังแท็ก <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 (หลังจากติดตั้งในเครื่อง) ให้นำเข้าและเรียกใช้เมธอด beautifier ที่เหมาะสมสำหรับ JavaScript (JS), CSS หรือ HTML ลายเซ็นทั้งสามวิธีนั้น beautify(code, options) code คือสตริงของโค้ดที่จะตกแต่งให้สวยงาม options คือออบเจ็กต์ที่มีการตั้งค่าที่คุณต้องการใช้ตกแต่งโค้ดให้สวยงาม
ชื่อตัวเลือกการกำหนดค่าเหมือนกับชื่อ 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 Imports คุณสามารถนำเข้า 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 ) ; หลังจากติดตั้งแล้ว หากต้องการตกแต่งให้สวยงามโดยใช้ Python:
$ 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 API นั้นไม่เหมือนกัน 100% ยังมีกรณีอื่นๆ อีกสองสามกรณีที่ทำให้เราไม่สามารถเข้ากันได้กับ API 100%
นอกจากอาร์กิวเมนต์ของ CLI แล้ว คุณยังส่งการกำหนดค่าไปยังไฟล์ปฏิบัติการ JS ได้ด้วย:
jsbeautify_ -prefixed ตัวแปรสภาพแวดล้อมใด ๆ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_newlineindent_size 1 ช่องว่าง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
คำสั่งให้คุณควบคุมการทำงานของ Beautifier จากภายในไฟล์ต้นฉบับของคุณ คำสั่งจะอยู่ในความคิดเห็นภายในไฟล์ คำสั่งอยู่ในรูปแบบ /* 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 */คุณสามารถใช้สิ่งนี้ได้อย่างอิสระตามที่คุณต้องการ ในกรณีที่คุณพบว่าสิ่งนี้มีประโยชน์หรือได้ผลสำหรับคุณ แต่คุณต้องเก็บประกาศเกี่ยวกับลิขสิทธิ์และใบอนุญาตไว้ (เอ็มไอที)
ขอขอบคุณ Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta และคนอื่นๆ
(README.md: [email protected])
