멋진 커뮤니티 모듈

JS 뷰티 파이어

빌드 상태빌드 상태

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

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

NPM 통계

이 작은 미화 도구는 북마크릿, 추악한 JavaScript, Dean Edward의 인기있는 패커로 압축 된 스크립트의 압축을 풀고 javascriptobfuscator.com에서 처리 한 스크립트 를 난독 해제합니다.

필요한 기여자

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

관심이 있으시면 CONTRIBUTING.md 를 살펴본 다음 "Good first issue" 라벨이 표시된 문제를 수정하고 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-beautifynode 라이브러리로 사용할 수도 있습니다 (로컬 설치, npm 기본값).

1
$ npm install js-beautify

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

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_ 접두사가 붙은 환경 변수
  • --config 매개 변수로 표시된 JSON 형식 파일
  • $PWD 이상의 파일 시스템 수준에있는 JSON 데이터를 포함하는 .jsbeautifyrc 파일

이 스택의 앞부분에 제공된 구성 소스는 이후 소스를 재정의합니다.

Setting inheritance and Language-specific overrides

설정은 값이 모든 언어에 대해 상속되지만 재정의 할 수있는 얕은 트리입니다. 두 구현 모두에서 API로 직접 전달되는 설정에 대해 작동합니다. 자바 스크립트 구현에서 .jsbeautifyrc와 같은 구성 파일에서로드 된 설정은 다음을 수행 할 수 있습니다. 상속 / 무시도 사용하십시오.

다음은 언어 재정의 노드에 대해 지원되는 모든 위치를 보여주는 구성 트리의 예입니다. indent_size 를 사용 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 파일
    • 최상위 설정에서 4 칸의 indent_size 를 상속합니다.
    • 파일은 또한 개행으로 끝납니다.
    • HTML 내부의 JavaScript 및 CSS
      • HTML end_with_newline 설정 상속
      • 들여 쓰기를 2 개의 공백으로 재정의
  • CSS 파일
    • 최상위 설정을 1 공백의 indent_size 로 대체하십시오.
  • JavaScript 파일
    • 최상위 설정에서 4 칸의 indent_size 상속
    • 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 미화 기는 범위가 훨씬 간단하고 옵션이 훨씬 적습니다.

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 전용)

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

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 )