Tolles Community-Modul

JS-Verschönerer

Build-Status Build-Status

PyPI-Version CDNJS-Version NPM-Version Statistiken herunterladen

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

NPM-Statistiken

Dieser kleine Verschönerer wird Bookmarklets, hässliches JavaScript neu formatieren und neu einrücken, Skripte entpacken, die von Dean Edwards beliebtem Packer gepackt wurden, sowie Skripte enthüllen, die von javascriptobfuscator.com verarbeitet wurden .

Mitwirkende benötigt

Ich stelle dies oben und in den Mittelpunkt, da die bestehenden Eigentümer derzeit nur sehr begrenzte Zeit haben, um an diesem Projekt zu arbeiten. Dies ist ein beliebtes Projekt und weit verbreitet, aber es braucht dringend Mitwirkende, die Zeit haben, sich sowohl für die Behebung von Fehlern der Kunden als auch für die zugrunde liegenden Probleme zu engagieren. mit der internen Konzeption und Umsetzung.

Bei Interesse schauen Sie bitte in die CONTRIBUTING.mdDann beheben Sie ein Problem, das mit dem Label "Gute erste Ausgabe" gekennzeichnet ist, und senden Sie eine PR. Wiederholen Sie dies so oft wie möglich.

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 einen 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 jsbeautifierals 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 die gleichen wie die CLI-Namen, jedoch mit Unterstrichen anstelle von Bindestrichen.Das obige Beispiel würde in der Befehlszeile als --indent-size 2 --space-in-empty-paren.

JavaScript

Als Alternative zum Python-Skript können Sie das NPM-Paket js-beautifyinstallieren. Bei globaler Installation stellt es ein ausführbares js-beautifySkript bereit . Wie beim Python-Skript wird das verschönerte Ergebnis gesendet, stdoutsofern nicht anders konfiguriert.

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

Sie können auch js-beautifyals nodeBibliothek verwenden (lokal installieren, npmStandard):

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). codeIst der zu verschönernde Code-String. options ist ein Objekt mit den Einstellungen, die Sie zum Verschönern des Codes verwenden möchten.

Die Konfigurationsoption Namen sind die gleichen wie die CLI - Namen aber mit Unterstrichen statt Bindestrichen. Zum Beispiel --indent-size 2 --space-in-empty-parenwäre { 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 Befehlszeilen-Flags 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]

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

Standardeinstellungen pro CLI-Optionen

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

Standardwerte werden nicht in der cli . angezeigt

1 2 3 4
{ "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. Ist beispielsweise space_before_conditionalderzeit nur JS und nicht über das CLI-Skript adressierbar. Es gibt noch einige andere zusätzliche Fälle, die beibehalten werden uns von 100% API-Kompatibilität.

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

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

  • alle jsbeautify_-prefixed Umgebungsvariablen
  • eine JSON-formatierte Datei, die durch den --configParameter angegeben wird
  • eine .jsbeautifyrcDatei mit JSONDaten auf einer beliebigen Ebene des obigen Dateisystems$PWD

Konfigurationsquellen, die früher in diesem Stack bereitgestellt wurden, überschreiben spätere.

Setting inheritance and Language-specific overrides

Die Einstellungen sind ein flacher Baum, dessen Werte für alle Sprachen vererbt 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 werden Einstellungen aus einer Konfigurationsdatei geladen, z. B. .jsbeautifyrc , kann auch Vererbung/Überschreibung verwenden.

Unten sehen Sie eine Beispielkonfigurationsstruktur mit allen unterstützten Speicherorten für Sprachüberschreibungsknoten. Wir werden verwenden indent_size, um zu besprechen, wie sich diese Konfiguration verhalten würde, aber eine beliebige Anzahl von Einstellungen kann geerbt 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 folgendes Ergebnis:

  • HTML-Dateien
    • Erben Sie indent_size4 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- end_with_newlineEinstellung
      • Überschreiben Sie ihre Einrückung auf 2 Leerzeichen
  • CSS-Dateien
    • Überschreiben Sie die Einstellung der obersten Ebene mit einem indent_sizevon 1 Leerzeichen.
  • JavaScript-Dateien
    • Übernehmen indent_sizevon 4 Leerzeichen aus der Einstellung der obersten Ebene
    • Set preserve-newlineszutrue

CSS & HTML

Zusätzlich zur js-beautifyausführbaren Datei werden css-beautifyund html-beautify auch als einfache Schnittstelle zu diesen Skripten bereitgestellt.Alternativ js-beautify --cssoder js-beautify --htmlwird das gleiche erreicht.

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önerungen sind im Umfang viel einfacher und verfügen über weit 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 innerhalb der Datei. Dadurch können Sie den Beautifier anweisen, die Formatierung einer Datei beizubehalten oder einen Teil einer Datei vollständig zu ignorieren. Die Beispieleingabe unten bleibt nach der Verschönerung geändert changed

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

Es steht Ihnen frei, dies auf jede gewünschte Weise zu verwenden, falls Sie dies nützlich finden oder für Sie arbeiten, aber Sie müssen den Urheberrechtshinweis und die Lizenz aufbewahren. (MIT)

Credits

Danke 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 )