[Javascript] js-beautify, 소스 코드 리포맷

 

    - 자바스크립트 소스 코드 정리 툴, 포매팅, 포메터

 

Javascript Beautifier - javascript re-formatter, JSON, CSS, Sass,  HTML

https://github.com/beautify-web/js-beautify  - 7.2k

    - v1.13.0 , 2020.8

 

    - 웹에서 테스트

https://beautifier.io/

 

    - 설치

> npm -g install js-beautify

    - 파일 수정

> js-beautify  -r foo.js

 

    - 설정 파일 적용해서 php (php,js,css혼합) 수정

> js-beautify --config ~/config/.jsbeautifyrc --type html -r foo.php

//-----------------------------------

< 설정 >

 

https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md

https://github.com/beautify-web/js-beautify 기본 설정

 

https://unibeautify.com/docs/option-jslint-happy - 설정 해설 참고용

.jsbeautifyrc 파일

 

{
      "indent_size": 2,         //들여쓰기 칸수
      "js": {
        "indent_size": 2
      },
      "html": {
        "indent_size": 2
      },
      "max_preserve_newlines": 5,   //최고 빈줄 수
      "brace_style": "collapse,preserve-inline",
      "operator_position": "after-newline",
      "break_chained_methods": false,       //체인 함수에 모두 줄바꿈 적용
      "end_with_newline": true, //마지막에 줄을 하나 만든다, 유닉스 호환을 위해 필요
      "space_after_anon_function": true,    // 무명함수 괄호 띄우기 , function ()
      "space_after_named_function": false,  // 유명함수 괄호 띄우기 , function example ()
      "wrap_line_length": 0,
      "indent_char": " ",               //들여쓰기 문자
      "indent_with_tabs": false,    //들여쓰기를 탭단위로 함,  'indent_size' 와 'indent_char' 설정 무효화
      "editorconfig": false,
      "eol": "\n", //개행 문자
      "indent_level": 0,                //처음 들여쓰기 수준
      "preserve_newlines": true,    //줄바꿈 유지
      "space_in_paren": false,  //괄호에 빈칸 추가 f( a, b )
      "space_in_empty_paren": false,    //빈 괄호에 빈찬 추가 f( )
      "jslint_happy": false,        //   jslint-stricter 모드, 무명함수 괄호 띄우기 , space_after_anon_function=true로 강제 설정됨
        true : function·(arg1)·{}␊ , false : ·function(arg1)·{}␊
      "unindent_chained_methods": false,    //체인 함수에 들여쓰기 적용안함
      "keep_array_indentation": false,      //배열에 적용된 들여쓰기를 유지
      "keep_function_indentation": false,   //함수에 적용된 들여쓰기를 유지
      "unescape_strings": false,    // 출력가능한 문자를 xNN 형식으로 인코드 , ??
      "comma_first": false, //줄바꿀때 콤마(,)를 줄 처음에 배치
      "indent_empty_lines": false, //빈줄 들여쓰기
        "e4x": false,   // e4x/jsx 문법 지원
      "templating": ["auto"]
}

//---------------------------------------------------------------

< VS Code Extension >

 

* HookyQR / VSCodeBeautify

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

    v1.5.0 , 2019.5  <=== 업데이트 오래됨

    - "js-beautify": "^1.10.0", 적용됨

    - ?? Nullish operator 에러

https://github.com/HookyQR/VSCodeBeautify - 515

vv0.8.6 , 2017

 

    - php에도 적용할수 있게 세부 설정 가능

 

    - vs code settings.json 설정

 

"beautify.config": "",

  "beautify.ignore": ["*/test1.js"],

  "beautify.language": {

    "js": {

      "type": ["javascript", "json", "jsonc"],

      "filename": [".jshintrc", ".jsbeautifyrc"],

      "ext": ["js", "json"]

    },

    "css": ["css", "less", "scss"],

    "html": ["htm", "html", "php"]

  },