Mòdul comunitari fantàstic

JS Embelledor

Estat de construcció Estat de construcció

Versió PyPI Versió CDNJS Versió NPM Descarregar estadístiques

Uneix-te al xat a https://gitter.im/beautify-web/js-beautify Seguiu a Twitter

Estadístiques NPM

Aquest petit embellidor reformatarà i reintegrarà els bookmarklets, JavaScript lleig, desempaquetarà scripts empaquetats pel popular empaquetador de Dean Edward, així com desofuscarà scripts processats per javascriptobfuscator.com .

Es necessiten col·laboradors

Estic posant això al davant perquè els propietaris actuals tenen un temps molt limitat per treballar en aquest projecte actualment. Aquest és un projecte popular i molt utilitzat, però necessita desesperadament col·laboradors que tinguin temps per comprometre's a solucionar els errors dels clients i els problemes subjacents. amb el disseny intern i la implementació.

Si esteu interessats, feu una ullada aCONTRIBUTING.mda continuació, solucioneu un problema marcat amb l' etiqueta "Bo primer problema" i envieu un PR. Repetiu-ho tan sovint com sigui possible. Gràcies!

Ús

Podeu embellir javascript amb JS Beautifier al vostre navegador web o a la línia d'ordres mitjançant node.js o python.

JS Beautifier està allotjat en dos serveis CDN: cdnjs i rawgit.

Per extreure'n d'un d'aquests serveis, incloeu un conjunt de les etiquetes d'script a continuació al vostre document:

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>

Exempció de responsabilitat: aquests són serveis gratuïts, de manera que no hi ha garanties de temps d'activitat ni d'assistència .

Navegador web

Obriu jsbeautifier.org . Les opcions estan disponibles a través de la interfície d'usuari.

Python

Per embellir amb Python:

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

La sortida embellida va a stdout.

Per utilitzar-lo jsbeautifiercom a biblioteca és senzill:

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

...o, per especificar algunes opcions:

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

Els noms de les opcions de configuració són els mateixos que els de la CLI, però amb guions baixos en lloc de guions. L'exemple anterior es definiria a la línia d'ordres com a --indent-size 2 --space-in-empty-paren.

JavaScript

Com a alternativa a l'script de Python, podeu instal·lar el paquet NPM js-beautify. Quan s'instal·la globalment, proporciona un js-beautifyscript executable. Igual que amb l'script de Python, el resultat embellit s'envia a stdouttret que es configure el contrari.

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

També podeu utilitzar js-beautifycom a nodebiblioteca (instal·lar localment, el npmpredeterminat):

1
$ npm install js-beautify

Importeu i crideu el mètode d'embellidor adequat per a javascript (js), css o html. Les tres signatures de mètodes són beautify(code, options). codeés la cadena de codi que cal embellir. options és un objecte amb la configuració que voleu utilitzar per embellir el codi.

Els noms de les opcions de configuració són els mateixos que els de la CLI, però amb guions baixos en lloc de guions. Per exemple, --indent-size 2 --space-in-empty-parenseria { 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 })); });

Opcions

Aquests són els indicadors de línia d'ordres tant per a scripts Python com per a 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]

Que corresponen a les tecles d'opció subratllades per a ambdues interfícies de biblioteca

per defecte segons les opcions de la 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" }

els valors per defecte no s'exposen al cli

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

Tingueu en compte que no tots els valors predeterminats s'exposen a través de la CLI. Històricament, les API de Python i JS no han estat 100% idèntiques. Per exemple, space_before_conditionalactualment només són JS i no es poden adreçar des de l'script CLI. Encara queden alguns altres casos addicionals. nosaltres des del 100% de compatibilitat amb API.

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

A més dels arguments CLI, podeu passar la configuració a l'executable JS mitjançant:

  • qualsevol jsbeautify_variable d'entorn amb prefix
  • un JSONfitxer amb format indicat pel --configparàmetre
  • un .jsbeautifyrcfitxer que conté JSONdades a qualsevol nivell del sistema de fitxers anterior$PWD

Les fonts de configuració proporcionades anteriorment en aquesta pila substituiran les posteriors.

Setting inheritance and Language-specific overrides

La configuració és un arbre poc profund els valors del qual s'hereten per a tots els idiomes, però es poden substituir. Això funciona per a la configuració que es passa directament a l'API en qualsevol implementació. A la implementació de Javascript, la configuració es carrega des d'un fitxer de configuració, com ara .jsbeautifyrc. , també pot utilitzar l'herència/anul·lació.

A continuació es mostra un exemple d'arbre de configuració que mostra totes les ubicacions admeses per als nodes de substitució d'idiomes. L'utilitzarem indent_sizeper discutir com es comportaria aquesta configuració, però es pot heretar o substituir qualsevol nombre de paràmetres:

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

Utilitzant l'exemple anterior tindria el resultat següent:

  • Fitxers HTML
    • Hereta indent_sizede 4 espais de la configuració de nivell superior.
    • Els fitxers també acabarien amb una nova línia.
    • JavaScript i CSS dins d'HTML
      • Hereta la end_with_newlineconfiguració HTML
      • Anul·leu el sagnat a 2 espais
  • Fitxers CSS
    • Anul·la la configuració de nivell superior a un indent_sizeespai d'1.
  • Fitxers JavaScript
    • Hereta indent_sizede 4 espais de la configuració de nivell superior
    • Ajustat preserve-newlinesatrue

CSS & HTML

A més de l' js-beautifyexecutable, css-beautifyi html-beautify també es proporcionen com una interfície senzilla en aquests scripts. Alternativament, js-beautify --csso js-beautify --htmlaconseguiran el mateix, respectivament.

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.

Els embellidors CSS i HTML tenen un abast molt més senzill i tenen moltes menys opcions.

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

Instruccions per ignorar o conservar seccions (només Javascript)

L'embellidor per admet directives als comentaris dins del fitxer. Això us permet dir-li a l'embellidor que preservi el format d'un fitxer o que ignori completament una part d'un fitxer. L'entrada d'exemple següent es canviarà després de l'embelliment.

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

llicència

Podeu utilitzar-lo de la manera que vulgueu, en cas que us resulti útil o us funcioni, però heu de mantenir l'avís de drets d'autor i la llicència. (MIT)

Crèdits

Gràcies també a Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta i altres.

(README.md: js-beautify@1.7.5)