Question 1

Prettier Config Generator란 무엇인가요?

Accepted Answer

모든 Prettier 옵션을 시각적으로 구성하고 생성된 .prettierrc 파일을 즉시 복사할 수 있는 무료 인터랙티브 웹 도구입니다.

Question 2

Prettier란 무엇이고 왜 사용해야 하나요?

Accepted Answer

Prettier는 코드베이스 전체에 일관된 스타일을 적용하는 코드 포매터로, 코드 리뷰에서 스타일 논쟁을 없애줍니다.

Question 3

.prettierrc 파일이란 무엇인가요?

Accepted Answer

프로젝트 루트에 배치하는 구성 파일로, Prettier에 코드 형식 지정 방법을 알려줍니다.

Question 4

이 도구를 사용해 구성을 생성하는 방법은?

Accepted Answer

메인 페이지에서 Prettier 옵션을 선택하면 사이드바에서 실시간으로 구성이 업데이트됩니다. "구성 복사"를 클릭하고 .prettierrc 파일에 붙여넣기 하세요.

Question 5

Prettier Config Generator는 무료인가요?

Accepted Answer

예, 완전히 무료입니다. 회원가입, 계정 불필요, 사용 제한 없음.

Question 6

이 도구는 모든 Prettier 옵션을 다루나요?

Accepted Answer

예. 공식 지원되는 모든 Prettier 옵션이 설명 및 기본값과 함께 포함되어 있습니다.

Question 7

생성된 구성을 복사하고 사용하는 방법은?

Accepted Answer

데스크톱에서는 사이드바의 "구성 복사" 버튼을, 모바일에서는 플로팅 버튼을 클릭하세요.

Question 8

.prettierrc, prettier.config.js, package.json의 prettier 키 차이는?

Accepted Answer

세 가지 모두 유효한 방법입니다. .prettierrc는 JSON/YAML 지원, prettier.config.js는 JavaScript 모듈, package.json의 prettier 키는 모든 것을 한 파일에.

Question 9

Prettier가 TypeScript, React, Vue와 함께 작동하나요?

Accepted Answer

예. TypeScript, JSX/TSX, Vue 단일 파일 컴포넌트 등을 기본 지원합니다.

Question 10

VS Code에 Prettier를 통합하는 방법은?

Accepted Answer

VS Code 마켓플레이스에서 "Prettier - Code formatter" 확장 설치 후 formatOnSave: true 설정.

Question 11

전체 프로젝트에 Prettier를 실행하는 방법은?

Accepted Answer

프로젝트 루트에서 npx prettier --write . 실행.

Question 12

Prettier가 지원하는 언어와 파일 형식은?

Accepted Answer

JavaScript, TypeScript, JSX, CSS, HTML, Vue, JSON, YAML, Markdown 등.

Question 13

Prettier 형식 지정에서 파일을 제외하는 방법은?

Accepted Answer

프로젝트 루트에 .prettierignore 파일 생성.

Question 14

Prettier와 ESLint를 함께 사용할 수 있나요?

Accepted Answer

예, eslint-config-prettier 설치.

Question 15

printWidth 옵션은 무엇을 하나요?

Accepted Answer

코드가 들어가야 하는 목표 줄 길이. 기본값 80.

Question 16

singleQuote와 jsxSingleQuote의 차이는?

Accepted Answer

singleQuote는 JS/TS 문자열 따옴표, jsxSingleQuote는 JSX 속성 제어.

Question 17

이 사이트의 검색 기능 사용 방법은?

Accepted Answer

페이지 상단의 검색창 사용.

Question 18

이 사이트는 다크 모드를 지원하나요?

Accepted Answer

예, 헤더의 테마 전환 버튼 클릭.

Question 19

Prettier 기본 구성은 무엇인가요?

Accepted Answer

printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Question 20

버그 보고나 프로젝트 기여 방법은?

Accepted Answer

GitHub 저장소에서 이슈 또는 풀 리퀘스트 열기.

Question 21

이 도구는 어떤 Prettier 버전을 지원하나요?

Accepted Answer

버전 드롭다운에서 Prettier 3.x 릴리스를 모두 선택할 수 있습니다 — 3.0부터 3.6까지와 "latest"입니다. 선택한 버전의 번들은 jsDelivr에서 필요할 때 로드되므로 옵션 목록은 항상 해당 릴리스의 실제 스키마와 일치합니다.

Question 22

Your Code 탭에서는 어떤 언어를 포맷할 수 있나요?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular 템플릿, JSON, JSON5, 주석이 있는 JSON, Markdown, MDX, YAML, GraphQL입니다. 파서는 입력으로부터 자동 감지되지만 드롭다운으로 재정의할 수 있습니다.

Question 23

공유 가능한 URL은 어떻게 작동하나요?

Accepted Answer

공유 버튼을 클릭하면 현재 Prettier 버전, 선택한 옵션, 코드, 파서 재정의가 LZ로 압축되어 URL 해시에 들어가고 클립보드에 복사됩니다. 그 링크를 열면 정확히 같은 설정이 복원됩니다. 어떤 것도 서버로 전송되지 않으며 모두 브라우저 내에서 처리됩니다.

Question 24

diff 옆의 토큰 수는 무엇을 의미하나요?

Accepted Answer

선택한 모델에서 입력과 출력이 얼마나 많은 AI 토큰을 소비하는지를 보여줍니다. GPT-4o / GPT-4 / GPT-3.5는 공식 BPE tokenizer를 사용해 정확하게 계산하고, Claude, Gemini, Llama, Mistral은 문자 기반의 근사값을 사용하며 "~" 접두사가 붙습니다.

Question 25

페이지 새로고침 후에도 작업이 유지되나요?

Accepted Answer

예. Prettier 버전, 옵션 선택, 분할 보기 / tokenizer 환경설정이 localStorage에 저장되어 새로고침해도 모두 복원됩니다. 페이지를 열 때 공유 가능한 URL 해시가 있으면 해당 해시가 우선합니다.

Question 26

포맷 오류 바가 가끔 나타나는 이유는 무엇인가요?

Accepted Answer

Prettier의 파서가 입력을 파싱할 수 없을 때 — 보통 선택한 파서가 코드와 일치하지 않을 때(예: CSS를 선택했는데 JSX를 붙여넣음) — 오류 메시지가 diff 위 빨간 바에 표시됩니다. 파서를 코드에 맞게 전환하면 오류가 사라집니다.

Question 27

JavaScript 이외의 언어에 대해서도 설정을 미리볼 수 있나요?

Accepted Answer

예. Preview tab에는 diff 토글 옆에 자체 parser dropdown이 있고, 각 parser에는 전용 설계된 샘플이 함께 제공됩니다 — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, 그리고 TypeScript / JS. parser를 전환하면 해당 샘플이 현재 옵션으로 다시 포맷되므로 proseWrap, htmlWhitespaceSensitivity, vueIndentScriptAndStyle 같은 언어별 옵션도 효과를 보여줄 자리가 생깁니다. 선택은 새로고침 후에도 유지됩니다.

자주 묻는 질문