+1, 나와 내 팀은 동일한 기능이 필요하며 여기에서 요청한 것과 동일한 기능인 것 같습니다. https://github.com/beautify-web/js-beautify/issues/1262
VSCode github에서 요청한 이 정확한 기능도 보았습니다: https://github.com/Microsoft/vscode/issues/2204 (마지막 코멘트)

나는 소스 코드를 약간 가지고 놀았고 작동하는 것처럼 보이는 몇 가지 구현이 있습니다: "wrap_attributes" - "aligned"에 대한 새로운 옵션은 줄 길이에 도달하지 않는 한 속성을 강제로 래핑하지 않고 다음과 같이 적절하게 정렬합니다. 줄이 감겨있습니다.

@bitwiseman, 이와 같은 것이 작동할 수 있습니까?

그렇다면 세부 사항을 논의하거나 PR을 열 수 있습니다. (그러나 솔직히 말해서, 나는 정확히 오픈 소스 전문가가 아니며 테스트와 파이썬 버전 등에 대해 약간 혼란스러워합니다.) 글쎄, html beautifier는 파이썬에 존재하지 않으므로 아마도 문제가되지 않을 것입니다 :) 지침을 주셔서 감사합니다!

@cheerypick
이를 구현해 주셔서 감사합니다.

예, HTML 미화 변경에 대한 Python 버전에 대해 걱정할 필요가 없습니다. 해당 모듈에 대한 Python 구현은 아직 없습니다.

테스트를 위해 빌드를 실행할 수 있고 로컬에서 작동하는지 확인하십시오. 그런 다음 test/data/html/tests.js를 업데이트하십시오. 빌드를 다시 실행하면 해당 데이터 파일에서 실행 가능한 테스트가 다시 생성됩니다. #1158 에서 이에 대한 예를 볼 수 있습니다. 몇 가지 간단한 테스트를 먼저 시도하고 싶다면 괜찮습니다. matrix 테스트 생성이 작동하는 방식을 이해할 수 있다면 test/data/html/tests.js#L323 의 속성 랩 테스트에 새 값을 추가하십시오.

어떤 경우이든 언제든지 자유롭게 PR을 시작하면 그곳에서 논의할 수 있습니다.

다시 한번 감사합니다.

(당신이 필요하다고 생각하는 추가 지침으로 CONTRIBUTING.md를 업데이트할 의향이 있다면 그것도 감사할 것이지만 필수는 아닙니다.)

@cheerypick - 또한 중복을 지적해 주셔서 감사합니다. #1262에서 이 토론을 계속하십시오.

이에 대한 참고 사항: 저는 실제로 이 두 설정의 조합을 찾고 있었지만 이제 제안된 예와 같습니다. 내가 필요한 것은 VSCode가 속성을 그대로 두고 요소가 120보다 길어지면 속성을 새 줄에 정렬한다는 것이므로 내가 원하는 것은 다음과 같습니다.

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

에게:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

두 번째 입력은 120자보다 길지 않고 이미 정렬되어 있기 때문에 속성을 그대로 두어야 합니다.

따라서 내가 보고 싶은 것은 힘 대신 여러 줄로 정렬되어 있는지 확인하고 줄이 120자를 넘을 때 여러 줄로 지정하는 것입니다.

Visual Studio(Code 아님)는 기본적으로 이러한 방식으로 HTML 형식을 지정합니다(정렬되지만 강제되지는 않음). 코드도 할 수 있다면 좋을 것입니다.

내 html 템플릿 코드가 너무 길어지지 않도록 기능을 추가하십시오.

이것은 매우 바람직합니다. @cheerypick 아직 홍보할 생각이신가요?

VSCode에서 작동하지 않습니다.
.vue 파일에서
확장: 더 예뻐요, Vetur
:-(

@christoferd
무슨 말인지 모르겠으면 비공개 이슈에 댓글을 달지 말고 gitter 채널에서 채팅하세요.

VScode를 최신 버전으로 업데이트한 후 이 문제를 다시 보았습니다. Mac OS High Sierra의 버전 1.30.2. 자동으로 설정되었고 갑자기 내 코드가 래핑을 시작합니다. 강제로 정렬을 시도했지만 작동하지 않습니다.

@aybhalala @christoferd 당신이 보고 있는 것에 대해 구체적으로 말씀해 주십시오. gitter에서 채팅하거나 새 문제를 엽니다.

@bitwiseman 죄송합니다. Prettier 플러그인에 문제가 있다는 것을 방금 알아냈습니다. 응답해 주셔서 감사합니다.