JS Verschönerer

Dieser kleine Verschönerer wird Bookmarklets und hässliches JavaScript neu formatieren und neu einordnen, von Dean Edwards beliebtem Packer gepackte Skripte entpacken und von javascriptobfuscator.com verarbeitete Skripte entschlüsseln .

Mitwirkende gesucht

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

Wenn Sie Interesse haben, werfen Sie bitte einen Blick auf dieCONTRIBUTING.mdBeheben Sie dann ein Problem, das mit dem Label „Gutes erstes Problem“ 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 über die 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: Da es sich um kostenlose Dienste handelt, 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 es 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 festgelegt werden --indent-size 2 --space-in-empty-paren.

JavaScript

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

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

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

1$ npm install js-beautify

Importieren Sie die entsprechende Verschönerungsmethode für Javascript (JS), CSS oder HTML und rufen Sie sie auf. Alle drei Methodensignaturen sind beautify(code, options). codeist eine Codezeichenfolge, die verschönert werden soll. Optionen ist ein Objekt mit den Einstellungen, die Sie zum Verschönern des Codes verwenden möchten.

Die Namen der Konfigurationsoptionen sind mit den CLI-Namen identisch, jedoch mit Unterstrichen anstelle von Bindestrichen. Beispiel --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]

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

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

Standardeinstellungen werden in der CLI nicht 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 100 % identisch. Beispielsweise ist sie space_before_conditionalderzeit nur JS-basiert und kann nicht über das CLI-Skript angesprochen werden. Es bleiben noch einige andere zusätzliche Fälle bestehen uns von 100% API-Kompatibilität.

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

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

beliebige jsbeautify_Umgebungsvariablen mit Präfix
eine JSONformatierte Datei, die durch den --configParameter angegeben wird
eine .jsbeautifyrcDatei, die JSONDaten auf einer beliebigen Ebene des oben genannten Dateisystems enthält$PWD

Früher in diesem Stapel bereitgestellte Konfigurationsquellen überschreiben spätere.

Setting inheritance and Language-specific overrides

Bei den Einstellungen handelt es sich um einen flachen 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 wie .jsbeautifyrc geladen , kann auch Vererbung/Überschreibung verwenden.

Unten sehen Sie einen Beispielkonfigurationsbaum, der alle unterstützten Speicherorte für Sprachüberschreibungsknoten zeigt. Wir werden hier indent_sizebesprechen, wie sich diese Konfiguration verhalten würde, aber es können beliebig viele Einstellungen 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 würde zu folgendem Ergebnis führen:

HTML-Dateien
- Übernahme indent_sizevon 4 Leerzeichen aus der Einstellung der obersten Ebene.
- Die Dateien würden auch mit einer neuen Zeile enden.
- JavaScript und CSS in HTML
  - Erben Sie die HTML- end_with_newlineEinstellung
  - Überschreiben Sie ihre Einrückung mit 2 Leerzeichen
CSS-Dateien
- Überschreiben Sie die Einstellung der obersten Ebene auf indent_size1 Leerzeichen.
JavaScript-Dateien
- Übernahme indent_sizevon 4 Leerzeichen aus der Einstellung der obersten Ebene
- Einstellen preserve-newlines_true

CSS & HTML

Zusätzlich zur js-beautifyausführbaren Datei werden auch css-beautifyund html-beautify als einfache Schnittstelle zu diesen Skripten bereitgestellt. Alternativ wird mit js-beautify --cssoder js-beautify --htmldas 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 haben einen viel einfacheren 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)

Verschönerer für unterstützt Anweisungen in Kommentaren innerhalb der Datei. Dadurch können Sie den Verschönerer anweisen, die Formatierung einer Datei beizubehalten oder einen Teil einer Datei vollständig zu ignorieren. Die folgende Beispieleingabe bleibt nach der Verschönerung unverä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

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)

Credits

Erstellt von Einar Lielmanis, einar@jsbeautifier.org
Die Python-Version wurde von Stefano Sanfilippo a.little.coder@gmail.com entwickelt
Befehlszeile für node.js von Daniel Stockman daniel.stockman@gmail.com
Gepflegt und erweitert von Liam Newman bitwiseman@gmail.com

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

Entwicklungshandbuch

Basismodul

eingebaute Objekte

Community-Modul