Js-beautify: 한 줄에 "짧은 개체"를 보존하거나 인라인하는 옵션

+1 ... 적어도 하나의 속성 개체가 한 줄에 머물 수 있으므로 c1[key] = { $exists: true }; 는 다음으로 변경되지 않습니다.

                c1[key] = {
                    $exists: true
                };

+1

인기있는 요청. :웃다:

이에 대한 이전 pull 요청은 줄 바꿈이 있기 전에 수행되었습니다. 줄 바꿈이 있으면 더 쉬워집니다.

우리는 객체 선언 내부에 있을 때 감지하므로 나쁘지는 않지만 늦게 감지하므로(#200 참조) 확장된 객체를 수정하기 위해 일부 역추적을 포함할 수 있습니다.

나는 이것에 대한 모든 것이지만 질문이 있습니다. 객체 리터럴에 정확히 하나의 속성이 있고 그 자체가 정확히 하나의 속성을 가진 객체 리터럴인 경우에는 어떻게 될까요? 이것은 여러 번 반복될 수 있습니다. 아래의 예에서는 실제로 코드가 한 줄로 형식화되는 것을 선호합니다. 다른 분들은 동의하지 않으시겠지만 저는 이 부분에서 중요하게 생각해야 할 부분이라고 생각합니다.

이것은 줄 길이로 인해 코드를 래핑해야 하는 극단적인 경우가 될 수 있지만 내 코드에는 다음과 같은 경우가 있습니다.

//I prefer this...
{ foo : { bar : { baz : 42 } } }

//... over this.
{
    foo : {
        bar : {
            baz : 42
        }
    }
}

@Ludd 나는 전적으로 동의하며 이것을 직접 제안하려고 했습니다. 깊이 옵션도 가능합니다. 어느 정도 깊은 수준 이후에는 읽기에 한계가 있습니다. 나는 당신이 가지고있는 것이 최대 기본값이 될 것이라고 말할 것입니다.

@mokkabonna 깊이 옵션에 대한 좋은 생각입니다. 이렇게 하면 이와 같은 코드의 형식을 지정하는 방법에 대한 모호성이 제거됩니다. 가능하다면...

깊이가 아닌 경우 길이로 제한할 수 있습니다. 80자 이후에 랩핑한다고 가정합니다. 깊이만큼 우아하지는 않지만 무엇이든 빠르게 할 수 있습니다.

+1

나는 길이라는 개념을 선호한다. 창 너비에 모두 들어갈 수 있으면 그대로 두십시오.

이에 대한 강력한 지원. v1.5.0에 추가되었습니다.

: 박수 :: 박수 :: 박수 :: 박수

이와 같은 한 줄 문장도 보존됩니까?

if(someCondition) { return something; }

그것은 사양/구현 결정과 같습니다. 가능한 것 같지만 함께 결합하는 것은 좋지 않을 수 있습니다.

동의. 어떻게 추적하고 싶은지 잘 모르겠지만 "짧은 표현/문을 한 줄로 유지"라는 또 다른 문제가 있습니까?

물론입니다. 이 문제와 관련이 있습니다.

완료. https://github.com/einars/js-beautify/issues/338

참고로 이것은 기본적으로 다른 버전 #114입니다. 가장 오래된 공개 문제 중 하나입니다.

이에 대한 업데이트가 있습니까? js-beautify는 이 나머지 문제를 제외하고는 최고의 포맷터 중 하나입니다.

이것이 내가 저장 시 js beautifier를 실행하지 않는 유일한 이유라고 생각합니다.

+1

1.5.0에서 하고 싶은 만큼 1.5.2로 올려야겠습니다.

1.5.0에는 이미 많은 변경 사항이 있으며, 이는 일부 반복 및 피드백을 통해 깔끔하게 착지해야 하는 중요한 기능입니다.

이것은 확실히 1.5.2의 가장 높은 우선 순위 개선 사항입니다.

:+1: 어제 1.5.1 이 출시되었습니다. 이게 들어갔어? 그렇다면 옵션은 무엇입니까?

위의 내 의견을 업데이트했습니다.

알았어 고마워. 다음 릴리스에서 찾아보겠습니다.

:+1:

+1

안녕하세요, 방금 jsbeautify에 대해 알게 되었고 Sublime Text 3로 설정했습니다. 정말 좋아요!! 그리고 나 역시 이것을 발견하고 웹을 검색하고 이 토론을 찾았습니다. 1.5.2에 나온다니 다행입니다.

1.5.2에 대한 마지막 댓글 이후 거의 5개월이 지났습니다... ETA는 무엇인가요? var obj = { one: property }가 한 줄에 머물기를 원합니다 :) :)

ETA는 누군가가 그것을 할 때입니다. 그것은 아마도 다음 달에 내가 될 것입니다.

엄청난!!! 알아두면 좋은

2014년 9월 17일 오후 11시 49분에 Liam Newman [email protected] 이 다음과 같이 썼습니다.

ETA는 누군가가 그것을 할 때입니다. 그것은 아마도 다음 달에 내가 될 것입니다.

—
이 이메일에 직접 회신하거나 GitHub에서 확인하세요.

이것을 v1.6.0으로 푸시해야 합니다.

나는 이 기능을 활성화하기 위해 상당한 작업(#530에 언급됨)을 수행했습니다. 그러나 이 릴리스에 포함시키는 것은 솔직히 여전히 큰 일입니다.

와...

ECMA 스크립트 사양의 일부를 읽고 github에서 버그를 엽니다.
거대해 보인다!

운 좋게도 내 사용 사례에서는 일반적으로 파일당 한 번만 JS를 아름답게 하면 됩니다.

두 번째 간단한 정규식 찾기 및 바꾸기 패턴을 만들었습니다.
내 파일을 저장할 때 실행하고 일반적으로 다시 beautify를 실행할 필요가 없습니다.
그 파일.

내가 하는 경우 어떤 이유로 수동으로 몇 초만 더
끊어진 한 줄 if 또는 객체 리터럴을 다시 한 줄로 복원합니다. (아니 난
정규식 찾기 + 대체가 없습니다. lol)

2014년 9월 28일 일요일에 Liam Newman [email protected] 은 다음과 같이 썼습니다.

이것을 v1.6.0으로 푸시해야 합니다.

나는 상당한 일을 했습니다(#530
https://github.com/beautify-web/js-beautify/pull/530) 활성화
이 기능. 하지만 솔직히 말해서 그것을 만드는 것은 여전히 ​​큰 사업입니다.
이 릴리스.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: 이 기능이 매우 기대됩니다 :)

+1 사용할 수 있기를 바랍니다!

+1 - 저장 시 어디에서나 아름답게 할 수 있도록 필요합니다.

+1

:+1:

+1 - 이 때문에 사전 저장과 함께 사용하지 않음

:+1:

또한 Escodegen은 이 작업을 올바르게 수행합니다. 코드가 영감의 원천이 될 수 있습니다.

var esprima = require("esprima"),
    esgen = require("escodegen").generate;

console.log(esgen(esprima.parse("var a = {code: 'code'}")));
console.log(esgen(esprima.parse("var a = {code: 'code', more: 'code'}")));

@bitwiseman
이 문제는 이 중첩에 해당하는 언어가 비정규적이기 때문에 임의의 양의 중첩(예: 실제로 많은 양의 중첩)에 대해 해결할 수 없지만 아마도 실용적인 목적을 위해 제한을 가정할 수 있습니다(예: 최대 레벨-10 중첩 또는 합리적인 중첩 제한을 결정하기 위해 파일 크기 사용)

이 요청에 대해 +1입니다.

예를 들어 이것을 나누기에는 너무 장황합니다.

view.on('post', {action: 'removeTask'}, function(next) {

여러 줄로.

+1

새로운 ETA가 있습니까?

:+1:

우리는 이것이 필요합니다!!

:+1:

:+1:

:+1:

+1

이 기능은 구현되지 않았지만 pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s }) 와 같은 내 실행 스크립트에서 정규식 을 사용합니다.
누군가에게 유용할 수 있습니다.

@aves84 실행 이 안되네요..근데 그냥 기다리지말고 소스코드좀 봐주시면 감사하겠습니다 :D

@schoening 아마도 내가 혼란스럽게 썼을 것입니다. 대신 "미화"가 아니라 라인을 추가해야합니다. 이제 이 특정 스크립트를 변경하려고 했습니다.

var pretty = beautify[fileType](code, config);
if (fileType == 'js') pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) {
            return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s
        });

그리고 제대로 작동합니다.

@aves84 , 아니, 이해했습니다. 이해가 되었습니다. 저는 Linux Mint를 사용 중이고 이 폴더를 탐색 중입니다/이 파일을 변경하고 있습니다:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

이 기능 변경:

function makePretty( code, config, outfile, callback ) {
  try {
    var fileType = getOutputType( outfile, config.type );
    var pretty = beautify[ fileType ]( code, config );
    if ( fileType == 'js' ) pretty = pretty.replace( /{([^{}]*?)}/g, function ( s, p ) {
      return ( s.length < 100 && !/;/.test( p ) ) ? s.replace( /\n\s*/g, ' ' ) : s
    } );

    callback( null, pretty, outfile, config );
  } catch ( ex ) {
    callback( ex );
  }

}

그런 다음 이와 같은 것을 시도하면 여전히 객체가 분할됩니다.

var foo = {
  bar: "Hello world!"
};

질문하신 모든 분들께 죄송합니다.

@schoening 확장 프로그램은 cli.js를 사용하지 않고 require('js-beautify') 자체 파일로 대체할 가능성이 큽니다. 대괄호에서 ~/.config/Brackets/extensions/user/hirse.beautify/main.js를 변경했습니다.
또는 예를 들어 https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 를 편집할 수 있습니다.

나는 sublime이 파이썬 버전을 사용한다고 생각합니다.

@mokkabonna- 따라 다릅니다. 일부 숭고한 플러그인은 node.js 호출을 래핑하고 다른 플러그인은 python을 직접 사용합니다.

:+1: 플러스원플러스원

+1. 현재로서는 그러한 옵션이 있습니까?

:+1: 기대하고 있습니다. 감사합니다.

:+1:

@FrankFang 아직 상륙하지 않은 1.6.0으로 다시 푸시되었습니다.
@aves84 귀하의 트릭은 때때로 기능/for-of-loops/if 문이 중단/축소됩니다.

for (var data of columnData) { ctx.drawImage(data.img, data.options.x, data.options.y) }

img.onerror = function() { reject() }

if (index >= rows.length) { return }

@dani-h 글쎄, 이 방법은 이상적이지 않고 짧은 개체와 코드 블록의 정의에서 세미콜론에 의존합니다. 세미콜론이 없고 문자 수가 100개 미만이면 줄 바꿈이 제거됩니다. 자바스크립트의 자동 세미콜론 삽입을 사용하는 코드에서도 오류가 발생합니다.

:+1:

:+1: 기대됩니다.

+1 ... 나는 이것이 곧 적용되는 것을 보고 싶습니다.

현재 이 플러그인을 사용할 수 없는 유일한 이유입니다.

+1

+1

이것에 +1, 내가 이것을 사용하지 못하도록 차단합니다. 이것을 비활성화하는 옵션도 도움이 될 것입니다!

+1 +1 +1

+1

+1 및 이에 대한 모든 노력에 감사드립니다!

+1 바로 지금, 아름답게 하는 것은 이 문제로 인해 말 그대로 내 코드를 끔찍한 추악한 혼란으로 두 배로 만듭니다. 어떤 상황에서는 상당히 치명적인 버그입니다. 특히 js-beautify를 psedo-linter로 사용하기 때문에(들여쓰기가 올바르지 않으면 대괄호를 어딘가에 놓쳤습니다.) 내 근육 기억은 내 아름다운 단위 테스트를 모든 개체 리터럴을 수정하는 10분 작업으로 바꿉니다.

js-beautify -pX <filename> | perl -0777 -i -pe 's/\{\s*([^{}]{30,180}?)\s*\}/\{ $1 \}/mg'

이 코드 줄은 포함된 블록 없이 30~180자 길이로 펼쳐진 항목을 접습니다. 아마도 어떤 사람들에게는 유용할 수 있습니다.

+1 및 이에 대한 모든 노력에 감사드립니다!

+1. 한 줄 대신 세 줄은 너무 많습니다.

이것이 가능하기를 바랍니다. :+1:

나를 불쾌하게 만드는 것은 js-beautify의 유일한 동작입니다. :땀_미소:

@vekat - 보시다시피 혼자가 아닙니다. :웃다:

@nels-o - 완전히 다른 것입니다. 죄송합니다. {{ 및 }} $와 같은 템플릿 중괄호는 자바스크립트 중괄호와 완전히 다르게 구문 분석됩니다. 게다가 객체를 인라인할 때 { a: { b: {} } } } 처럼 보일 것입니다.

({{}} 및 {{!}}와 같은 WRT 템플릿 비트) 맞습니까? 스크립트 태그에 있으면 형식이 지정된 것 같습니다. 예를 들어 다음과 같습니다.

prettifier를 실행하면 이것이 됩니다.

아 :) 감사 합니다 @bitwiseman

아마도 내가 말했어야 하는 것은 _만약_ 그것들이 처리된다면 그것들은 완전히 별도로 _처리될_ 것입니다. :스마일: 그래도 미안합니다.

+1. ETA에 대한 아이디어가 있습니까? 이것은 나를 매우 슬프게 만들고 있습니다 :(

+1. 그 기능도 좋아요! 불행히도 실제로 어떻게 든 도울 시간이 없습니다 :(

+1, 우리 모두는 여전히 참을성 있게 기다리고 있습니다. 이것은 멋진 추가가 될 것입니다

내가 만든 변경 사항은 "짧은" 개체를 실제로 이해하지 못합니다. 입력이 제공하는 개체 중 줄 바꿈이 없는 개체를 보존하려고 할 뿐입니다. 줄 바꿈이 발생하면 개체가 "축소" 형식으로 바뀝니다. 따라서 이것은 여전히 ​​불완전한 솔루션이지만 개선 사항입니다.

이것이 내가 이해한 대로 작동한다면 이미 현재 상황에 대한 엄청난 개선이라고 생각합니다. 대부분의 경우 이것으로 충분합니다.

+1

+1 이것이 곧 완료되기를 바랍니다.

@NerdPad - 완료되었습니다.

브래킷과 함께 사용할 수 있습니까? 오_오

@C-Weinstein-입력 및 원하는 출력의 예와 함께 새로운 문제를 열 ​​수 있습니까?

작동하는 방법을 찾고 있는 나와 같은 사람들을 위해: 작동 하며 .jsbeautifyrc의 옵션으로 활성화할 수 있습니다.

   "brace_style": "collapse-preserve-inline"

불행히도, 그것은 작동하지 않았습니다 :( 하지만 시도해 주셔서 감사합니다.

@Ceyaje - 어떻게 작동하지 않았나요? 어디에서 작동하지 않았습니까? 입력과 출력은 무엇이었습니까?

이전 입력

var q = { x: "a", b: "c" }

그것은 "아름답게"

var q = {
    x: "a",
    b: "c"
}

@Ceyaje "brace-style" 옵션을 "collapse-preserve-inline"으로 설정해야 합니다.

@aves84 - 감사합니다! #995에서 계속 논의 중입니다.

@aves84 그랬어요. 계속 발생한다고 해서 #995를 열었는데 대괄호를 사용하고 있는데 다른 코드인지 몰랐습니다.

@Kutsan - 새호를 열어주세요.

atom에서 html 파일로 expand-preserve-inline 옵션을 찾을 수 없습니다. html 파일과 js 파일 모두에 자바 스크립트를 작성합니다.

사용하려는 설정(접기, 확장 등) 뒤에 "preserve-inline"을 배치합니다.

"brace_style": "접기, 인라인 보존"

https://i.gyazo.com/2831254cc47d08c879c7d36a7f1a30d0.png

위와 같은 일이 발생하지만 내 중괄호 스타일은 축소 보존 인라인입니다. 나는 전체 스레드를 읽었습니다. 나는 내가 잘못하고 있다고 생각하지 않습니다. 만일의 경우를 대비하여 Atom을 이미 다시 시작했습니다.

이에 대한 업데이트가 있습니까? Collapse-preserve-inline은 여전히 ​​화살표 기능을 여러 줄로 확장합니다.

@grandslammer - "화살표"라는 단어가 포함된 미해결 문제를 살펴보세요. 당신이 말하는 것을 다루는 이슈가 보이지 않는다면, 새로운 이슈를 열어주세요.

죄송합니다: 원래 주제는 "한 줄 #315에서 "짧은 개체"를 보존하거나 인라인하는 옵션입니까?
이 토론은 여러 가지 방법으로 표류했습니다. 누가 요청한 형식을 달성하기 위해 최신 버전의 js-beautify에 대한 올바른 설정을 가리킬 수 있습니까? 감사합니다

@ainthek "brace_style": "collapse,preserve-inline" 입니다.

이 문제를 해결하기 위해 vs code 최신 버전의 설정은 어떻습니까?

대 코드 1.20.1에서 "brace_style": "expand,preserve-inline" 스타일을 사용할 수 없습니다.

입력:

상수
 {
 대화
 } = 요구("전자").원격;

출력(이 영역을 선택하고 F1 ---> Beautify Selection을 클릭한 후) : NO CHANGE :(

예상 출력: const {dialog} = require("electron").remote;

PS ----> 전체 파일을 아름답게 처리한 후 왜곡된 입력을 얻었습니다. 아무도 그런 왜곡된 방식으로 코드를 작성하지 않습니다 :P

vscode의 경우 사용자 설정에 아래를 추가하면 저에게 효과적이었습니다.
"beautify.config": { "brace_style": "접기, 인라인 보존" }

지원해 주셔서 감사합니다.

@sulkhanp - 동작을 설명하는 문제를 제출하세요.

@vipingoel 의 솔루션이 작동합니다!
이 옵션이 내 .jsbeautifyrc 파일이 아닌 vscode 사용자 기본 설정에서만 작동하는 이유는 무엇입니까?

"brace_style": "확장, 인라인 보존"이 작동하지 않습니다.

행동을 기대하십시오:

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

현재 행동:

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

@SiJinmin 이것들은 짧은 개체가 아니므로 이 문제와 관련이 없습니다.

@vipingoel 작동합니다. 나는 정말 행복하다. 감사 해요!!!