Mòdul de comunitat impressionant

JS Embellidor

Estat de la compilació Estat de la construcció

Versió PyPI Versió CDNJS Versió NPM Baixa les estadístiques

Uniu-vos al xat a https://gitter.im/beautify-web/js-beautify Segueix a Twitter

Estadístiques de NPM

Aquest petit embellidor tornarà a formatar i reincorporar els bookmarklets, el feix JavaScript, descomprimirà els scripts empaquetats pel popular empaquetador de Dean Edward, així com desobfuscarà els scripts processats per javascriptobfuscator.com .

Es necessiten col·laboradors

Estic posant aquest enfocament a la part superior perquè els propietaris existents 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 de comprometre’s a solucionar tant els errors que s’enfronten als clients com els problemes subjacents. amb el disseny intern i la implementació.

Si esteu interessats, mireu el CONTRIBUTING.mda continuació, solucioneu un problema marcat amb l' etiqueta "Bon primer número" i envieu un PR. Repetiu-lo el més sovint possible. Gràcies

Ús

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

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

Per extreure un d'aquests serveis, incloeu un conjunt d'etiquetes de script a continuació al 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: es tracta de serveis gratuïts, de manera que no hi ha temps d’activitat ni garanties de suport .

Navegador web

Obriu jsbeautifier.org . Les opcions estan disponibles a través de la IU.

Python

Per embellir amb Python:

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

La sortida embellida va a stdout.

Utilitzar jsbeautifiercom a biblioteca és senzill:

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

... o bé, 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 noms de la CLI, però amb guions baixos en comptes de guions. L'exemple anterior es definiria a la línia d'ordres com --indent-size 2 --space-in-empty-paren.

JavaScript

Com a alternativa a l’escriptura Python, podeu instal·lar el paquet NPM js-beautify. Quan s’instal·la globalment, proporciona un js-beautifyscript executable . Igual que amb l’escriptura Python, el resultat embellit s’envia a stdoutmenys que es configuri el contrari.

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

També podeu utilitzar-la js-beautifycom a nodebiblioteca (instal·leu-la localment, npmper defecte):

1
$ npm install js-beautify

Importeu i truqueu el mètode d’embellidor adequat per a javascript (js), css o html. Les tres signatures del mètode són beautify(code, options). codeÉs una cadena de codi que s’ha d’embellir. Les opcions són un objecte amb la configuració que voleu que s’utilitzi per embellir el codi.

Els noms de les opcions de configuració són els mateixos que els noms 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 per als scripts Python i 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 claus d'opció subratllades per a les dues interfícies de biblioteca

valors predeterminats per opcions de 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 exposats al cli

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

Tingueu en compte que no tots els valors predeterminats s’exposen mitjançant la CLI. Històricament, les API de Python i JS no eren 100% idèntiques. Per exemple, space_before_conditionalactualment només és JS i no es pot adreçar des de l’escriptura CLI. Encara hi ha alguns altres casos addicionals que mantenen compatibilitat amb l'API al 100%.

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 prefixada
  • 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 anul·laran les posteriors.

Setting inheritance and Language-specific overrides

Els paràmetres són un arbre poc profund els valors dels quals s'hereten per a tots els idiomes, però es poden anul·lar. Funciona per a paràmetres que es transmeten directament a l'API en qualsevol de les dues implementacions. A la implementació de Javascript, els paràmetres es carreguen des d'un fitxer de configuració, com ara .jsbeautifyrc , també pot utilitzar l'herència / substitució.

A continuació es mostra un exemple d'arbre de configuració que mostra totes les ubicacions admeses per als nodes de substitució d'idioma. L'utilitzarem indent_sizeper analitzar el comportament d'aquesta configuració, però es pot heretar o anul·lar qualsevol configuració:

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

Si utilitzeu l’exemple anterior tindríeu 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 de HTML
      • Hereta la end_with_newlineconfiguració HTML
      • Substitueix el seu sagnat a 2 espais
  • Fitxers CSS
    • Substitueix la configuració de nivell superior a un indent_sizeespai d'1.
  • Fitxers JavaScript
    • Hereta indent_sizede 4 espais de la configuració de nivell superior
    • Estableix preserve-newlinesatrue

CSS & HTML

A més de l' js-beautifyexecutable, css-beautifyi html-beautify també es proporcionen com una interfície fàcil en aquests scripts. Alternativament, js-beautify --csso js-beautify --htmlva a aconseguir 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

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

Embellidor per admet directrius als comentaris dins del fitxer. Això us permet indicar a l’embellidor que conservi el format o ignori completament una part d’un fitxer. L’exemple d’entrada següent es modificarà 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 i la llicència de drets d'autor. (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 )