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

안녕하세요 이정환입니다.

우선 강의에서는 .prettierrc 파일이 아닌 .prettierrc.json 파일로 생성하고 있습니다. 이 부분을 변경해 보신 다음 다시 테스트해 보시길 권장드립니다.

그런데 사실 .prettierrc로 설정하셔도 정렬은 잘 동작해야 하는데 뭔가 이상하네요 ㅎㅎ... 전체 프로젝트 코드를 답글로 깃허브 or 구글 드라이브 링크로 남겨주시면 살펴보겠습니다.

아 답글에 VSCode 자체의 setting.json 파일 내용도 스크린샷으로 추가 첨부 해 주세요

• cmd + shift + p로 검색창을 연 다음, settings를 검색해 "사용자 설정 열기(JSON)"를 선택합니다.

  

• setting.json 파일의 내용을 전체 화면으로 캡쳐합니다.

  

   

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

노재능님께서 Prettier와 Tailwind CSS 플러그인 사용 시 발생하는 문제에 대해 도와드리겠습니다. Prettier가 제대로 동작하지 않는 경우, 다음 몇 가지를 확인하시면 도움이 될 수 있습니다:

1. Prettier 플러그인 설치 여부 확인: prettier-plugin-tailwindcss가 확실히 프로젝트의 node_modules에 설치되어 있는지 확인해 주세요. 만약 설치가 제대로 되지 않았다면 다시 설치해 보시기 바랍니다.

2. .prettierrc 파일 설정 확인: .prettierrc 파일이 프로젝트의 루트 디렉토리에 제대로 위치해 있는지 확인하세요. plugins 옵션에 prettier-plugin-tailwindcss가 포함되어 있는지도 꼭 확인해 주세요.

3. Visual Studio Code 설정: Format on Save 옵션과 Default Formatter가 Prettier로 설정되어 있는 것은 잘 하셨습니다. 여기서 추가적으로, 특정 파일이 올바른 확장자로 저장되어 있는지도 확인해 보세요. 예를 들어 .tsx나 .jsx 등 형식이 맞는지 확인합니다.

4. 작업 공간 설정 확인: .vscode/settings.json 파일을 확인하여, 특정 작업 공간에 설정된 다른 포맷터 옵션이나 Prettier 설정이 있는지 점검해 보세요.

5. Prettier 충돌 문제: ESLint와 Prettier가 동시에 사용될 경우 설정이 충돌할 수 있습니다. 이때는 일관된 설정을 위한 prettier-eslint 설정을 고려해 보실 수 있습니다.

이와 관련해서 유사한 문제를 해결한 사용자들의 게시글을 참고하시면 도움이 될 것입니다:

• Prettier 적용 안되는 이슈
  

해당 링크에서는 Prettier가 제대로 적용되지 않는 상황에서 어떻게 설정을 변경해야 하는지에 대한 정보를 다루고 있습니다.

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