prettier

작성한 질문수 1

0

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

설정대로 다 진행하셨음에도 자동 정렬이 이루어지지 않는다면, 이는 기존에 다른 프로젝트를 경험하시면서 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 파일의 내용을 스크린샷 하여 다시 답글 부탁드립니다. (스크린샷 크게 전체 화면으로 찍어주세요)

0

안녕하세요, 인프런 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 설정과 적용 방법에 대한 자세한 설명이 있습니다.

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

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