js beautify
v1.15.1 ?
Этот маленький улучшитель переформатирует и изменит отступы букмарклетов, уродливого JavaScript, распакует скрипты, упакованные популярным упаковщиком Дина Эдварда, а также частично деобфускирует скрипты, обработанные пакетом npm javascript-obfuscator.
Откройте beautifier.io, чтобы попробовать. Опции доступны через пользовательский интерфейс.
Я ставлю это на первый план выше, потому что у существующих владельцев в настоящее время очень ограничено время для работы над этим проектом. Это популярный и широко используемый проект, но он отчаянно нуждается в участниках, у которых есть время посвятить себя исправлению как ошибок, с которыми сталкиваются клиенты, так и основных проблем внутреннего проектирования и реализации.
Если вам интересно, пожалуйста, загляните на CONTRIBUTING.md, затем исправьте проблему, помеченную пометкой «Хорошая первая проблема», и отправьте заявку на участие. Повторяйте как можно чаще. Спасибо!
Вы можете установить бьютификатор для Node.js или Python.
Вы можете установить пакет NPM js-beautify . При глобальной установке он предоставляет исполняемый скрипт js-beautify . Как и в случае со сценарием Python, улучшенный результат отправляется на stdout если не указано иное.
$ npm -g install js-beautify
$ js-beautify foo.js Вы также можете использовать js-beautify в качестве библиотеки node (установить локально, npm по умолчанию):
$ npm install js-beautifyВышеуказанное устанавливает последнюю стабильную версию. Чтобы установить бета-версию или RC-версию:
$ npm install js-beautify@nextДекоратор можно добавить на вашу страницу в качестве веб-библиотеки.
JS Beautifier размещается на двух сервисах CDN: cdnjs и rawgit.
Чтобы получить последнюю версию из одной из этих служб, включите в свой документ один набор тегов сценария, указанных ниже:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js " > </ script >Пример использования тега JS в html:
<!DOCTYPE html >
< html lang =" en " >
< body >
. . .
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" script.js " > </ script >
</ body >
</ html >Более старые версии доступны после изменения номера версии.
Отказ от ответственности: это бесплатные услуги, поэтому нет никаких гарантий бесперебойной работы или поддержки.
Чтобы установить версию программы Beautifier для Python:
$ pip install jsbeautifierВ отличие от версии JavaScript, версия Python может только переформатировать JavaScript. Он не работает с файлами HTML или CSS, но вы можете установить css-beautify для CSS:
$ pip install cssbeautifierВы можете украсить JavaScript с помощью JS Beautifier в своем веб-браузере или в командной строке с помощью Node.js или Python.
Откройте beautifier.io. Опции доступны через пользовательский интерфейс.
После того, как вы встроите теги <script> в свой html файл, они предоставляют три функции: js_beautify , css_beautify и html_beautify
Пример использования украшения строки json:
const options = { indent_size : 2 , space_in_empty_paren : true }
const dataObj = { completed : false , id : 1 , title : "delectus aut autem" , userId : 1 , }
const dataJson = JSON . stringify ( dataObj )
js_beautify ( dataJson , options )
/* OUTPUT
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/ При глобальной установке Beautifier предоставляет исполняемый скрипт js-beautify . Усовершенствованный результат отправляется на stdout если не указано иное.
$ js-beautify foo.js Чтобы использовать js-beautify в качестве библиотеки node (после локальной установки), импортируйте и вызовите соответствующий метод украшения для 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 } .
var beautify = require ( 'js-beautify/js' ) . 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 } ) ) ;
} ) ; Если вы используете импорт ESM, вы можете импортировать js-beautify следующим образом:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; После установки для украшения с помощью Python:
$ js-beautify file.js Украшенный вывод по умолчанию отправляется на stdout .
Использовать jsbeautifier в качестве библиотеки просто:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...или, чтобы указать некоторые параметры:
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 .
Это флаги командной строки для сценариев Python и JS:
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"] Select beautifier type (NOTE: Does *not* filter files, only defines which beautifier type to run)
-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 ()
--space-after-named-function Add a space before a named function's parens, i.e. function example ()
-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 that exceed 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]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in HTML
Что соответствует подчеркнутым клавишам опций для обоих интерфейсов библиотеки.
значения по умолчанию для параметров CLI
{
"indent_size" : 4 ,
"indent_char" : " " ,
"indent_with_tabs" : false ,
"editorconfig" : 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 ,
"space_after_named_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 " ,
"indent_empty_lines" : false ,
"templating" : [ " auto " ]
}значения по умолчанию не отображаются в командной строке
{
"eval_code" : false ,
"space_before_conditional" : true
}Обратите внимание, что не все значения по умолчанию доступны через CLI. Исторически сложилось так, что API Python и JS не были на 100% идентичными. Есть еще несколько дополнительных случаев, которые удерживают нас от 100% API-совместимости.
В дополнение к аргументам CLI вы можете передать конфигурацию исполняемому файлу JS через:
jsbeautify_JSON указанный параметром --config.jsbeautifyrc , содержащий данные JSON на любом уровне файловой системы выше $PWDИсточники конфигурации, предоставленные ранее в этом стеке, переопределяют более поздние.
Настройки представляют собой мелкое дерево, значения которого наследуются для всех языков, но могут быть переопределены. Это работает для настроек, передаваемых непосредственно в API в любой реализации. В реализации JavaScript настройки, загруженные из файла конфигурации, например .jsbeautifyrc, также могут использовать наследование/переопределение.
Ниже приведен пример дерева конфигурации, показывающий все поддерживаемые местоположения для узлов переопределения языка. Мы будем использовать indent_size , чтобы обсудить, как будет вести себя эта конфигурация, но любое количество настроек может быть унаследовано или переопределено:
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}Использование приведенного выше примера приведет к следующему результату:
indent_size из 4 пробелов из настройки верхнего уровня.end_with_newline .indent_size , равный 1 пробелу.indent_size из 4 пробелов из настройки верхнего уровня.preserve-newlines значение true . В дополнение к исполняемому файлу js-beautify , css-beautify и html-beautify также предоставляются в качестве простого интерфейса для этих сценариев. Альтернативно, js-beautify --css или js-beautify --html выполнят то же самое соответственно.
// 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 намного проще по объему и имеют гораздо меньше возможностей.
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
-b, --brace-style [collapse|expand] ["collapse"]
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
--indent-empty-lines Keep indentation on empty lines
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|aligned-multiple|preserve|preserve-aligned] ["auto"]
-M, --wrap-attributes-min-attrs Minimum number of html tag attributes for force wrap attribute options [2]
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned")
-d, --inline List of tags to be considered inline tags
--inline_custom_elements Inline custom elements [true]
-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
--indent_scripts Sets indent level inside script tags ("normal", "keep", "separate")
--unformatted_content_delimiter Keep text content together between this string [""]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,none,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in html
Директивы позволяют вам управлять поведением Beautifier из исходных файлов. Директивы размещаются в комментариях внутри файла. Директивы имеют формат /* beautify {name}:{value} */ в CSS и JavaScript. В HTML они имеют формат <!-- beautify {name}:{value} --> .
Директива ignore заставляет бьютификатор полностью игнорировать часть файла, рассматривая ее как обычный текст, который не анализируется. Ввод ниже останется неизменным после украшения:
// Use ignore when the content is not parsable in the current language, JavaScript in this case.
var a = 1 ;
/* beautify ignore:start */
{ This is some strange { template language { using open - braces ?
/* beautify ignore:end */ПРИМЕЧАНИЕ. эта директива работает только в HTML и JavaScript, но не в CSS.
Директива preserve заставляет Beautifier анализировать и затем сохранять существующее форматирование раздела кода.
Ввод ниже останется неизменным после украшения:
// Use preserve when the content is valid syntax in the current language, JavaScript in this case.
// This will parse the code and preserve the existing formatting.
/* beautify preserve:start */
{
browserName : 'internet explorer' ,
platform : 'Windows 7' ,
version : '8'
}
/* beautify preserve:end */Вы можете использовать это по своему усмотрению, если найдете это полезным или работающим для вас, но вы должны сохранить уведомление об авторских правах и лицензию. (МТИ)
Спасибо также Джейсону Даймонду, Патрику Хофу, Ночуму Соссонко, Андреасу Шнайдеру, Дэйву Василевски, Виталию Батманову, Рону Болдуину, Гэбриэлу Харрисону, Крису Дж. Шуллу, Матиасу Байненсу, Витторио Гамбалетте и другим.
(README.md: [email protected])
