prettier 자동 적용 관련 이슈

Question

안녕하세요 다른 분들이 올리신 prettier 관련 질문글과 동일하게 prettier 적용 이슈 발생하여 문의글 남깁니다. 이전 질문글들에 답변 해주신 것 참고해서 해결하려고 하였으나 여전히 되지 않더라구요. 무슨 문제일까요?   prettier 확장 설치 확인   파일명을 .prettierrc 에서 .prettierrc.json 으로 바꿔봤음에도 되지 않음 Default Formatter 설정 확인 FormatOnSave 옵션 활성화 확인 프로젝트별 설정 파일 확인 git repo 링크 남겨놓습니다 https://github.com/seonyoungg/onebite-exam

couldbe · Answer

저의 경우엔 강의대로 했을 땐 되지 않았다가 아래 내용처럼 했을 때 적용되는 것을 확인했습니다.   settings.json에 다음 내용 추가 "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"   .prettierrc 파일명 강의 내용대로 유지 .prettierrc 파일 내 코드 강의 내용대로 유지

winterlood · Answer

안녕하세요 선영님 이정환입니다. 약 한시간의 삽질 끝에 드디어 답을 찾았습니다 ...! 원인은 VSCode가 prettier-plugin-tailwindcss 패키지의 엔트리 파일(진입 파일)을 찾지 못하기 때문인걸로 확인되었습니다. 특정 버전에서 이런 이슈가 발생하는 것 같은데 ... 강의 예제 코드에서는 이런 문제가 전혀 발생하지 않아서 구체적인 원인은 좀 더 파악해 봐야 할 것 같습니다. 해결 방법은 .prettierrc.json 파일의 내용을 아래와 같이 수정하신 다음, VSCode를 완전히 종료하셨다가 다시 작동해 보시면 정상 작동 할 겁니다!! { "plugins": ["./node_modules/prettier-plugin-tailwindcss/dist/index.mjs"] }

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 선영님께서 겪고 계신 Prettier 관련 이슈에 대해 도와드리겠습니다. Prettier가 VS Code에서 자동으로 적용되지 않는 경우, 여러 가지 원인이 있을 수 있으며, 이미 설정을 확인하신 것처럼 몇 가지 일반적인 점검 사항이 있습니다. Prettier 설치 및 플러그인 확인 : Visual Studio Code에 Prettier 확장 프로그램이 설치되어 있고, 활성화되어 있는지 다시 확인해 주세요. 특히 prettier-plugin-tailwindcss 가 올바르게 설치되어 있는지 package.json 파일에서 확인해야 합니다. 플러그인이 제대로 안 되어 있으면 포맷팅이 적용되지 않을 수 있습니다. Default Formatter 확인 : VS Code 의 설정에서 Default Formatter 가 Prettier - Code formatter(Esbenp.prettier-vscode) 로 설정되어 있는지 재확인해 보세요. 설정 파일에서는 "editor.defaultFormatter": "esbenp.prettier-vscode" 로 설정되어 있어야 합니다. Format on Save 옵션 활성화 : editor.formatOnSave 가 true 로 설정되어 있는지 .vscode/settings.json 에서 확인하세요. 이 옵션이 활성화되어 있어야 파일을 저장할 때 자동으로 포맷팅이 진행됩니다. 특정 파일 확장자 확인 : 파일의 확장자가 .js , .jsx , .ts , .tsx 등 Prettier가 지원하는 확장자로 저장되어 있는지 확인하세요. 특정 파일에서는 that tailwindcss plugin을 지원하지 않을 수 있습니다. 충돌하는 설정 확인 : .vscode/settings.json 에 Prettier 와 충돌할 만한 다른 설정이 있는지 확인해보세요. ESLint와 Prettier가 같이 사용될 때도 충돌이 생길 수 있습니다. .prettierrc 대신 .prettierrc.json 사용 : .prettierrc 대신 확장자를 명시한 .prettierrc.json 파일을 사용하고 있는 것은 좋습니다. 다만 JSON 형식이 맞는지(쉼표, 중괄호 등)이 맞게 작성되어 있는지 확인하세요. 여기에서 언급한 설정들이 여전히 적용이 되지 않는다면, 아래 유사한 게시물에서 추가적인 정보를 확인할 수 있습니다: Prettier 적용 안되는 이슈 : 다양한 Prettier 설정과 적용 방법에 대한 정보가 포함되어 있습니다. 문제가 해결되길 바라며, 유사한 상황을 경험한 다른 사용자들의 사례가 도움이 되길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.