js beautify
v1.15.1 ?
Dieser kleine Verschönerer wird Bookmarklets und hässliches JavaScript neu formatieren und neu einrücken, Skripte entpacken, die von Dean Edwards beliebtem Packer gepackt wurden, sowie Skripte, die vom npm-Paket javascript-obfuscator verarbeitet werden, teilweise entschlüsseln.
Öffnen Sie beautifier.io, um es auszuprobieren. Optionen sind über die Benutzeroberfläche verfügbar.
Ich stelle dies oben in den Mittelpunkt, da die bestehenden Eigentümer derzeit nur sehr begrenzte Zeit haben, an diesem Projekt zu arbeiten. Dies ist ein beliebtes und weit verbreitetes Projekt, aber es braucht dringend Mitwirkende, die sich die Zeit nehmen, sowohl kundenseitige Fehler als auch zugrunde liegende Probleme beim internen Design und der Implementierung zu beheben.
Wenn Sie interessiert sind, werfen Sie bitte einen Blick auf CONTRIBUTING.md, beheben Sie dann ein Problem, das mit dem Label „Gute erste Ausgabe“ gekennzeichnet ist, und reichen Sie eine PR ein. Wiederholen Sie dies so oft wie möglich. Danke!
Sie können den Beautifier für Node.js oder Python installieren.
Sie können das NPM-Paket js-beautify installieren. Bei globaler Installation stellt es ein ausführbares js-beautify -Skript bereit. Wie beim Python-Skript wird das verschönerte Ergebnis an stdout gesendet, sofern nicht anders konfiguriert.
$ npm -g install js-beautify
$ js-beautify foo.js Sie können js-beautify auch als node verwenden (lokal installieren, npm Standard):
$ npm install js-beautifyDie oben genannten installieren die neueste stabile Version. So installieren Sie Beta- oder RC-Versionen:
$ npm install js-beautify@nextDer Verschönerer kann Ihrer Seite als Webbibliothek hinzugefügt werden.
JS Beautifier wird auf zwei CDN-Diensten gehostet: cdnjs und rawgit.
Um die neueste Version von einem dieser Dienste abzurufen, fügen Sie einen Satz der folgenden Skript-Tags in Ihr Dokument ein:
< 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 >Beispielverwendung eines JS-Tags in 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 >Ältere Versionen sind durch Ändern der Versionsnummer verfügbar.
Haftungsausschluss: Da es sich um kostenlose Dienste handelt, gibt es keine Verfügbarkeits- oder Supportgarantien.
So installieren Sie die Python-Version des Beautifiers:
$ pip install jsbeautifierIm Gegensatz zur JavaScript-Version kann die Python-Version nur JavaScript neu formatieren. Es funktioniert nicht mit HTML- oder CSS-Dateien, aber Sie können css-beautify für CSS installieren:
$ pip install cssbeautifierSie können JavaScript mit JS Beautifier in Ihrem Webbrowser oder über die Befehlszeile mit Node.js oder Python verschönern.
Öffnen Sie beautifier.io. Optionen sind über die Benutzeroberfläche verfügbar.
Nachdem Sie die <script> -Tags in Ihre html Datei eingebettet haben, stellen sie drei Funktionen bereit: js_beautify , css_beautify und html_beautify
Beispiel für die Verschönerung eines JSON-Strings:
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,
}
*/ Bei globaler Installation stellt der Beautifier ein ausführbares js-beautify -Skript bereit. Das verschönerte Ergebnis wird an stdout gesendet, sofern nicht anders konfiguriert.
$ js-beautify foo.js Um js-beautify als node zu verwenden (nach der lokalen Installation), importieren Sie die entsprechende Beautifier-Methode für JavaScript (JS), CSS oder HTML und rufen Sie sie auf. Alle drei Methodensignaturen sind beautify(code, options) . code ist die Codezeichenfolge, die verschönert werden soll. Optionen ist ein Objekt mit den Einstellungen, die Sie zur Verschönerung des Codes verwenden möchten.
Die Namen der Konfigurationsoptionen sind mit den CLI-Namen identisch, jedoch mit Unterstrichen anstelle von Bindestrichen. Beispielsweise wäre --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 } ) ) ;
} ) ; Wenn Sie ESM-Importe verwenden, können Sie js-beautify wie folgt importieren:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; Nach der Installation zur Verschönerung mit Python:
$ js-beautify file.js Die verschönerte Ausgabe erfolgt standardmäßig auf stdout .
Die Verwendung jsbeautifier als Bibliothek ist einfach:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...oder um einige Optionen anzugeben:
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) Die Namen der Konfigurationsoptionen sind mit den CLI-Namen identisch, jedoch mit Unterstrichen anstelle von Bindestrichen. Das obige Beispiel würde in der Befehlszeile als --indent-size 2 --space-in-empty-paren festgelegt werden.
Dies sind die Befehlszeilenflags für Python- und JS-Skripte:
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
Diese entsprechen den unterstrichenen Optionsschlüsseln für beide Bibliotheksschnittstellen
Standardwerte pro CLI-Optionen
{
"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 " ]
}Standardeinstellungen werden in der CLI nicht angezeigt
{
"eval_code" : false ,
"space_before_conditional" : true
}Beachten Sie, dass nicht alle Standardeinstellungen über die CLI verfügbar gemacht werden. In der Vergangenheit waren die Python- und JS-APIs nicht zu 100 % identisch. Es gibt noch einige weitere Fälle, die uns von einer 100-prozentigen API-Kompatibilität abhalten.
Zusätzlich zu den CLI-Argumenten können Sie die Konfiguration über Folgendes an die ausführbare JS-Datei übergeben:
jsbeautify_ -präfixierten UmgebungsvariablenJSON -formatierte Datei, die durch den Parameter --config angegeben wird.jsbeautifyrc Datei, die JSON Daten auf jeder Ebene des Dateisystems oberhalb von $PWD enthältFrüher in diesem Stapel bereitgestellte Konfigurationsquellen überschreiben spätere.
Bei den Einstellungen handelt es sich um einen flachen Baum, dessen Werte für alle Sprachen übernommen werden, aber überschrieben werden können. Dies funktioniert für Einstellungen, die in beiden Implementierungen direkt an die API übergeben werden. In der JavaScript-Implementierung können Einstellungen, die aus einer Konfigurationsdatei wie .jsbeautifyrc geladen werden, auch Vererbung/Überschreibung nutzen.
Nachfolgend finden Sie einen Beispielkonfigurationsbaum, der alle unterstützten Speicherorte für Sprachüberschreibungsknoten zeigt. Wir werden indent_size verwenden, um zu besprechen, wie sich diese Konfiguration verhalten würde, aber es können beliebig viele Einstellungen geerbt oder überschrieben werden:
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}Die Verwendung des obigen Beispiels würde zu folgendem Ergebnis führen:
indent_size mit 4 Leerzeichen aus der Einstellung der obersten Ebene.end_with_newline .indent_size von 1 Leerzeichen.indent_size mit 4 Leerzeichen aus der Einstellung der obersten Ebene.preserve-newlines auf true . Zusätzlich zur ausführbaren Datei js-beautify werden auch css-beautify und html-beautify als einfache Schnittstelle zu diesen Skripten bereitgestellt. Alternativ bewirken js-beautify --css bzw. js-beautify --html dasselbe.
// 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.Die CSS- und HTML-Verschönerungen haben einen viel einfacheren Umfang und verfügen über weitaus weniger Optionen.
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
Mithilfe von Anweisungen können Sie das Verhalten des Beautifiers aus Ihren Quelldateien heraus steuern. Anweisungen werden in Kommentaren innerhalb der Datei platziert. Direktiven haben in CSS und JavaScript das Format /* beautify {name}:{value} */ . In HTML sind sie als <!-- beautify {name}:{value} --> formatiert.
Die Anweisung ignore bewirkt, dass der Verschönerer einen Teil einer Datei vollständig ignoriert und ihn als wörtlichen Text behandelt, der nicht analysiert wird. Die folgende Eingabe bleibt nach der Verschönerung unverändert:
// 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 */HINWEIS: Diese Direktive funktioniert nur in HTML und JavaScript, nicht in CSS.
Die preserve Direktive veranlasst den Beautifier, die vorhandene Formatierung eines Codeabschnitts zu analysieren und dann beizubehalten.
Die folgende Eingabe bleibt nach der Verschönerung unverändert:
// 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 */Es steht Ihnen frei, dies auf jede gewünschte Weise zu verwenden, falls Sie es nützlich finden oder für Sie funktionieren, aber Sie müssen den Urheberrechtsvermerk und die Lizenz behalten. (MIT)
Vielen Dank auch an Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta und andere.
(README.md: [email protected])
