Удивительный модуль сообщества

JS Beautifier

Статус сборки Статус сборки

Версия PyPI CDNJS версия Версия NPM Скачать статистику

Присоединяйтесь к чату на https://gitter.im/beautify-web/js-beautify. Твиттер Подписаться

Статистика NPM

Этот маленький украшатель будет переформатировать и переопределять букмарклеты, уродливый JavaScript, распаковывать сценарии, упакованные популярным упаковщиком Дина Эдварда, а также деобфусцировать сценарии, обработанные javascriptobfuscator.com .

Требуются участники

Я ставлю этот фронт и центр выше, потому что существующие владельцы имеют очень ограниченное время для работы над этим проектом в настоящее время.Это популярный проект и широко используется, но он отчаянно нуждается в участниках, у которых есть время, чтобы посвятить себя устранению как ошибок, с которыми сталкиваются клиенты, так и основных проблем. с внутренним дизайном и реализацией.

Если вы заинтересованы, пожалуйста, взгляните на CONTRIBUTING.md затем исправьте проблему, помеченную меткой «Хорошая первая проблема», и отправьте PR. Повторяйте как можно чаще. Спасибо!

Применение

Вы можете украсить javascript, используя JS Beautifier, в своем веб-браузере или в командной строке, используя node.js или python.

JS Beautifier размещен на двух сервисах CDN: cdnjs и rawgit.

Чтобы извлечь из одного из этих сервисов, включите в ваш документ один набор тегов сценария:

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>

Отказ от ответственности: это бесплатные услуги, поэтому нет гарантий бесперебойной работы или поддержки .

Веб-браузер

Откройте jsbeautifier.org . Опции доступны через пользовательский интерфейс.

питон

Чтобы украсить с помощью Python:

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

Украшенный вывод идет на стандартный stdout .

Использовать jsbeautifier в качестве библиотеки просто:

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

... или, чтобы указать некоторые параметры:

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

Имена параметров конфигурации совпадают с именами CLI, но с подчеркиванием вместо тире.Пример, приведенный выше, будет установлен в командной строке как --indent-size 2 --space-in-empty-paren .

JavaScript

В качестве альтернативы сценарию Python вы можете установить пакет NPM js-beautify . При глобальной установке он предоставляет исполняемый сценарий js-beautify . Как и в случае сценария Python, улучшенный результат отправляется на стандартный stdout если не настроено иное.

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

Вы также можете использовать js-beautify в качестве библиотеки node (установить локально, по умолчанию npm ):

1
$ npm install js-beautify

Импортируйте и вызовите метод approriate beautifier для javascript (js), css или html. Все три сигнатуры методов являются beautify(code, options) . code - это строка кода, которая должна быть украшена. Options - это объект с настройками, которые вы бы как раньше, чтобы украсить код.

Имена параметров конфигурации совпадают с именами CLI, но с подчеркиванием вместо тире. Например, --indent-size 2 --space-in-empty-paren будет { 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 })); });

Опции

Это флаги командной строки для скриптов Python и 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]

Которые соответствуют подчеркнутым клавишам опции для обоих интерфейсов библиотеки

значения по умолчанию для параметров 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" }

значения по умолчанию не выставлены в кли

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

Обратите внимание, что не все значения по умолчанию выставляются через CLI. Исторически API-интерфейсы Python и JS не были идентичны на 100%. Например, space_before_conditional в настоящее время space_before_conditional только для JS и не адресуется из сценария CLI. Есть еще несколько других дополнительных случаев удерживая нас от 100% API-совместимости.

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

В дополнение к аргументам CLI вы можете передать config в исполняемый файл JS через:

  • любые переменные окружения с jsbeautify_ jsbeautify_
  • файл в формате JSON указанный параметром --config
  • файл .jsbeautifyrc содержащий данные JSON на любом уровне файловой системы выше $PWD

Источники конфигурации, предоставленные ранее в этом стеке, будут переопределять более поздние.

Setting inheritance and Language-specific overrides

Параметры представляют собой поверхностное дерево, значения которого наследуются для всех языков, но могут быть переопределены. Это работает для параметров, передаваемых непосредственно в API в любой реализации. В реализации Javascript параметры, загруженные из файла конфигурации, такого как .jsbeautifyrc, могут также используйте наследование / переопределение.

Ниже приведен пример дерева конфигурации, показывающий все поддерживаемые местоположения для узлов переопределения языка. Мы будем использовать indent_size чтобы обсудить, как эта конфигурация будет вести себя, но любое количество настроек может быть унаследовано или переопределено:

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

Использование приведенного выше примера будет иметь следующий результат:

  • HTML-файлы
    • indent_size 4 пробелов из настройки верхнего уровня.
    • Файлы также заканчивались бы новой строкой.
    • JavaScript и CSS внутри HTML
      • Наследовать настройки HTML end_with_newline
      • Заменить их отступ на 2 пробела
  • CSS файлы
    • Переопределите настройку верхнего уровня на indent_size размером 1 пробел.
  • Файлы JavaScript
    • Наследовать indent_size 4 пробелов из настройки верхнего уровня
    • Установите для preserve-newlines значение true

CSS & HTML

В дополнение к исполняемому файлу js-beautify , css-beautify и html-beautify также предоставляются в качестве простого интерфейса для этих сценариев, или же js-beautify --html js-beautify --css или js-beautify --html будет выполнять то же самое, соответственно.

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.

CSS & HTML beautifiers намного проще по объему и обладают гораздо меньшими возможностями.

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

Директивы игнорировать или сохранять разделы (только Javascript)

Beautifier for поддерживает директивы в комментариях внутри файла. Это позволяет указать beautifier сохранение форматирования или полное игнорирование части файла. Пример ввода, приведенный ниже, останется измененным после beautification

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

Лицензия

Вы можете использовать это любым способом, если захотите, если это окажется полезным или работает для вас, но вы должны сохранить уведомление об авторских правах и лицензию. (MIT)

кредиты

Также спасибо Джейсону Даймонду, Патрику Хофу, Нохуму Соссонко, Андреасу Шнайдеру, Дэйву Василевскому, Виталию Батманову, Рону Болдуину, Габриэлю Харрисону, Крису Дж. Шаллу, Матиасу Биненсу, Витторио Гамбалетте и другим.

(README.md: js-beautify@1.7.5 )