Fantastisches Community-Modul

JS Verschönerer

Build-Status Build-Status

PyPI-Version CDNJS-Version NPM-Version Statistiken herunterladen

Nehmen Sie am Chat unter https://gitter.im/beautify-web/js-beautify teil Twitter Folgen

NPM-Statistiken

Dieser kleine Verschönerer wird Lesezeichen, hässliches JavaScript, entpackte Skripte, die von Dean Edwards populärem Packer gepackt wurden, sowie von javascriptobfuscator.com verarbeitete Skripte neu formatieren und neu einordnen.

Mitwirkende benötigt

Ich stelle dies in den Vordergrund, da bestehende Eigentümer derzeit nur sehr begrenzte Zeit haben, um an diesem Projekt zu arbeiten. Dies ist ein beliebtes und weit verbreitetes Projekt, aber es braucht dringend Mitarbeiter, die Zeit haben, sich zu verpflichten, sowohl kundenbezogene Fehler als auch zugrunde liegende Probleme zu beheben mit dem internen Design und der Implementierung.

Wenn Sie interessiert sind, schauen Sie sich bitte CONTRIBUTING.md beheben Sie ein Problem, das mit dem Etikett "Gute erste Ausgabe" gekennzeichnet ist, und reichen Sie eine PR ein. Wiederholen Sie dies so oft wie möglich. Danke!

Verwendung

Sie können Javascript mit JS Beautifier in Ihrem Webbrowser oder in der Befehlszeile mit node.js oder Python verschönern.

JS Beautifier wird auf zwei CDN-Diensten gehostet: cdnjs und rawgit.

Um von einem dieser Dienste abzurufen, fügen Sie einen Satz der folgenden Skript-Tags in Ihr Dokument ein:

1 2 3 4 5 6 7 8 9 10 11
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.min.js"></script> <script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify.js"></script> <script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-css.js"></script> <script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-html.js"></script>

Haftungsausschluss: Dies sind kostenlose Dienste, daher gibt es keine Verfügbarkeits- oder Supportgarantien .

Webbrowser

Öffnen Sie jsbeautifier.org . Optionen sind über die Benutzeroberfläche verfügbar.

Python

So verschönern Sie mit Python:

1 2
$ pip install jsbeautifier $ js-beautify file.js

Die verschönerte Ausgabe geht an stdout .

Die Verwendung von jsbeautifier als Bibliothek ist einfach:

1 2 3
import jsbeautifier res = jsbeautifier.beautify('your javascript string') res = jsbeautifier.beautify_file('some_file.js')

... oder, um einige Optionen anzugeben:

1 2 3 4
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 dieselben wie die CLI-Namen, jedoch mit Unterstrichen anstelle von Bindestrichen. Das obige Beispiel wird in der Befehlszeile als --indent-size 2 --space-in-empty-paren .

JavaScript

Alternativ zum Python-Skript können Sie das NPM-Paket js-beautify installieren. Bei globaler Installation wird ein ausführbares js-beautify Skript js-beautify . Wie beim Python-Skript wird das verschönerte Ergebnis an stdout gesendet, sofern nicht anders konfiguriert.

1 2
$ npm -g install js-beautify $ js-beautify foo.js

Sie können js-beautify als node verwenden (lokal installieren, Standardeinstellung npm ):

1
$ npm install js-beautify

Importieren und rufen Sie die entsprechende Verschönerungsmethode für Javascript (js), css oder html auf. Alle drei Methodensignaturen sind beautify(code, options) . code ist eine Codezeichenfolge, die verschönert werden soll. Optionen ist ein Objekt mit den Einstellungen, die Sie vornehmen würden wie verwendet, um den Code zu verschönern.

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 } .

1 2 3 4 5 6 7 8 9
var beautify = require('js-beautify').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 })); });

Optionen

Dies sind die Befehlszeilenflags für Python- und JS-Skripte:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
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"] -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 () -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 at next opportunity after 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]

Welche entsprechen den unterstrichenen Optionsschlüsseln für beide Bibliotheksschnittstellen

Standardeinstellungen pro CLI-Option

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
{ "indent_size": 4, "indent_char": " ", "indent_with_tabs": 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, "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" }

Standardeinstellungen nicht im CLI verfügbar

1 2 3 4
{ "eval_code": false, "space_before_conditional": true }

Beachten Sie, dass nicht alle Standardeinstellungen über die CLI space_before_conditional . In der space_before_conditional waren die Python- und JS-APIs nicht zu 100% identisch. Beispielsweise ist space_before_conditional derzeit nur JS und kann nicht über das CLI-Skript adressiert werden. Es gibt noch einige andere zusätzliche Fälle Halten Sie uns von 100% API-Kompatibilität fern.

Loading settings from environment or .jsbeautifyrc (JavaScript-Only)

Zusätzlich zu den CLI-Argumenten können Sie die Konfiguration an die ausführbare JS-Datei übergeben über:

  • jsbeautify_ jsbeautify_-vorfixierten Umgebungsvariablen
  • Eine JSON formatierte Datei, die durch den Parameter --config angegeben wird
  • Eine .jsbeautifyrc Datei, die JSON Daten auf einer beliebigen Ebene des Dateisystems über $PWD

Konfigurationsquellen, die zuvor in diesem Stapel bereitgestellt wurden, überschreiben spätere.

Setting inheritance and Language-specific overrides

Die Einstellungen sind ein flacher Baum, dessen Werte für alle Sprachen geerbt 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 aus einer Konfigurationsdatei wie .jsbeautifyrc geladen werden Verwenden Sie auch Vererbung / Überschreiben.

Im Folgenden finden Sie einen Beispielkonfigurationsbaum mit allen unterstützten Speicherorten für Sprachüberschreibungsknoten. Wir werden indent_size , um das Verhalten dieser Konfiguration zu indent_size . Es können jedoch beliebig viele Einstellungen vererbt oder überschrieben werden:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
{ "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 hätte das folgende Ergebnis:

  • HTML-Dateien
    • Erben Sie indent_size von 4 Leerzeichen aus der Einstellung der obersten Ebene.
    • Die Dateien würden auch mit einem Zeilenumbruch enden.
    • JavaScript und CSS in HTML
      • Erben Sie die HTML-Einstellung end_with_newline
      • Überschreiben Sie ihre Einrückung auf 2 Leerzeichen
  • CSS-Dateien
    • Überschreiben Sie die Einstellung der obersten Ebene auf eine indent_size von 1 Leerzeichen.
  • JavaScript-Dateien
    • Erben Sie indent_size von 4 Leerzeichen aus der Einstellung der obersten Ebene
    • Setzen Sie preserve-newlines auf true

CSS & HTML

Die zusätzlich zu den in js-beautify Executable, css-beautify und html-beautify sind auch als einfache bereitgestellt Schnittstelle in diese Skripte. Alternativ js-beautify --css oder js-beautify --html Wird das Gleiche zu erreichen sind.

1 2 3 4 5 6
// 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önerer sind viel einfacher im Umfang und verfügen über weitaus weniger Optionen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
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 -L, --selector-separator-newline Add a newline between multiple selectors -N, --newline-between-rules Add a newline between CSS rules 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] ["auto"] -i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "force-aligned") -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

Anweisungen zum Ignorieren oder Beibehalten von Abschnitten (nur Javascript)

Beautifier for unterstützt Direktiven in Kommentaren in der Datei. Auf diese Weise können Sie dem Beautifier mitteilen, dass die Formatierung einer Datei beibehalten oder ein Teil einer Datei vollständig ignoriert werden soll. Die folgende Beispieleingabe bleibt nach der Verschönerung geändert

1 2 3 4 5 6 7 8 9 10 11 12 13 14
// Use preserve when the content is not javascript, but you don't want it reformatted. /* beautify preserve:start */ { browserName: 'internet explorer', platform: 'Windows 7', version: '8' } /* beautify preserve:end */ // Use ignore when the content is not parsable as javascript. var a = 1; /* beautify ignore:start */ {This is some strange{template language{using open-braces? /* beautify ignore:end */

Lizenz

Sie können dies nach Belieben verwenden, falls Sie dies nützlich finden oder für Sie arbeiten, aber Sie müssen den Copyright-Hinweis und die Lizenz behalten. (MIT)

Credits

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: js-beautify@1.7.5 )