# 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 옵션과 동일합니다.

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=OneClick%20Pro%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=oneclickpro)