Prettier Config

Prettier Config

소개

Prettier Config 소개

개발자가 번거로움 없이 Prettier를 구성할 수 있도록 만들어진 무료 오픈소스 도구.

이 도구는 무엇인가요?

Prettier Config Generator는 Prettier 구성을 손쉽게 만들어주는 인터랙티브 웹 애플리케이션입니다. JSON을 수동으로 작성하고 모든 옵션을 문서에서 찾아보는 대신, 모든 Prettier 설정을 시각적으로 켜고 조정하고, 16가지 언어로 실제 코드를 구성에 맞춰 포맷하고, 결과를 단일 링크로 공유할 수 있습니다. 도구 설정이 아닌 코드 작성에 시간을 쓰고 싶은 개발자를 위해 만들어졌습니다.

기능

기존 구성 가져오기

기존 .prettierrc, prettier.config.js, 또는 package.json의 prettier 키를 붙여넣으면 폼이 일치하도록 자동 입력됩니다. 조정, 공유, 또는 복사하여 내보낼 때 모든 키가 보존됩니다.

모든 Prettier 버전

Prettier 3.x 릴리스를 모두 선택할 수 있습니다(3.0 – 3.6 및 latest). 해당 버전의 정확한 옵션이 jsDelivr에서 필요할 때 로드됩니다.

모든 언어, 두 tab 모두

Preview에는 parser별로 전용 설계된 샘플이 제공되어(TypeScript / JS, CSS, HTML, JSON / JSON5 / JSONC, Markdown, YAML, Vue, GraphQL 등) 모든 Prettier 옵션이 효과를 보여줄 자리를 갖습니다. Your Code는 붙여넣은 내용에서 parser를 자동 감지하며, 수동 재정의도 가능합니다.

실제 코드 에디터

CodeMirror 6가 입력 패널을 구동하며 구문 강조, 줄 번호, 탭 들여쓰기, 라이트/다크 모드와 연동되는 테마를 제공합니다.

공유 가능한 구성

공유를 클릭하면 버전, 옵션, 코드, 파서가 URL 해시에 묶입니다. 어디로든 전송할 수 있으며 모든 것은 브라우저에 남습니다.

GitHub 스타일 Diff

Prettier가 무엇을 변경했는지 통합 또는 분할 diff로 정확히 확인할 수 있으며, pull request처럼 +X / −Y 요약 헤더도 함께 표시됩니다.

AI 토큰 카운터

GPT-4o, GPT-4, GPT-3.5, Claude, Gemini, Llama 3, Mistral에 대해 입력과 출력의 토큰 수를 실시간으로 표시 — AI 파이프라인 비용 추정에 유용합니다.

파싱 오류 노출

Prettier가 입력을 거부할 때 정확한 SyntaxError와 그 줄:열이 조용히 무시되지 않고 diff 위에 표시됩니다.

선택의 지속성

Prettier 버전과 옵션 선택이 localStorage에 저장되므로 새로고침해도 — 내일 다시 와도 — 모든 것이 그대로 유지됩니다.

20개 언어

영어, 태국어, 중국어, 스페인어, 힌디어, 독일어, 프랑스어, 포르투갈어, 일본어, 한국어, 러시아어, 베트남어, 인도네시아어, 이탈리아어, 폴란드어, 터키어, 우크라이나어, 벵골어와 함께 아랍어 및 페르시아어(RTL)로 완전 현지화.

사용 기술

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uinext-intlCodeMirror 6prettier/standalone (CDN)lz-string

오픈소스

이 도구는 완전히 무료이며 오픈소스입니다. 기여, 버그 보고, 제안을 언제나 환영합니다.

GitHub에서 보기

제작자

제작

NooobtimeX

개발자 커뮤니티를 위해 정성껏 만들었습니다. 이 도구가 유용하다면 GitHub 저장소에 스타를 주세요.