Fantastico modulo comunitario

JS Beautifier

Stato build Stato della build

Versione PyPI Versione CDNJS Versione NPM Scarica le statistiche

Unisciti alla chat su https://gitter.im/beautify-web/js-beautify Twitter Segui

Statistiche NPM

Questo piccolo estetista riformatterà e riutilizzerà bookmarklet, brutti JavaScript, disimballerà gli script impacchettati dal popolare packer di Dean Edward, così come gli script deobfuscati elaborati da javascriptobfuscator.com .

Collaboratori necessari

Sto mettendo questo fronte e centro sopra perché i proprietari esistenti hanno un tempo molto limitato per lavorare su questo progetto attualmente. Questo è un progetto popolare e ampiamente usato ma ha disperatamente bisogno di collaboratori che hanno il tempo di impegnarsi a riparare sia i bug che i clienti che i problemi sottostanti con la progettazione e l'implementazione interne.

Se sei interessato, dai un'occhiata a CONTRIBUTING.md quindi risolvi un problema contrassegnato dall'etichetta "Good first issue" e invia un PR. Ripeti il ​​più spesso possibile. Grazie!

uso

Puoi abbellire javascript usando JS Beautifier nel tuo browser web o dalla riga di comando usando node.js o python.

JS Beautifier è ospitato su due servizi CDN: cdnjs e rawgit.

Per estrarre da uno di questi servizi includere un set di tag di script di seguito nel documento:

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>

Dichiarazione di non responsabilità: questi sono servizi gratuiti, quindi non ci sono tempi di attività o garanzie di supporto .

Programma di navigazione in rete

Apri jsbeautifier.org Le opzioni sono disponibili tramite l'interfaccia utente.

Pitone

Per abbellire usando Python:

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

L'output abbellito va allo stdout .

Utilizzare jsbeautifier come libreria è semplice:

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

... oppure, per specificare alcune opzioni:

1 2 3 4
opts = jsbeautifier.default_options() opts.indent_size = 2 opts.space_in_empty_paren = True res = jsbeautifier.beautify('some javascript', opts)

I nomi delle opzioni di configurazione sono gli stessi dei nomi della CLI ma con trattini --indent-size 2 --space-in-empty-paren anziché trattini: l'esempio sopra verrebbe impostato sulla riga di comando come --indent-size 2 --space-in-empty-paren .

JavaScript

In alternativa allo script Python, è possibile installare il pacchetto NPM js-beautify . Se installato a livello globale, fornisce uno script eseguibile js-beautify . Come con lo script Python, il risultato abbellito viene inviato a stdout se non diversamente configurato.

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

Puoi anche usare js-beautify come libreria di node (installa localmente, l' npm predefinita npm ):

1
$ npm install js-beautify

Importa e chiama il metodo estetista appropriato per javascript (js), css o html. Tutte e tre le firme del metodo sono beautify(code, options) . Il code è una stringa di codice da abbellire. Le opzioni è un oggetto con le impostazioni che vorresti come usato per abbellire il codice.

I nomi delle opzioni di configurazione sono gli stessi dei nomi della CLI ma con trattini --indent-size 2 --space-in-empty-paren anziché trattini, ad esempio --indent-size 2 --space-in-empty-paren sarebbe { 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 })); });

Opzioni

Questi sono i flag della riga di comando per entrambi gli script Python e JS:

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]

Che corrispondono alle chiavi di opzione sottolineate per entrambe le interfacce della libreria

impostazioni predefinite per opzioni CLI

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

impostazioni predefinite non esposte nel cli

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

Si noti che non tutte le impostazioni predefinite sono esposte tramite l'interfaccia della riga di comando. Storicamente, le API Python e JS non sono identiche al 100%. Ad esempio, space_before_conditional è attualmente solo JS e non indirizzabile dallo script CLI. Ci sono ancora alcuni altri casi aggiuntivi mantenendoci al 100% di compatibilità API.

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

Oltre agli argomenti CLI, è possibile passare la configurazione all'eseguibile JS tramite:

  • eventuali variabili d'ambiente jsbeautify_ jsbeautify_
  • un file formattato JSON indicato dal parametro --config
  • un file .jsbeautifyrc contenente dati JSON a qualsiasi livello del filesystem oltre $PWD

Le origini di configurazione fornite in precedenza in questo stack sostituiranno quelle successive.

Setting inheritance and Language-specific overrides

Le impostazioni sono un albero poco profondo i cui valori sono ereditati per tutte le lingue, ma possono essere sovrascritti. Funziona con le impostazioni passate direttamente all'API in entrambe le implementazioni. Nell'implementazione Javascript, le impostazioni caricate da un file di configurazione, come .jsbeautifyrc, possono usa anche l'ereditarietà / l'override.

Di seguito è riportato un albero di configurazione di esempio che mostra tutte le posizioni supportate per i nodi di override della lingua. Useremo indent_size per discutere come si comporterebbe questa configurazione, ma qualsiasi numero di impostazioni può essere ereditato o sovrascritto:

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

L'uso dell'esempio sopra avrebbe il seguente risultato:

  • File HTML
    • Eredita indent_size di 4 spazi dall'impostazione di livello superiore.
    • I file terminerebbero anche con una nuova riga.
    • JavaScript e CSS all'interno di HTML
      • Eredita l'impostazione HTML end_with_newline
      • Sostituisci il loro rientro in 2 spazi
  • File CSS
    • Sostituisci l'impostazione di livello superiore con un indent_size di 1 spazio.
  • File JavaScript
    • Eredita indent_size di 4 spazi dall'impostazione di livello superiore
    • Impostare preserve-newlines su true

CSS & HTML

Oltre all'eseguibile js-beautify , css-beautify e html-beautify sono anche forniti come una semplice interfaccia in quegli script, in alternativa, js-beautify --css o js-beautify --html realizzeranno la stessa cosa, rispettivamente.

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.

Gli abbellitori CSS e HTML hanno un ambito molto più semplice e possiedono molte meno opzioni.

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

Direttive per ignorare o conservare le sezioni (solo Javascript)

Beautifier per le direttive di supporto nei commenti all'interno del file. Ciò consente di dire a beautifier di preservare la formattazione o di ignorare completamente una parte di un file. L'esempio di input che segue rimarrà modificato dopo l'abbellimento

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 */

Licenza

Sei libero di utilizzarlo nel modo che preferisci, nel caso in cui lo ritieni utile o funzionante per te, ma devi conservare le informazioni sul copyright e la licenza. (MIT)

Crediti

Grazie anche a Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta e altri.

(README.md: js-beautify@1.7.5 )