Angular 포매터
이 Angular 포매터로 Angular 컴포넌트 템플릿의 형식을 지정하세요. 구조적 지시문, 바인딩, 보간이 포함된 템플릿 HTML를 붙여넣으면 도구가 div, section, p, ul, table 같은 블록 요소를 두 칸 들여쓰기해 각각 별도의 줄에 배치하고, 불필요한 공백을 정리하며, 인라인 script 및 style 블록의 형식을 지정합니다. 지시문, 바인딩, 표현식은 작성된 그대로 유지되므로 Angular 개발자는 깔끔한 템플릿을 빠르게 얻을 수 있습니다.
자주 묻는 질문
Angular 포매터로 무엇을 형식 지정할 수 있나요?
Angular 컴포넌트 템플릿, 즉 .component.html 파일이나 템플릿 문자열에서 작성하는 HTML의 형식을 지정합니다. TypeScript 컴포넌트 클래스는 여기서 처리하지 않습니다. 해당 클래스에는 TypeScript 포매터를 사용하세요.
지시문과 바인딩은 유지되나요?
네. *ngIf, *ngFor, [value], (click), [(ngModel)] 같은 속성과 {{ user.name }} 같은 보간은 작성된 그대로 복사됩니다. 요소 사이의 공백만 변경됩니다.
어떤 요소가 별도의 줄에 배치되나요?
요소에 div, section, article, header, footer, nav, main, form, p, h1부터 h6, ul, ol 또는 table 같은 블록 수준 자식 요소가 있으면 각 자식 요소가 들여쓰기된 별도의 줄에 배치됩니다. 이러한 자식 요소가 없는 요소는 공백이 연속된 부분을 한 칸으로 줄여 한 줄에 유지됩니다.
사용자 지정 컴포넌트가 한 줄에 그대로 있는 이유는 무엇인가요?
app-root나 mat-card 같은 사용자 지정 요소는 블록 수준 HTML 요소가 아니므로, 콘텐츠에 div나 p 같은 블록 요소가 포함되지 않으면 인라인으로 유지됩니다. 내용을 여러 줄로 펼치려면 블록 요소로 감싸세요.
목록 항목은 각각 별도의 줄에 배치되나요?
항목만으로는 그렇지 않습니다. li는 블록 수준 태그에 포함되지 않으므로 자식 요소가 li뿐인 ul은 한 줄에 유지됩니다. 항목 안에 div 같은 블록 콘텐츠를 넣으면 여러 줄로 펼쳐집니다.
script 및 style 태그는 어떻게 처리되나요?
인라인 style 블록은 CSS으로, 인라인 script는 JavaScript로 형식을 지정해 태그 아래에 들여씁니다. pre 및 textarea 요소의 콘텐츠는 작성된 그대로 유지됩니다.
HTML 주석은 유지되나요?
네. HTML 주석을 유지하고 여러 줄로 펼쳐진 요소 안에서 각 주석을 별도의 줄에 배치합니다. 주석 내용은 그대로 복사되므로 주석 처리된 마크업도 원래 상태로 유지됩니다.
템플릿의 유효성을 검사하나요?
아니요. 템플릿을 컴파일하거나 검사하지 않으며, 닫히지 않은 태그도 가능한 범위에서 형식을 지정합니다. 템플릿 오류를 찾으려면 ng build 또는 편집기의 Angular 언어 서비스를 사용하세요.
출력이 html 펜스로 감싸져 있는 이유는 무엇인가요?
Angular 템플릿은 HTML이므로 결과는 html이 표시된 Markdown 코드 블록으로 반환됩니다. 템플릿 파일에 사용할 코드는 펜스 사이의 줄을 복사하세요.
템플릿 크기는 얼마나 커도 되나요?
한 번 실행할 때 최대 5 MB까지 처리할 수 있으며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 Angular 옵션과 동일합니다.