投稿した質問数 16

1

ESLint, Prettier 충돌이슈인 것 같아요.

만약 현재 프로젝트의 eslint 설정 파일이 최신 파일(eslint.config.js)

최신 설정 가이드 강의를 참고해보시겠어요?

Vue3 완벽 마스터 강의를 수강하시면 해당 강의를 무료로 수강할 수 있어요~!

0

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

코드 자동 포매팅 설정에서 발생하고 있는 문제를 해결하는 데 도움을 드리겠습니다. 프리티어(Prettier)와 ESLint 설정에 따라 개발자 도구에서 코드 스타일을 관리하는데, 주로 줄바꿈 문제는 Prettier의 printWidth와 관련이 있습니다.

1. printWidth 설정: printWidth는 코드 한 줄의 최대 길이를 설정하며, 이 값을 늘리면 긴 코드 줄도 한 줄에 유지될 수 있게 합니다. 하지만, 코드가 읽기 쉽도록 적절한 값을 선택하는 것이 중요합니다. 보통 80에서 100 정도로 설정되곤 합니다.

2. Prettier 설정 확인:

   .prettierrc 파일이나 package.json 내의 Prettier 설정에서 printWidth를 다시 확인하고, 아래처럼 설정합니다:

   {
     "semi": false,
     "singleQuote": true,
     "printWidth": 100, // 원하는 최대 줄 길이
     "arrowParens": "avoid"
   }
   

3. 반영 여부 확인: 설정 후에는 저장을 통해 포매팅이 제대로 되는지 확인합니다. 만약 설정이 반영되지 않는다면, 에디터(예: VS Code)의 설정에서 Prettier가 포맷터로 설정되어 있는지, 자동 저장 시 코드 액션이 활성화되어 있는지를 확인합니다.

4. 에디터 설정:

VS Code와 같은 에디터에서는 Prettier를 디폴트 포매터로 설정해야 합니다. 에디터 설정(JSON)에서 다음과 같은 부분을 확인 또는 추가하세요:

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }

위의 방법으로 해결되지 않는다면, prettierrc 구성문서를 참고하여 설정을 다시 한 번 점검해 보시기 바랍니다.

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