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

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

앗 요 부분은 VSCode의 Print Width 설정을 수정하시면 조정할 수 있어요

아래에 그림으로 첨부드린 것 처럼, VSCode에서 Ctrl(Command) + ,(쉼표) 단축키를 눌러 나타나는 설정 창에서 "print width" 라고 검색하시면 Prettier: Print Width 라는 설정이 하나 나오는데요, 이 설정값에 따라 코드 한줄을 얼마나 길게 설정할 것인지 달라지므로 원하시는 만큼 적당히 조절 해 주시면 됩니다.

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

코드를 입력하고 저장(ctrl + S)할 때, 코드가 자동으로 포매팅 되는 기능을 설정하고 싶으신 것 같습니다. 이를 위해 Visual Studio Code(VSCode)에서 네 가지 주요 옵션을 설정할 수 있습니다:

Prettier 혹은 다른 포매터 설치

1. Prettier 설치: 먼저 VSCode의 확장성 메뉴에서 Prettier를 설치합니다. Prettier는 인코딩된 HTML, CSS, JavaScript 등을 자동 포매팅해 주는 도구입니다.
   

코드 포매팅 설정

2. Format On Save 활성화: VSCode의 설정에서 Format On Save 기능을 활성화합니다. 이렇게 하면 파일을 저장할 때마다 코드가 자동으로 포매팅됩니다. 해당 기능은 VSCode의 설정 검색 창에서 ‘Format On Save’를 검색해 활성화 할 수 있습니다.
   

Prettier 설정 조정

3. Prettier 설정 조절: .prettierrc 파일을 만들어서 trailingComma, tabWidth, singleQuote 등과 같은 항목을 조정할 수 있습니다. 이 파일을 프로젝트 루트에 생성한 후 원하는 대로 설정 값을 변경해주세요. 예를 들어, 코드의 스타일을 조정하려면 다음과 같이 사용하실 수 있습니다:
   

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": false
}

HTML이나 JSX 내에서 줄 바꿈 위치 컨트롤

4. JSX 줄 바꿈 위치: 버튼이나 다른 컴포넌트 내부의 요소들이 세로로 정렬되길 원하신다면 jsxBracketSameLine 옵션을 조정하여 설정에 맞게 줄 바꿈을 컨트롤 할 수 있습니다.
   

이러한 설정들을 통해 저장 시 코드를 자동 정렬할 수 있습니다. 다양한 옵션 설정이 가능하니, 필요한 대로 조정하실 수 있습니다.

관련 질문에 대해서는, 이 질문에 대해 추가적인 정보와 조언을 확인하실 수 있습니다.

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