JS Embelledor

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

• Creat per Einar Lielmanis, einar@jsbeautifier.org
• Versió Python florida per Stefano Sanfilippo a.little.coder@gmail.com
• Línia d'ordres per a node.js de Daniel Stockman daniel.stockman@gmail.com
• Mantingut i ampliat per Liam Newman bitwiseman@gmail.com

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)