인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.

선영님께서 겪고 계신 Prettier 관련 이슈에 대해 도와드리겠습니다. Prettier가 VS Code에서 자동으로 적용되지 않는 경우, 여러 가지 원인이 있을 수 있으며, 이미 설정을 확인하신 것처럼 몇 가지 일반적인 점검 사항이 있습니다.

1. Prettier 설치 및 플러그인 확인: Visual Studio Code에 Prettier 확장 프로그램이 설치되어 있고, 활성화되어 있는지 다시 확인해 주세요. 특히 prettier-plugin-tailwindcss가 올바르게 설치되어 있는지 package.json 파일에서 확인해야 합니다. 플러그인이 제대로 안 되어 있으면 포맷팅이 적용되지 않을 수 있습니다.

2. Default Formatter 확인: VS Code의 설정에서 Default Formatter가 Prettier - Code formatter(Esbenp.prettier-vscode)로 설정되어 있는지 재확인해 보세요. 설정 파일에서는 "editor.defaultFormatter": "esbenp.prettier-vscode"로 설정되어 있어야 합니다.

3. Format on Save 옵션 활성화: editor.formatOnSave가 true로 설정되어 있는지 .vscode/settings.json에서 확인하세요. 이 옵션이 활성화되어 있어야 파일을 저장할 때 자동으로 포맷팅이 진행됩니다.

4. 특정 파일 확장자 확인: 파일의 확장자가 .js, .jsx, .ts, .tsx 등 Prettier가 지원하는 확장자로 저장되어 있는지 확인하세요. 특정 파일에서는 that tailwindcss plugin을 지원하지 않을 수 있습니다.

5. 충돌하는 설정 확인: .vscode/settings.json에 Prettier와 충돌할 만한 다른 설정이 있는지 확인해보세요. ESLint와 Prettier가 같이 사용될 때도 충돌이 생길 수 있습니다.

6. .prettierrc 대신 .prettierrc.json 사용: .prettierrc 대신 확장자를 명시한 .prettierrc.json 파일을 사용하고 있는 것은 좋습니다. 다만 JSON 형식이 맞는지(쉼표, 중괄호 등)이 맞게 작성되어 있는지 확인하세요.

여기에서 언급한 설정들이 여전히 적용이 되지 않는다면, 아래 유사한 게시물에서 추가적인 정보를 확인할 수 있습니다:

• Prettier 적용 안되는 이슈: 다양한 Prettier 설정과 적용 방법에 대한 정보가 포함되어 있습니다.
  

문제가 해결되길 바라며, 유사한 상황을 경험한 다른 사용자들의 사례가 도움이 되길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.