[VSCode]자동으로 jsx format으로 변환되는 방법

1. vscode 익스텐션으로 prettier - code formatter 설치
2. user settings(vscode 팔레트로 검색)
2-1.
-> default formatter 검색
-> default formatter를 prettier로 바꾸기
2-2.
->format on save 검색
->체크해주기

3. 윈도우의 경우 crtl+s 로 저장하면 알아서 구조가 바뀔겁니다.

 

추가 설명

1의 vscode 익스텐션 => 우리 파일 목록 보이는 곳 좌측에 5개 아이콘 중 '정사각형 블록에서 블록 하나 옆에 빠져 있는 것' 클릭. 거기서 pretter 검색하면 맨 위에 알록달록한 P 모양 나오는거 그거 클릭. 거기서 우측 창에 있는 [설치] 클릭.

2. user settings -> 그 아이콘들 맨 밑에 톱니바퀴 모양 클릭. 뜨는 목록에서 '설정' 클릭. 그러면 '설정'이라는 페이지가 뜨고, 그 밑에 회색으로 뭔가 검색 가능한 영역이 있음. 그 칸을 클릭하고 아래의 행동을 실행,

2.1 default formatter 검색 -> 회색 표시 되어있고 클릭하면 목록 중 고를 수 있는 부분이 있을 것임. 거기 클릭. 'Prettier - Code formatter'를 찾아서 클릭.

2.2 format on save 검색 -> default formatter 지우고 format on save 검색. 체크할 수 있는 것이 딱 하나 뜨는데, 그거 클릭하시면 됨.