[VsCode]Prettier 적용 안 될 시+확장 프로그램 추천

Vs Code의 확장 기능 중에서도 정렬을 보기 좋게 정돈해주는 Prettier이 있다.

학원 컴퓨터에는 잘 설치를 했는데, 집에 와서 혼자 해보니 이상하게 정렬이 되지 않아 곤란을 겪고 있었다.

 

Vs Code 창에서 우측 하단에 Prettier이 체크 표시로 뜬다면, 그것은 해당 확장 프로그램이 제대로 작동 중이라는 뜻이다. 따라서 이때는 다른 방법을 시도해야 원하는대로 기능이 알맞게 적용되는 것을 볼 수 있다.

 

1. 우선 Vs Code의 파일>기본설정>설정에 들어가 'Format on Save'를 입력하고, 해당 칸에 체크가 되어 있는지 확인한다.

2. 이후 같은 창에서 'Default formatter'를 검색해서 Prettier로 지정해주어야 한다. 처음 Vs Code를 깔았다면 null 없음으로 되어있는 경우가 흔한 것 같다. 

이렇게 지정해주어야 한다!

위 두 가지를 전부 확인하고 나자 제대로 적용되기 시작했다. Prettier는 중간에 파일을 저장하면 그때그때 난잡한 코드들을 제대로 정리해준다. 일주일 써보니까 굉장히...편하다. 

 

• 참고로 Html이든 Css든 특정 부위에 Prettier이 적용되지 않길 바란다면(간혹 가로로 길게 늘 쓴 속성들이 저장하자마자 Prettier에 의해 세로로 정리 되어, 스크롤이 불필요하게 길어지는 사태가 발생한다.)해당 구간 맨 앞에 prettier-ignore라고 쓰고 ctrl+l로 주석 처리를 해두면 된다. 
• 이 외에도 현재 쓰고 있는 확장 프로그램으로는 한국어로 바꿔주는 Korean, 열린 태그를 수정할 때에 닫는 태그까지 함께 자동으로 바꿔주는 Auto Rename Tag, 폴더를 예쁜 아이콘으로 변경해주는 vscode-icons, 코드를 저장만 하면 실시간으로 브라우저에 반영시켜주는 Live Server가 있다. 이 정도는 부가적인 것보단 기본 프로그램인 것 같으니 편하게 코딩하기 위해 깔아주자.
• Power Mode는 학원 컴퓨터에만 깔아서 쓰고 있는데, 코드를 칠 때 작은 불꽃놀이가 터져서 눈이 심심하지 않게 해준다. 다만 화면이 흔들리는 효과를 설정에 가서 체크 해제해야 하는 등 조금 번거로울 수 있으니 주의할 것.