Prettier`

Supaplate는 Prettier를 사용하여 코드를 포맷(format)합니다.

이 섹션에서는 사용된 플러그인과 설정에 대해 알아봅니다.

설정

.prettierrc 파일은 프로젝트 루트 디렉토리(Root Directory)에 위치하며, 다음과 같은 설정을 포함합니다:

{
"importOrder":[
"^.+\\.(css|scss|sass|less|styl|svg|png|jpg|jpeg|gif|webp)$",
"<THIRD_PARTY_TS_TYPES>",
"<TS_TYPES>^[./]",
"<THIRD_PARTY_MODULES>",
"^~/lib/(.*)$",
"^~/components/ui/(.*)$",
"^~/(.*)$",
"^[./]"
],
"plugins":[
"@trivago/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
],
"importOrderSeparation":true,
"importOrderSortSpecifiers":true
}

플러그인

프로젝트에서 사용되는 플러그인은 다음과 같습니다:

• @trivago/prettier-plugin-sort-imports
• prettier-plugin-tailwindcss

Import order 플러그인

Import order 플러그인은 코드에서 import를 정렬하는 데 사용됩니다.

정렬 순서는 다음과 같습니다:

• Static files
• Third party types
• Local types
• Third party modules
• Local lib files
• Shadcn/UI components
• Local app files

import가 다음과 같이 정리됩니다:

import './app.css'

import type { Route } from './+types/root'

import { useEffect } from 'react'
import { Links } from 'react-router'
import { Toaster } from 'sonner'

import { Dialog } from './core/components/ui/dialog'
import { Sheet } from './core/components/ui/sheet'

import { cn } from './core/lib/utils'
import NotFound from './core/screens/404'

Tailwind 플러그인

Tailwind 플러그인은 권장하는 접근 방식에 따라 Tailwind CSS 클래스를 자동으로 정렬합니다.

포맷팅

코드를 포맷하려면 다음 명령을 실행하세요:

npm run format

저장 시 포맷

코드 저장 시 포맷하려면 Prettier - Code formatter 확장을 VSCode, Cursor, WindSurf 등에서 사용하는 것을 권장합니다.