JS Embellisseur

Ce petit embellisseur reformatera et réindentera les signets, le JavaScript laid, déballera les scripts emballés par le célèbre packer de Dean Edward, ainsi que les scripts de désobscurcissement traités par javascriptobfuscator.com .

Contributeurs recherchés

Je mets cela au premier plan car les propriétaires existants ont actuellement très peu de temps pour travailler sur ce projet.C'est un projet populaire et largement utilisé, mais il a désespérément besoin de contributeurs qui ont le temps de s'engager à corriger à la fois les bogues rencontrés par les clients et les problèmes sous-jacents avec la conception et la mise en œuvre internes.

Si vous êtes intéressé, n'hésitez pas à consulter le CONTRIBUTING.mdpuis résolvez un problème marqué du libellé "Bon premier numéro" et soumettez un PR. Répétez aussi souvent que possible. Merci !

Usage

Vous pouvez embellir javascript à l'aide de JS Beautifier dans votre navigateur Web ou sur la ligne de commande à l'aide de node.js ou de python.

JS Beautifier est hébergé sur deux services CDN : cdnjs et rawgit.

Pour extraire l'un de ces services, incluez un ensemble de balises de script ci-dessous dans votre 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>

Avis de non-responsabilité : ce sont des services gratuits, il n'y a donc aucune garantie de disponibilité ou de support .

Navigateur Web

Ouvrez jsbeautifier.org . Les options sont disponibles via l'interface utilisateur.

Python

Pour embellir avec python :

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

La sortie embellie va à stdout.

Pour l'utiliser jsbeautifiercomme bibliothèque, c'est simple :

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

...ou, pour spécifier quelques options :

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

Les noms des options de configuration sont les mêmes que les noms de la CLI mais avec des traits de soulignement au lieu de tirets. L'exemple ci-dessus serait défini sur la ligne de commande comme --indent-size 2 --space-in-empty-paren.

JavaScript

Comme alternative au script Python, vous pouvez installer le package NPM js-beautify. Lorsqu'il est installé globalement, il fournit un js-beautifyscript exécutable . Comme avec le script Python, le résultat embelli est envoyé à, stdoutsauf configuration contraire.

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

Vous pouvez également utiliser js-beautifycomme nodebibliothèque (installer localement, la npmvaleur par défaut) :

1$ npm install js-beautify

Importez et appelez la méthode d'embellissement appropriée pour javascript (js), css ou html. Les trois signatures de méthode sont beautify(code, options). codeEst une chaîne de code à embellir. options est un objet avec les paramètres que vous souhaitez utiliser pour embellir le code.

Les noms des options de configuration sont les mêmes que les noms CLI, mais avec des traits de soulignement au lieu de tirets. Par exemple, --indent-size 2 --space-in-empty-parenserait { 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 }));
});

Options

Voici les indicateurs de ligne de commande pour les scripts Python et 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]

Qui correspondent aux touches d'option soulignées pour les deux interfaces de bibliothèque

valeurs par défaut par options 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"
}

valeurs par défaut non exposées dans la cli

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

Notez que toutes les valeurs par défaut ne sont pas exposées via la CLI. Historiquement, les API Python et JS n'étaient pas identiques à 100 %. Par exemple, elle space_before_conditionalest actuellement uniquement JS et n'est pas adressable à partir du script CLI. Il existe encore quelques autres cas supplémentaires. nous de 100% compatibilité API.

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

En plus des arguments CLI, vous pouvez transmettre la configuration à l'exécutable JS via :

toutes jsbeautify_les variables d'environnement préfixées
un JSONfichier formaté indiqué par le --configparamètre
un .jsbeautifyrcfichier contenant des JSONdonnées à n'importe quel niveau du système de fichiers ci-dessus$PWD

Les sources de configuration fournies plus tôt dans cette pile remplaceront les sources ultérieures.

Setting inheritance and Language-specific overrides

Les paramètres sont une arborescence peu profonde dont les valeurs sont héritées pour toutes les langues, mais peuvent être remplacées. Cela fonctionne pour les paramètres transmis directement à l'API dans l'une ou l'autre implémentation. Dans l'implémentation Javascript, les paramètres sont chargés à partir d'un fichier de configuration, tel que .jsbeautifyrc , peut également utiliser l'héritage/le remplacement.

Vous trouverez ci-dessous un exemple d'arborescence de configuration montrant tous les emplacements pris en charge pour les nœuds de remplacement de langue. Nous allons l'utiliser indent_sizepour discuter du comportement de cette configuration, mais n'importe quel nombre de paramètres peut être hérité ou remplacé :

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'utilisation de l'exemple ci-dessus aurait le résultat suivant :

Fichiers HTML
- Hériter indent_sizede 4 espaces du cadre de niveau supérieur.
- Les fichiers se termineraient également par une nouvelle ligne.
- JavaScript et CSS dans HTML
  - Hériter du end_with_newlineparamètre HTML
  - Remplacer leur retrait à 2 espaces
Fichiers CSS
- Remplacez le paramètre de niveau supérieur par un indent_sizeespace de 1.
Fichiers JavaScript
- Héritage indent_sizede 4 espaces du cadre supérieur
- Définir preserve-newlinessurtrue

CSS & HTML

En plus de l' js-beautifyexécutable, css-beautifyet html-beautify sont également fournis comme une interface simple dans ces scripts. Alternativement, js-beautify --cssou js-beautify --htmlaccompliront la même chose, respectivement.

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.

Les embellisseurs CSS et HTML ont une portée beaucoup plus simple et possèdent beaucoup moins d'options.

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

Directives pour Ignorer ou Conserver les sections (Javascript uniquement)

L'embellisseur pour prend en charge les directives dans les commentaires à l'intérieur du fichier. Cela vous permet de dire à l'embellisseur de conserver le formatage ou d'ignorer complètement une partie d'un fichier. L'exemple d'entrée ci-dessous restera modifié après l'embellissement

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

Licence

Vous êtes libre de l'utiliser comme vous le souhaitez, au cas où vous trouveriez cela utile ou qui fonctionne pour vous, mais vous devez conserver l'avis de droit d'auteur et la licence.(MIT)

Crédits

Créé par Einar Lielmanis, einar@jsbeautifier.org
Version Python fleurie par Stefano Sanfilippo a.little.coder@gmail.com
Ligne de commande pour node.js par Daniel Stockman daniel.stockman@gmail.com
Maintenu et développé par Liam Newman bitwiseman@gmail.com

Merci également à Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta et d'autres.

(README.md : js-beautify@1.7.5 )

Guide de développement

Module de base

Objets intégrés

Module communautaire