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

안녕하세요 백승욱님 이정환입니다.

설정대로 다 진행하셨음에도 자동 정렬이 이루어지지 않는다면, 이는 기존에 다른 프로젝트를 경험하시면서 VSCode에 설정해두신 사항들과 충돌이 되고 있을 가능성이 가장 높습니다. 아래의 사항들을 체크해보시길 권장드립니다.

• prettier-plugin-tailwindcss가 제대로 설치되어 있는지 체크

  • package.json의 devDepencen... 항목에 prettier-plugin-tailwindcss가 제대로 잘 설치되어 있는지 확인이 필요합니다.

• VSCode 자체의 setting.json 파일의 세팅값 체크

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

    

     

  • setting.json의 내용이 아래와 같은지 확인합니다.

    • 모두 일치할 필요는 없습니다. 주요한 다음 옵션만 체크합니다.

    • formatOnSave 옵션이 true로 체크되어 있는지

    • deafultFormatter가 잘 설정되어 있는지

    • 이 외의 포매터 관련된 필요하지 않은 설정이 작성되어 있지는 않은지

      

       

위 사항을 모두 체크하셨음에도 문제가 발생한다면 setting.json 파일의 내용을 스크린샷 하여 다시 답글 부탁드립니다. (스크린샷 크게 전체 화면으로 찍어주세요)

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

백승욱님께서 말씀하신 Prettier 이슈에 대해 설명드리겠습니다. Visual Studio Code에서 파일을 저장할 때 자동으로 Prettier를 실행하려면 몇 가지 설정이 필요합니다. 현재 설정이 제대로 되어 있지 않아 저장할 때 작동하지 않고 터미널에서 명령어를 실행해야 하는 상황인 것으로 보입니다. 다음과 같은 문제를 확인해 보세요:

1. Prettier 확장 설치 확인: Visual Studio Code에 Prettier 확장 프로그램이 제대로 설치되어 있는지 확인하세요. 설치가 안 되어 있으면 Prettier가 작동하지 않습니다.

2. Default Formatter 설정: Visual Studio Code에서 Editor: Default Formatter를 Prettier - Code formatter로 설정했는지 확인해야 합니다. 위의 이미지와 같이 설정 창에서 이 설정이 맞는지 다시 체크하세요.

3. Format on Save 옵션 활성화: Editor: Format On Save 옵션이 체크되어 있는지 확인하세요. 이 옵션이 활성화되어 있어야 파일을 저장할 때 자동으로 포맷팅이 진행됩니다.

4. 프로젝트별 설정 파일 확인: .prettierrc 파일이나 작업 공간 설정에 Prettier 관련 설정이 있는지 확인하세요. 이미지를 보니 prettier-plugin-tailwindcss 플러그인을 사용하고 계신 것 같은데, 이와 관련된 설정도 확인해 보세요.

아래의 유사한 게시물에서 더 많은 정보를 참고하실 수 있습니다:
- Prettier 적용 안되는 이슈: 다양한 Prettier 설정과 적용 방법에 대한 자세한 설명이 있습니다.

프로젝트 특정 문제와 설정이 여전히 제대로 작동하지 않는다면, 추가적인 정보나 문서 확인이 필요할 수 있습니다. 다른 문제가 있다면 언제든 질문해 주세요.

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