멋진 커뮤니티 모듈

JS 미화

빌드 상태 빌드 상태

PyPI 버전 CDNJS 버전 NPM 버전 통계 다운로드

https://gitter.im/beautify-web/js-beautify에서 채팅에 참여하세요. 트위터 팔로우

NPM 통계

이 작은 미화 도구는 북마크릿, 못생긴 JavaScript, Dean Edward의 인기 있는 패커가 포장한 스크립트의 압축을 풀고 javascriptobfuscator.com에서 처리한 스크립트의 난독화를 다시 포맷하고 다시 들여씁니다 .

필요한 기여자

기존 소유자가 현재 이 프로젝트에서 작업할 수 있는 시간이 매우 제한되어 있기 때문에 이 내용을 맨 앞과 중앙에 둡니다. 이것은 인기 있는 프로젝트이고 널리 사용되지만 고객이 직면한 버그와 근본적인 문제를 모두 수정할 시간이 있는 기여자가 절실히 필요합니다. 내부 설계 및 구현.

관심있으신 분들은 참고하셔서 CONTRIBUTING.md그런 다음 "좋은 첫 번째 문제" 레이블이 표시된 문제를 수정하고 PR을 제출합니다. 가능한 한 자주 반복합니다. 감사합니다!

용법

웹 브라우저에서 JS Beautifier를 사용하거나 node.js 또는 python을 사용하여 명령줄에서 자바스크립트를 아름답게 할 수 있습니다.

JS Beautifier는 cdnjs 와 rawgit의 두 가지 CDN 서비스에서 호스팅됩니다 .

이러한 서비스 중 하나에서 가져오려면 문서에 아래 스크립트 태그 세트 하나를 포함하십시오.

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를 열고 UI를 통해 옵션을 사용할 수 있습니다.

파이썬

파이썬을 사용하여 아름답게 하려면:

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.

자바스크립트

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

javascript(js), css 또는 html에 대한 적절한 beautifier 메소드를 가져오고 호출합니다. 세 가지 메소드 서명은 모두 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" }

cli에 노출되지 않은 기본값

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

모든 기본값이 CLI를 통해 노출되는 것은 아닙니다. 역사적으로 Python과 JS API는 100% 동일하지 않습니다. 예를 들어, space_before_conditional현재 JS 전용이며 CLI 스크립트에서 주소를 지정할 수 없습니다. 100% API 호환성을 제공합니다.

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

CLI 인수 외에도 다음을 통해 JS 실행 파일에 구성을 전달할 수 있습니다.

  • 모든 jsbeautify_접두사 환경 변수
  • JSON-formatted 파일로 표시 --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개의 공백을 상속 합니다.
    • 파일은 또한 개행 문자로 끝납니다.
    • HTML 내부의 JavaScript 및 CSS
      • HTML end_with_newline설정 상속
      • 들여쓰기를 2칸으로 재정의
  • CSS 파일
    • 최상위 설정을 indent_size1 공백으로 재정의합니다 .
  • 자바스크립트 파일
    • indent_size최상위 설정에서 4개의 공백 상속
    • 설정 preserve-newlinestrue

CSS & HTML

받는 또한 js-beautify실행 파일 css-beautifyhtml-beautify 같은 대안. 그러한 스크립트에 쉽게 인터페이스로 제공되고, 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

Ignore or Preserve 섹션에 대한 지시문(Javascript만 해당)

Beautifier for support 지시문은 파일 내부의 주석에 있습니다. 이를 통해 beautifier에게 파일의 형식을 유지하거나 파일의 일부를 완전히 무시하도록 지시할 수 있습니다. 아래 예제 입력은 미화 후에도 변경된 상태로 유지됩니다.

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)

크레딧

Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta 등에게도 감사드립니다.

(README.md: js-beautify@1.7.5 )