JS-verfraaier

Deze kleine verfraaier zal bookmarklets en lelijke JavaScript opnieuw formatteren en opnieuw indenteren, scripts uitpakken die zijn ingepakt door de populaire packer van Dean Edward, en scripts die zijn verwerkt door javascriptobfuscator.com onleesbaar maken .

Bijdragers nodig

Ik zet dit centraal omdat bestaande eigenaren momenteel zeer weinig tijd hebben om aan dit project te werken. Dit is een populair project en wordt veel gebruikt, maar het heeft dringend medewerkers nodig die tijd hebben om zich in te zetten voor het oplossen van zowel klantgerichte bugs als onderliggende problemen. met het interne ontwerp en de implementatie.

Bent u geïnteresseerd, kijk dan eens op deCONTRIBUTING.mdLos vervolgens een probleem op dat is gemarkeerd met het label 'Goed eerste probleem' en dien een PR in. Herhaal dit zo vaak mogelijk. Bedankt!

Gebruik

U kunt JavaScript verfraaien met JS Beautifier in uw webbrowser, of op de opdrachtregel met node.js of python.

JS Beautifier wordt gehost op twee CDN-services: cdnjs en rawgit.

Als u een van deze services wilt gebruiken, neemt u een set van de onderstaande scripttags op in uw 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>

Disclaimer: dit zijn gratis services, dus er zijn geen uptime- of ondersteuningsgaranties .

Webbrowser

Open jsbeautifier.org . Opties zijn beschikbaar via de gebruikersinterface.

Python

Verfraaien met Python:

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

Verfraaide uitvoer gaat naar stdout.

Te gebruiken jsbeautifierals bibliotheek is eenvoudig:

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

...of, om enkele opties op te geven:

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

De namen van de configuratieopties zijn hetzelfde als de CLI-namen, maar met onderstrepingstekens in plaats van streepjes. Het bovenstaande voorbeeld zou op de opdrachtregel worden ingesteld als --indent-size 2 --space-in-empty-paren.

JavaScript

Als alternatief voor het Python-script kunt u het NPM-pakket installeren js-beautify. Wanneer het globaal wordt geïnstalleerd, biedt het een uitvoerbaar js-beautifyscript. Net als bij het Python-script wordt het verfraaide resultaat naar verzonden, stdouttenzij anders geconfigureerd.

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

U kunt ook js-beautifyals nodebibliotheek gebruiken (lokaal installeren, de npmstandaard):

1$ npm install js-beautify

Importeer en roep de juiste verfraaiingsmethode aan voor javascript (js), css of html. Alle drie de methodehandtekeningen zijn beautify(code, options). codeis een codereeks die moet worden verfraaid. opties is een object met de instellingen die u wilt gebruiken om de code te verfraaien.

De namen van de configuratieopties zijn hetzelfde als de CLI-namen, maar met onderstrepingstekens in plaats van streepjes. Dit --indent-size 2 --space-in-empty-parenzou bijvoorbeeld zijn { 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 }));
});

Opties

Dit zijn de opdrachtregelvlaggen voor zowel Python- als JS-scripts:

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]

Deze komen overeen met de onderstreepte optietoetsen voor beide bibliotheekinterfaces

standaardinstellingen per CLI-opties

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

standaardinstellingen die niet zichtbaar zijn in de cli

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

Merk op dat niet alle standaardinstellingen worden weergegeven via de CLI. Historisch gezien zijn de Python- en JS-API's niet 100% identiek geweest. Momenteel space_before_conditionalzijn ze bijvoorbeeld alleen JS en kunnen ze niet worden geadresseerd via het CLI-script. Er zijn nog een paar andere gevallen die behouden blijven ons van 100% API-compatibiliteit.

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

Naast CLI-argumenten kunt u configuratie doorgeven aan het uitvoerbare JS-bestand via:

eventuele jsbeautify_omgevingsvariabelen met een voorvoegsel
een JSON-geformatteerd bestand aangegeven door de --configparameter
een .jsbeautifyrcbestand dat JSONgegevens bevat op elk niveau van het bovenstaande bestandssysteem$PWD

Configuratiebronnen die eerder in deze stapel zijn opgegeven, zullen latere bronnen overschrijven.

Setting inheritance and Language-specific overrides

De instellingen zijn een ondiepe boom waarvan de waarden voor alle talen worden overgenomen, maar kunnen worden overschreven. Dit werkt voor instellingen die in beide implementaties rechtstreeks aan de API worden doorgegeven. In de Javascript-implementatie worden de instellingen geladen vanuit een configuratiebestand, zoals .jsbeautifyrc , kan ook overerving/overschrijving gebruiken.

Hieronder ziet u een voorbeeld van een configuratieboom waarin alle ondersteunde locaties voor taaloverschrijvingsknooppunten worden weergegeven. We zullen dit gebruiken indent_sizeom te bespreken hoe deze configuratie zich zou gedragen, maar een willekeurig aantal instellingen kan worden overgenomen of overschreven:

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

Het gebruik van het bovenstaande voorbeeld zou het volgende resultaat opleveren:

HTML-bestanden
- Erven indent_size4 velden van de instelling op het hoogste niveau.
- De bestanden eindigen ook met een nieuwe regel.
- JavaScript en CSS binnen HTML
  - Neem de HTML- end_with_newlineinstelling over
  - Overschrijf de inspringing naar 2 spaties
CSS-bestanden
- Overschrijf de instelling op het hoogste niveau naar een indent_sizespatie van 1.
JavaScript-bestanden
- Erven indent_sizevan 4 velden van de instelling op het hoogste niveau
- Instellen preserve-newlinesoptrue

CSS & HTML

Naast het js-beautifyuitvoerbare bestand worden css-beautifyze html-beautify ook geleverd als een eenvoudige interface voor die scripts. Als alternatief, js-beautify --cssof js-beautify --htmlzullen ze hetzelfde bereiken.

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.

De CSS- en HTML-verfraaiers zijn veel eenvoudiger van opzet en beschikken over veel minder opties.

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

Richtlijnen voor het negeren of behouden van secties (alleen JavaScript)

Verfraaiing voor ondersteunt richtlijnen in opmerkingen in het bestand. Hiermee kunt u de verfraaier vertellen de opmaak van een bestand te behouden of een deel van een bestand volledig te negeren. De onderstaande voorbeeldinvoer blijft na de verfraaiing gewijzigd

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

Licentie

U bent vrij om dit op elke gewenste manier te gebruiken, voor het geval u dit nuttig vindt of voor u werkt, maar u moet zich aan de copyrightkennisgeving en licentie houden. (MIT)

Kredieten

Gemaakt door Einar Lielmanis, einar@jsbeautifier.org
Python-versie bloeide door Stefano Sanfilippo a.little.coder@gmail.com
Commandoregel voor node.js door Daniel Stockman daniel.stockman@gmail.com
Onderhouden en uitgebreid door Liam Newman bitwiseman@gmail.com

Dank ook aan Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta en anderen.

(README.md: js-beautify@1.7.5)

Ontwikkelingsgids

Basismodule

ingebouwde objecten

gemeenschapsmodule