728x90
VSCode / IntelliJ에서 Prettier 설치 및 설정 방법
Prettier는 코드 포맷터로, 일관된 코드 스타일을 자동으로 유지해주는 도구입니다. 협업이나 팀 프로젝트에서 특히 유용합니다. 이 문서에서는 VSCode와 IntelliJ에서 Prettier를 설치하고 설정하는 방법을 정리합니다.
VSCode에서 Prettier 설정하기
1. 확장 프로그램 설치
- VSCode를 열고 사이드바에서 Extensions (확장) 아이콘 클릭
- 검색창에 Prettier - Code formatter 입력
- Prettier 확장 프로그램 설치 (Publisher: Prettier)
2. 기본 설정 적용
설정 파일 (settings.json)에서 다음 항목들을 추가합니다:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
▶︎ 단축키로 코드 정리하기
- Windows/Linux: Shift + Alt + F
- macOS: Shift + Option + F
위 단축키로 현재 열려 있는 파일을 Prettier 설정에 따라 자동 포맷할 수 있습니다.
3. 프로젝트에 Prettier 설치
프로젝트 루트에서 다음 명령어를 실행하여 Prettier를 의존성으로 추가합니다.
npm install --save-dev prettier
4. 설정 파일 생성 (선택)
.prettierrc 파일을 생성하여 원하는 포맷을 지정할 수 있습니다.
{
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid"
}
▶︎ 자주 사용되는 설정 옵션 설명
- singleQuote: 작은 따옴표 사용 (true면 ', false면 ")
- semi: 문장 끝 세미콜론 사용 여부 (true: 사용, false: 생략)
- tabWidth: 들여쓰기 간격 (기본 2)
- trailingComma: 마지막 쉼표 설정 (none, es5, all 중 선택)
- printWidth: 한 줄에 허용할 최대 글자 수 (기본 80)
- bracketSpacing: 객체 리터럴 중괄호 간 공백 여부 (true: { foo: bar }, false: {foo: bar})
- arrowParens: 화살표 함수 매개변수 괄호 사용 여부 (always, avoid)
5. .prettierignore 파일 생성 (선택)
node_modules
build
dist
IntelliJ (WebStorm 포함)에서 Prettier 설정하기
1. Prettier 설치
터미널에서 프로젝트 루트 기준으로 다음 명령어를 실행:
npm install --save-dev prettier
2. Settings 열기
- File > Settings (macOS는 IntelliJ IDEA > Preferences)
- Languages & Frameworks > JavaScript > Prettier
3. Prettier 설정
- Prettier package: 프로젝트 내 prettier 경로 지정 (node_modules/.bin/prettier 혹은 자동 인식)
- On code reformat / On save 체크 (저장 시 자동 포맷팅)
4. .prettierrc 설정 동일하게 적용 가능
{
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid"
}
▶︎ 자주 사용되는 설정 옵션 설명
- singleQuote: 작은 따옴표 사용 (true면 ', false면 ")
- semi: 문장 끝 세미콜론 사용 여부 (true: 사용, false: 생략)
- tabWidth: 들여쓰기 간격 (기본 2)
- trailingComma: 마지막 쉼표 설정 (none, es5, all 중 선택)
- printWidth: 한 줄에 허용할 최대 글자 수 (기본 80)
- bracketSpacing: 객체 리터럴 중괄호 간 공백 여부 (true: { foo: bar }, false: {foo: bar})
- arrowParens: 화살표 함수 매개변수 괄호 사용 여부 (always, avoid)
추가 팁
- ESLint와 함께 사용 시 eslint-config-prettier, eslint-plugin-prettier를 함께 설정해 충돌 방지
- 커맨드 라인에서 포맷 적용:
npx prettier --write .
마무리
Prettier를 설정해두면 코드 스타일을 통일시키고 팀원 간 코드 충돌을 줄일 수 있습니다. 특히 VSCode와 IntelliJ처럼 사용자가 많은 에디터에서는 설정이 간단하므로 꼭 적용해보길 권장합니다.
728x90
'개발 기록 > 환경 세팅 · 인프라 정리' 카테고리의 다른 글
[MySQL 외부 IP 허용 방법] - 외부에서 접근해서 사용해보자. (1) | 2023.12.20 |
---|