[VScode] Mac에서 Prettier 작동 오류 해결하기

VS Code Mac에서 Prettier 작동 오류 해결하기

최근 Mac에서 VS Code를 사용하면서 Prettier가 정상적으로 작동하지 않는 문제가 발생했습니다. 문제를 해결하기 위해 여러 단계를 시도했고, 그 과정을 정리해보았습니다.

---

🚨 문제 상황: VS Code Mac에서 Prettier 작동안됨

• 코드를 저장해도 자동으로 포맷이 되지 않음
• npx prettier --check .을 실행했을 때 여러 경고 발생

---

1. Prettier를 기본 포맷터로 설정하기

VS Code 설정에서 Prettier를 기본 포맷터로 설정하는 방법:

1. Cmd + , (설정 열기)
2. default formatter 검색
3. Editor: Default Formatter에서 Prettier를 선택

파일 저장 시 자동 포맷 활성화:

1. Cmd + ,로 설정 창 열기
2. format on save 검색
3. Editor: Format On Save를 활성화

---

2. 프로젝트 단위 Prettier 설정 충돌 해결

프로젝트에 .vscode/settings.json 파일 수정:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

이 설정은 프로젝트 내에서 Prettier를 포맷터로 강제로 지정하고, 저장 시 포맷팅을 자동으로 실행하게 합니다.

---

3. Prettier 실행 테스트

Prettier 포맷 검사 및 자동 수정:

npx prettier --check .
npx prettier --write .

실행 결과:

• 여러 파일에서 코드 스타일 문제가 발견되었고, 일부 파일이 수정되었습니다.

---

⚠️ 4. Prettier 경고 발생 원인

문제 원인:

• .dSYM 디렉터리 내 .yml, .md 파일이 Prettier 검사에 포함
• .dSYM은 macOS의 디버깅 정보 파일로, Prettier 포맷팅 대상이 아님

---

5. .prettierignore 파일로 특정 파일 검사 제외

.prettierignore** 파일 직접 생성 및 수정:**

1. 터미널에서 프로젝트 루트로 이동:
2. touch .prettierignore
3. 파일 열기:
4. open .prettierignore
5. 예외 설정 추가:
6. **/*.dSYM/ **/*.yml **/*.md README.md

해당 파일을 생성하면 지정된 파일들은 Prettier 검사에서 제외됩니다.

---

6. 최종 확인

npx prettier --check . 및 npx prettier --write . 명령어를 다시 실행한 결과:

• ✅ "All matched files use Prettier code style!"
• ✅ 변경 없음 (unchanged) 메시지 발생

---

결론:

• .prettierignore 파일을 생성하고, 검사에서 불필요한 파일을 제외함으로써 문제를 해결했습니다.
• Prettier가 정상적으로 적용되었고, 자동 포맷도 활성화되었습니다.