현재 WegglePlus의 모든 서비스는 제가 혼자 개발하고 있습니다.
혼자 개발을 하다 보면 놓치는 부분이 정말 많습니다.
특히 코드의 일관성을 유지하는 일은 생각보다 쉽지 않습니다.
내가 작성한 코드에 대해 누군가 코드 리뷰를 해주는 것도 아니고, 내가 수십 번 검토하더라도 어느 순간 익숙해져서 무엇이 잘못된 부분인지 눈에 잘 들어오지 않게 됩니다.
그러다 며칠이 지나 다시 보면, 그제서야 놓쳤던 컨벤션이 보이곤 하죠.
그래서 아주 기본적인 컨벤션이라도 자동으로 지킬 수 있도록, 프론트엔드 프로젝트에 Prettier를 설정하기로 했습니다.
🪄 Prettier란?
Prettier는 코드를 자동으로 일관된 형식으로 정리해주는 코드 포매터(Code Formatter) 입니다.
즉, 코드의 동작에는 영향을 주지 않지만, 모든 개발자가 같은 스타일로 코드를 작성하도록 강제해줍니다.
✨ 주요 특징
- 자동 정렬 및 포맷팅(예: ' → "로 변경, 불필요한 공백 제거 등)
- 세미콜론, 들여쓰기, 따옴표, 줄바꿈 위치 등을 자동으로 통일합니다.
- 언어 및 프레임워크 지원
- JavaScript, TypeScript, JSON, HTML, CSS, Markdown 등 다양한 파일 형식을 지원합니다.
- 팀 컨벤션의 자동화오롯이 코드의 로직 품질에 집중할 수 있게 도와줍니다.
- 개발자마다 스타일을 맞추기 위해 리뷰로 소모되는 시간을 줄이고,
💡 간단히 말해
“Prettier는 코드 스타일을 자동으로 맞춰주는 개발자의 든든한 동료
설정 방법
이번 설정은 어려운 일이 아니니 AI를 통해 진행해보려고 합니다.
- 프롬프트
해당 프로젝트에서 자동 컨벤션을 위해 Prettier를 설정하려고 해.
Prettier에 대한 설정을 부탁해
이번에는 Copilot Agnet의 GPT5를 사용합니다.
- 결과
- 일단 package.json에 아래와 같이 devDependencies 에 추가됩니다.
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
- 저희 프로젝트에는 Eslint가 설치되어 있기 때문에 Eslint 충돌과 관련한 처리와 TailwindCss를 사용하고 있어 그에 대한 Prettier도 설치해주었습니다.
- 관례에 따라 eslint.config.mjs를 수정했습니다.
import eslintConfigPrettier from 'eslint-config-prettier';
const eslintConfig = [
...
// Prettier와 충돌하는 ESLint 규칙 비활성화 (반드시 마지막에 위치)
eslintConfigPrettier,
];
export default eslintConfig;
- Prettier 설정 파일과 ignore를 설정하였습니다
// prettier.config.msj
// Prettier 3 ESM config
/** @type {import('prettier').Config} */
export default {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
jsxSingleQuote: false,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'always',
endOfLine: 'lf',
plugins: [
// Tailwind CSS 클래스 정렬
'prettier-plugin-tailwindcss',
],
};
// .prettierignore
# Build outputs
node_modules/
dist/
build/
out/
coverage/
.pnpm-store/
# Vercel/Next/Nuxt and storybook
.vercel/
.next/
.nuxt/
.storybook/
# Editor/OS
.vscode/
.idea/
.DS_Store
# Public assets (binary and large static files)
public/
# Mobile native stuff
mobile/ios/Pods/
mobile/ios/build/
mobile/android/app/build/
mobile/build/
# Package managers
.yarn/
.pnp.*
- prettier commend 추가
// package.json
{
...
"scripts": {
...
"format": "prettier \\"**/*.{js,jsx,ts,tsx,css,scss,md,json,yaml,yml,html}\\" --write",
"format:check": "prettier \\"**/*.{js,jsx,ts,tsx,css,scss,md,json,yaml,yml,html}\\" --check",
...
},
- 실제 잘 동작하는지 확인합니다.
pnpm install
pnpm run format:check
pnpm run format
- 문제없이 잘 동작하는것을 확인할수 있습니다.
심화
- Prettier의 각 속성에 대해서 알아봅시다.
- 해당 페이지를 참고하시면 됩니다.
🧩 Prettier 옵션 요약표 (해당 표는 AI Gpt5를 이용하여 요약하였습니다.)
옵션명 설명 기본값 유효값 (Valid Values)
| printWidth | 한 줄의 최대 문자 수. 줄 바꿈 기준. | 80 | 숫자 (예: 80, 100, 120) |
|---|---|---|---|
| tabWidth | 탭(들여쓰기)에 사용할 공백 수. | 2 | 숫자 (예: 2, 4) |
| useTabs | 스페이스 대신 탭 문자로 들여쓰기. | false | true / false |
| semi | 문장 끝에 세미콜론(;)을 추가할지 여부. | true | true / false |
| singleQuote | 문자열을 '로 감쌀지 (true) 혹은 "로 감쌀지 (false). | false | true / false |
| quoteProps | 객체 속성에 따옴표를 언제 추가할지. | "as-needed" | "as-needed" / "consistent" / "preserve" |
| jsxSingleQuote | JSX 내에서 속성 값을 '로 감쌀지 여부. | false | true / false |
| trailingComma | 후행 쉼표를 어디에 추가할지. | "all" | "none" / "es5" / "all" |
| bracketSpacing | 객체 { key: value }에서 괄호 안에 공백을 둘지 여부. | true | true / false |
| bracketSameLine | HTML/JSX 태그 닫기 괄호(>)를 마지막 속성과 같은 줄에 둘지 여부. | false | true / false |
| arrowParens | 화살표 함수 매개변수가 하나일 때 괄호를 사용할지 여부. | "always" | "always" / "avoid" |
| rangeStart | 포맷 시작 위치 (바이트 단위). | 0 | 숫자 |
| rangeEnd | 포맷 종료 위치 (바이트 단위). | Infinity | 숫자 |
| parser | 사용할 파서(parser) 지정. 자동 감지 가능. | 자동 | "babel", "babel-ts", "flow", "typescript", "espree", "meriyah", "json", "json5", "json-stringify", "graphql", "markdown", "mdx", "html", "vue", "angular", "lwc", "yaml" 등 |
| filepath | 파일 경로(파서 추론에 사용). | undefined | 문자열 |
| requirePragma | @prettier 또는 @format 주석이 있는 파일만 포맷. | false | true / false |
| insertPragma | 파일 상단에 @format 주석을 자동 삽입. | false | true / false |
| proseWrap | Markdown 등에서 긴 텍스트를 줄바꿈하는 방식. | "preserve" | "always" / "never" / "preserve" |
| htmlWhitespaceSensitivity | HTML/Vue/Angular에서 공백 처리 민감도. | "css" | "css" / "strict" / "ignore" |
| vueIndentScriptAndStyle | Vue 파일 내 | false | true / false |
| endOfLine | 줄바꿈 문자 설정. | "lf" | "lf" / "crlf" / "cr" / "auto" |
| embeddedLanguageFormatting | 문자열 내부의 내장 코드(예: Markdown의 JS 코드) 포맷 여부. | "auto" | "auto" / "off" |
| singleAttributePerLine | HTML/JSX 태그 속성을 한 줄에 하나씩 둘지 여부. | false | true / false |
| experimentalTernaries | 삼항 연산자 포맷 실험 기능 활성화. | false | true / false |
| experimentalOperatorPosition | 줄바꿈 시 연산자 위치 설정. | "end" | "start" / "end" |
| bracketSpacingHTML (비공식 실험) | HTML 태그 내부 공백 여부 (일부 버전) | 없음 | true / false |
💬 마무리하며
- 이렇게 간단한 설정 하나로도 코드 가독성을 크게 높일 수 있습니다.
- 코드의 통일성은 클린 코드의 기본이자 협업의 시작입니다.
- 단순한 세미콜론, 공백, 개행 하나로도 코드 품질이 훨씬 깔끔해질 수 있습니다.
아직은 혼자 개발하지만, 언젠가 팀과 함께할 때를 대비해 이런 설정들은 미리 준비해두는 게 중요하다고 생각합니다.
또한 혼자 개발하는 환경에서는 CI 설정이 부담스러울 때가 많지만, Git commit hook을 이용한 자동 포맷팅을 적용하면 CI 부담을 줄이면서도 코드를 일관되게 유지할 수 있습니다.
다음 글에서는 이 commit hook 자동화 설정을 다뤄보겠습니다.
