JS Embellidor

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

• Creat per Einar Lielmanis, einar@jsbeautifier.org
• La versió de 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 )