Geweldige gemeenschapsmodule

JS-verfraaier

Bouwstatus Bouwstatus

PyPI-versie CDNJS-versie NPM-versie Statistieken downloaden

Neem deel aan de chat op https://gitter.im/beautify-web/js-beautify Twitter-volg

NPM-statistieken

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

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)