js beautify
v1.15.1 ?
Percantik kecil ini akan memformat ulang dan membuat indentasi ulang bookmarklet, JavaScript jelek, membongkar skrip yang dikemas oleh pengemas populer Dean Edward, serta membatalkan penyamaran sebagian skrip yang diproses oleh paket npm javascript-obfuscator.
Buka beautifier.io untuk mencobanya. Opsi tersedia melalui UI.
Saya mengedepankan hal ini karena pemilik saat ini memiliki waktu yang sangat terbatas untuk mengerjakan proyek ini. Ini adalah proyek yang populer dan banyak digunakan tetapi sangat membutuhkan kontributor yang memiliki waktu berkomitmen untuk memperbaiki bug yang dihadapi pelanggan dan masalah mendasar pada desain dan implementasi internal.
Jika Anda tertarik, silakan lihat di CONTRIBUTING.md lalu perbaiki masalah yang ditandai dengan label "Good first issue" dan kirimkan PR. Ulangi sesering mungkin. Terima kasih!
Anda dapat menginstal penghias untuk Node.js atau Python.
Anda dapat menginstal paket NPM js-beautify . Ketika diinstal secara global, ia menyediakan skrip js-beautify yang dapat dieksekusi. Seperti skrip Python, hasil yang dipercantik dikirim ke stdout kecuali jika dikonfigurasi lain.
$ npm -g install js-beautify
$ js-beautify foo.js Anda juga dapat menggunakan js-beautify sebagai pustaka node (instal secara lokal, default npm ):
$ npm install js-beautifyDi atas menginstal rilis stabil terbaru. Untuk menginstal versi beta atau RC:
$ npm install js-beautify@nextPercantik dapat ditambahkan di halaman Anda sebagai perpustakaan web.
JS Beautifier dihosting di dua layanan CDN: cdnjs dan rawgit.
Untuk mengambil versi terbaru dari salah satu layanan ini, sertakan satu set tag skrip di bawah ini dalam dokumen Anda:
< 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 >Contoh penggunaan tag JS di 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 >Versi lama tersedia dengan mengubah nomor versi.
Penafian: Ini adalah layanan gratis, jadi tidak ada jaminan uptime atau dukungan.
Untuk menginstal beautifier versi Python:
$ pip install jsbeautifierBerbeda dengan versi JavaScript, versi Python hanya dapat memformat ulang JavaScript. Ini tidak berfungsi pada file HTML atau CSS, tetapi Anda dapat menginstal css-beautify untuk CSS:
$ pip install cssbeautifierAnda dapat mempercantik JavaScript menggunakan JS Beautifier di browser web Anda, atau pada baris perintah menggunakan Node.js atau Python.
Buka beautifier.io. Opsi tersedia melalui UI.
Setelah Anda menyematkan tag <script> di file html Anda, tag tersebut menampilkan tiga fungsi: js_beautify , css_beautify , dan html_beautify
Contoh penggunaan mempercantik string 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,
}
*/ Saat dipasang secara global, beautifier menyediakan skrip js-beautify yang dapat dieksekusi. Hasil yang dipercantik dikirim ke stdout kecuali dikonfigurasi lain.
$ js-beautify foo.js Untuk menggunakan js-beautify sebagai pustaka node (setelah diinstal secara lokal), impor dan panggil metode beautifier yang sesuai untuk JavaScript (JS), CSS, atau HTML. Ketiga tanda tangan metode tersebut adalah beautify(code, options) . code adalah rangkaian kode yang ingin dipercantik. options adalah objek dengan pengaturan yang ingin Anda gunakan untuk mempercantik kode.
Nama opsi konfigurasi sama dengan nama CLI tetapi dengan garis bawah, bukan tanda hubung. Misalnya, --indent-size 2 --space-in-empty-paren akan menjadi { 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 } ) ) ;
} ) ; Jika Anda menggunakan Impor ESM, Anda dapat mengimpor js-beautify seperti ini:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; Setelah instalasi, untuk mempercantik menggunakan Python:
$ js-beautify file.js Output yang dipercantik masuk ke stdout secara default.
Untuk menggunakan jsbeautifier sebagai perpustakaan itu sederhana:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...atau, untuk menentukan beberapa opsi:
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) Nama opsi konfigurasi sama dengan nama CLI tetapi dengan garis bawah, bukan tanda hubung. Contoh di atas akan ditetapkan pada baris perintah sebagai --indent-size 2 --space-in-empty-paren .
Ini adalah tanda baris perintah untuk skrip Python dan 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
Yang sesuai dengan tombol opsi yang digarisbawahi untuk kedua antarmuka perpustakaan
default per opsi 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 " ]
}default tidak diekspos di cli
{
"eval_code" : false ,
"space_before_conditional" : true
}Perhatikan tidak semua default diekspos melalui CLI. Secara historis, API Python dan JS tidak 100% identik. Masih ada beberapa kasus tambahan yang menghalangi kami untuk mencapai kompatibilitas API 100%.
Selain argumen CLI, Anda dapat meneruskan konfigurasi ke JS yang dapat dieksekusi melalui:
jsbeautify_ -JSON yang ditunjukkan oleh parameter --config.jsbeautifyrc yang berisi data JSON pada level sistem file mana pun di atas $PWDSumber konfigurasi yang disediakan sebelumnya dalam tumpukan ini akan menggantikan sumber konfigurasi berikutnya.
Pengaturannya adalah pohon dangkal yang nilainya diwariskan untuk semua bahasa, namun dapat diganti. Ini berfungsi untuk pengaturan yang diteruskan langsung ke API di implementasi mana pun. Dalam implementasi JavaScript, pengaturan yang diambil dari file konfigurasi, seperti .jsbeautifyrc, juga dapat menggunakan pewarisan/overriding.
Di bawah ini adalah contoh pohon konfigurasi yang menunjukkan semua lokasi yang didukung untuk node penggantian bahasa. Kita akan menggunakan indent_size untuk mendiskusikan bagaimana konfigurasi ini akan berperilaku, namun sejumlah pengaturan dapat diwarisi atau diganti:
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}Menggunakan contoh di atas akan menghasilkan hasil sebagai berikut:
indent_size 4 spasi dari pengaturan tingkat atas.end_with_newline .indent_size 1 spasi.indent_size 4 spasi dari pengaturan tingkat atas.preserve-newlines ke true . Selain js-beautify yang dapat dieksekusi, css-beautify dan html-beautify juga disediakan sebagai antarmuka yang mudah ke dalam skrip tersebut. Alternatifnya, js-beautify --css atau js-beautify --html masing-masing akan menghasilkan hal yang sama.
// 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.Percantik CSS & HTML memiliki cakupan yang jauh lebih sederhana, dan memiliki pilihan yang jauh lebih sedikit.
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
Arahan memungkinkan Anda mengontrol perilaku Beautifier dari dalam file sumber Anda. Arahan ditempatkan di komentar di dalam file. Arahan dalam format /* beautify {name}:{value} */ dalam CSS dan JavaScript. Dalam HTML mereka diformat sebagai <!-- beautify {name}:{value} --> .
Arahan ignore membuat penghias sepenuhnya mengabaikan bagian file, memperlakukannya sebagai teks literal yang tidak diuraikan. Masukan di bawah ini tidak akan berubah setelah dipercantik:
// 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 */CATATAN: arahan ini hanya berfungsi dalam HTML dan JavaScript, bukan CSS.
Arahan preserve membuat Beautifier mengurai dan kemudian mempertahankan format bagian kode yang ada.
Masukan di bawah ini tidak akan berubah setelah dipercantik:
// 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 */Anda bebas menggunakannya dengan cara apa pun yang Anda inginkan, jika Anda merasa ini berguna atau berhasil untuk Anda, tetapi Anda harus tetap memperhatikan pemberitahuan hak cipta dan lisensi. (MIT)
Terima kasih juga kepada Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta dan lainnya.
(BACA.md: [email protected])
