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

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

음 아마 prettier의 format on save 옵션을 활성화 하시지 않은걸로 보입니다! 우리 강의의 1.2) VSCode 설치하기 챕터의 6분 30초 부분을 확인하시어 format on save 옵션이 활성화 되었는지 확인 부탁드릴게요!

만약 그럼에도 제대로 동작하지 않는다면 VSCode를 종료 후 재가동 해보시기 바랍니다. 그래도 안되면 꼭! 바로 답글 남겨주세요

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

소괄호가 자동으로 생성되면서 작성한 내용을 감싸주는 기능은 대부분 코드 에디터에서 제공하는 자동 포맷팅 기능의 일환입니다. ESLint와 Prettier를 설치하셨으니, 작업 환경을 약간 조정하면 이 기능을 활성화 할 수 있습니다.

1. Prettier 설정 확인: Prettier는 코드의 포맷을 자동으로 맞춰주는 도구로, return문의 소괄호를 자동으로 생성하도록 설정할 수 있습니다. prettier 설정 파일(.prettierrc 또는 package.json)에서 이러한 옵션이 설정되어 있는지 확인해 보세요:

   {
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "printWidth": 80,
    "arrowParens": "always"
   }
   

   설정 파일에 arrowParens 항목이 always로 되어 있다면, 화살표 함수의 return문에서 소괄호를 자동생성할 수 있습니다.

2. Visual Studio Code 설정 확인: Visual Studio Code나 다른 코드 에디터를 사용 중이시라면, 에디터의 설정에서 포맷팅을 활성화해야 합니다. VSCode에서는 settings.json 파일을 열고 다음과 같이 설정할 수 있습니다:

   "editor.formatOnSave": true,
   "prettier.singleQuote": true
   

   위 설정은 코드를 저장할 때마다 Prettier를 자동으로 실행하여 소괄호와 같은 포맷을 적용할 수 있게 해줍니다.

3. ESLint 추가 플러그인 설치: ESLint와 Prettier가 함께 작동하여 충돌을 예방하기 위해 eslint-plugin-prettier와 eslint-config-prettier 같은 플러그인을 설치하고 .eslintrc에 설정을 추가할 수 있습니다.

관련 답변을 참고하시려면, 다음의 유사한 질문을 확인해보세요:
- 소괄호 자동 생성 문제 해결 방법
- Code 편집기 설정 및 포맷팅 이슈 대처

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