VS Code에서 자동 포맷팅이 안 될 때 해결 방법

개발을 하면서 코드 스타일을 유지하는 것은 가독성과 유지보수성을 높이는 데 중요한 요소입니다. 특히 VS Code의 자동 포맷팅 기능은 개발자의 생산성을 높이는 데 큰 역할을 합니다. 하지만 때때로 자동 포맷팅이 제대로 동작하지 않는 경우가 있습니다. 이 글에서는 VS Code에서 자동 포맷팅이 안 될 때 해결 방법을 정리해보겠습니다.

---

1️⃣ VS Code 설정 확인하기

VS Code에서 자동 포맷팅 기능이 활성화되어 있는지 확인해야 합니다.

🔹 자동 포맷팅 옵션 활성화하기

1. VS Code 설정 창 열기 (Ctrl + , 또는 Cmd + ,)
2. 검색창에 "format on save" 입력
3. Editor: Format On Save 옵션이 체크되어 있는지 확인
4. Editor: Default Formatter에서 올바른 포맷터가 선택되었는지 확인

---

2️⃣ 확장 프로그램(Formatter) 설정 확인하기

코드 자동 포맷팅은 Prettier, ESLint, Black, clang-format 등의 확장 프로그램을 통해 실행되는 경우가 많습니다.

🔹 Prettier가 올바르게 설치되었는지 확인

1. Prettier 설치 확인

   npm list -g --depth=0 | grep prettier

   • 설치되어 있지 않다면, 다음 명령어로 설치할 수 있습니다.

     npm install -g prettier

2. VS Code 확장 프로그램 목록에서 Prettier가 설치되어 있는지 확인
3. 설정에서 Editor: Default Formatter를 Prettier - Code formatter로 설정

🔹 ESLint와의 충돌 해결

• ESLint가 Prettier와 충돌하는 경우, settings.json에 다음을 추가해 해결할 수 있습니다.

   {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "eslint.format.enable": false
   }

---

3️⃣ 파일별 포맷팅 적용 확인하기

VS Code에서는 파일 형식에 따라 포맷팅이 적용되지 않을 수도 있습니다. 특정 파일에서만 포맷팅이 적용되지 않는다면 다음 사항을 확인하세요.

🔹 특정 파일에서만 적용되지 않는 경우

1. 해당 파일의 확장자가 VS Code의 포맷터에서 지원되는지 확인
2. 우측 하단의 언어 모드 선택 (예: JavaScript, Python)
3. settings.json에 특정 언어에 대한 포맷팅을 추가

   {
      "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
   }

---

4️⃣ 수동으로 포맷 실행하기

자동 포맷팅이 정상적으로 동작하지 않는다면 수동으로 포맷을 실행할 수 있습니다.

🔹 VS Code에서 직접 포맷 실행하기

• 단축키 사용 (Shift + Alt + F 또는 Shift + Option + F)
• 명령어 실행 (Ctrl + Shift + P → "Format Document" 입력 후 실행)

🔹 Prettier CLI를 사용한 포맷 실행

prettier --write "**/*.js"

---

5️⃣ 워크스페이스 및 글로벌 설정 확인하기

VS Code의 설정은 워크스페이스(workspace) 설정과 사용자(global) 설정으로 나뉘어 있습니다.

🔹 .vscode/settings.json에서 설정 확인

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

🔹 설정이 적용되지 않는다면?

1. settings.json을 열어 다른 설정과 충돌하는 부분 확인
2. VS Code를 완전히 종료 후 재시작 (Ctrl + Shift + P → "Reload Window")

---

✅ 결론

VS Code에서 자동 포맷팅이 동작하지 않는 원인은 다양하지만, 설정을 꼼꼼히 확인하면 대부분 해결할 수 있습니다. 설정 값 확인, 확장 프로그램 점검, 파일별 포맷팅 적용 확인, 수동 실행, 워크스페이스 설정 검토를 순차적으로 진행하면 문제를 해결할 수 있습니다.

지금 바로 위의 방법을 적용해보고, 개발 환경을 더욱 쾌적하게 만들어 보세요! 🚀