Vue 포매터
이 Vue 포매터로 Vue 단일 파일 컴포넌트를 정리하세요. 컴포넌트를 붙여넣으면 script 블록은 JavaScript 형식으로, lang이 ts일 때는 TypeScript 형식으로 정리하고, style 블록은 lang 속성에 따라 CSS, SCSS 또는 Less 형식으로 정리하며 두 블록 모두 해당 태그 아래에 들여씁니다. template 블록은 공백을 하나로 줄여 한 줄로 유지합니다. Vue 개발자가 검토와 문서화를 위해 컴포넌트를 다듬을 때 유용합니다.
자주 묻는 질문
Vue 포매터는 컴포넌트에서 무엇을 변경하나요?
script 및 style 블록의 내용을 정리하고 최상위 블록을 각각 별도의 줄에 배치합니다. 각 블록 안의 코드는 여는 태그 아래에 공백 두 칸으로 들여씁니다.
template 블록은 어떻게 처리하나요?
template 블록은 공백이 연속된 부분을 하나의 공백으로 줄여 한 줄로 유지합니다. v-if, v-for, :prop, @event 및 머스태시 표현식과 같은 디렉티브는 작성된 그대로 복사됩니다.
script 블록은 어떻게 형식을 지정하나요?
일반 script 블록은 파싱된 후 공백 두 칸 들여쓰기와 세미콜론을 적용해 JavaScript 형식으로 출력됩니다. lang="ts"이면 타입 주석도 지원하는 TypeScript 형식으로 정리됩니다.
style 블록은 어떻게 형식을 지정하나요?
기본적으로 style 블록은 CSS 형식으로 정리되며, 선언마다 한 줄씩 사용합니다. lang="scss" 또는 lang="less"이면 SCSS 또는 Less 규칙을 적용하고 scoped 속성은 유지합니다.
script에 구문 오류가 있으면 어떻게 되나요?
JavaScript 및 CSS 블록은 파싱되므로 구문 오류가 있으면 도구가 중단되고 오류 메시지가 표시됩니다. 보고된 문제를 수정한 뒤 다시 형식을 지정하세요.
script setup을 지원하나요?
예. setup 속성은 태그에 유지되고 내용은 다른 script 블록과 같은 방식으로 정리됩니다. defineProps와 같은 컴파일러 매크로는 포매터에서 일반 함수 호출로 처리됩니다.
들여쓰기를 바꿀 수 있나요?
아니요. 포매터는 항상 공백 두 칸을 사용하며 옵션은 없습니다. 같은 컴포넌트는 언제나 같은 결과를 생성합니다.
주석이 보존되나요?
예. HTML 블록 사이의 주석과 script 및 style 블록 안의 주석은 유지됩니다. template 안의 주석도 한 줄에서 원래 위치에 유지됩니다.
결과가 html 코드 펜스로 감싸지는 이유는 무엇인가요?
단일 파일 컴포넌트는 HTML로 읽히므로 결과는 html 표시가 있는 Markdown 코드 블록으로 반환됩니다. 펜스 사이의 줄을 복사해 .vue 파일에 붙여넣으세요.
컴포넌트 크기는 어느 정도까지 가능한가요?
실행당 최대 5 MB까지 가능합니다. 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 Vue 옵션과 동일합니다.