Js-beautify: HTML: 속성의 수동 래핑을 유지하는 옵션 추가

이것은 좋은 생각입니다. 어떤 옵션도 수동으로 래핑을 허용하지 않습니다.

수행 할 옵션을 가지고 좋은 것 force|force-aligned|force-expand-multiline 랩 라인 길이 (기본 120) 등의 히트 된 경우에만 auto 만 많은 속성으로 랩이 필요로합니다. auto-expand-multiline|auto-aligned 옵션과 같은 것입니까?

@로불라
두 번째 단락에 있는 내용에 대해 새 문제를 여십시오.

@Montago , @Andikki - 설명하는 것은 unchanged 또는 preserve 와 같은 이름의 옵션입니다. 맞습니까?

@bitwiseman 아니요, "강제 정렬"과 같은 또 다른 옵션이지만 대신 "자동 정렬"

해야 할 일은 단순히 수동으로 래핑된 모든 속성을 정렬하는 것입니다.
다른 모든 요소/속성은 그대로 유지됩니다.

@Montago - 아, 그래서 더 align-only .

네 이해가 됩니다 :)

이것을 위해 부딪쳐라!

새 줄에 일부 속성을 수동으로 포함하고 같은 줄에 일부 속성을 갖는 것이 좋습니다. 그런 다음 내가 원하는 것을 결정할 수 있고 나머지는 모두 자동으로 포맷됩니다. 감사 해요

@bitwiseman 정렬이 필요하다고 생각하지 않지만, 만약 그렇다면 두 가지 옵션이 있어야 합니다. 하나는 일반적인 indent_size를 적용하고 다른 하나는 정렬하는 것입니다. 이 모든 것은 초기 줄 바꿈을 유지하면서입니다.

예시
원천:

<input type="text"     class="form-control"  autocomplete="off" 
      [(ngModel)]="myValue"          [disabled]="isDisabled" [placeholder]="placeholder" 
  [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate"   [typeaheadWaitMs]="300"
                        (typeaheadOnSelect)="onSuggestionSelected($event)" />

들여쓰기만 강제하기:

<input type="text" class="form-control" autocomplete="off" 
  [(ngModel)]="myValue" [disabled]="isDisabled" [placeholder]="placeholder" 
  [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate" [typeaheadWaitMs]="300"
  (typeaheadOnSelect)="onSuggestionSelected($event)" />

강제 정렬만:

<input type="text" class="form-control" autocomplete="off" 
       [(ngModel)]="myValue" [disabled]="isDisabled" [placeholder]="placeholder" 
       [typeahead]="suggestionsSource" [typeaheadOptionField]="suggestionValueField" [typeaheadItemTemplate]="suggestionTemplate" [typeaheadWaitMs]="300"
       (typeaheadOnSelect)="onSuggestionSelected($event)" />

이것이 이것을 요청하는 것이 올바른 문제인지 확실하지 않지만 auto-align 옵션이 auto 처럼 작동해야 한다고 생각합니다. 특정 열 컷오프 이후에 줄 바꿈하고 줄이 줄 바꿈되면 태그를 force-align 처럼 취급합니다.

예시
줄 길이가 wrapLineLength보다 클 때 강제 정렬:

<div [isWrapped]="false" [attributesAligned]="false"></div>

<really-long-angular-component-that-would-force-wrapping class="wrapped"
                                                         [isWrapped]="true"
                                                         [attributesAligned]="true">

사람들이 이 기능이 구현되기를 고대하는 5~6개의 주제를 거의 검색했습니다. 그렇지 않기 때문에 if wrap requries 및 이 해당 행에 대한 강제 정렬 대

😞

@kaankucukx 무슨 말인지 잘 모르겠나요? 이전 예제에서 다루었습니까?

이에 대해 +1, 현재 핸들바에 대해 force 로 최상의 결과를 얻었지만 여전히 핸들바 블록 내에서 원치 않는 래핑이 발생합니다.

   </label>
     {{#artdeco-hoverable-trigger placement="right"
      as
      |card|}}

그리고

  <ul class="text-ad-edit-panel__dropdown-list">
    {{#each yourCompanyPageTypes
      as
      |companyPageType
      index|}}

수동으로 줄 바꿈된 속성의 줄 바꿈을 유지하기만 하면 되지만 올바른 들여쓰기가 필요합니다.

FWIW 이것은 Intellij를 제외하고 내가 찾은 어떤 편집기에서도 작동하지 않습니다. 이것이 구현되는 것을 보고 싶습니다!

FWIW 이것은 Intellij를 제외하고 내가 찾은 어떤 편집기에서도 작동하지 않습니다. 이것이 구현되는 것을 보고 싶습니다!

Netbeans에서도 작동합니다.

FWIW는 VSCode에서 이것을 작동시킬 수 없습니다
Vue 위트 개발
확장: 더 예뻐요, Vetur
서식을 지정하면 모든 html 태그와 속성이 한 줄로 계속 되돌려집니다. 나는 제안 된 솔루션을 많이 밟았습니다.
사람들이 VSCode의 .vue 파일 내에서 이것이 작동하는지 알고 있으면 좋을 것입니다.

@christoferd 이것이 바로 이 문제에 대한 것입니다. 작동하지 않습니다. js-beautify는 줄 바꿈을 유지할 수 없습니다. 항상 한 줄로 설정됩니다.

WebStorm에는 자체 포맷터가 있고 줄 바꿈과 함께 작동하기 때문에 계속해서 WebStorm을 사용합니다.

관련 #1404

@MacKLess 수정 작업에 감사드립니다! 신간 출시를 애타게 기다리고 있는데 사용해 볼 수 있어요 😃