vscode prettier 적용이 안된다?

VSCODE Prettier 설치 방법 정리

 

1. vscode 확장? 프로그램을 먼저 설치를 확인한다.

 

vscode prettier 에디터 설치 페이지

 

2. 기본 포멧 에디터가 prettier 로 설정되어 있는지 확인한다. 

설정에 default formatter 를 검색 후 설정값 확인하는 페이지

검색 부분에 format on save 를 검색하면 나오는 페이지

( 추가로 해당 부분이 체크되어 있는 지도 확인해 봐야 한다. )

 

3. 설정 검색 부분에 json 을 검색 후 setting.json 파일에 코드를 추가한다.

설정 검색창에서 json 검색 후 setting.json 파일을 여는 페이지

추가해야할 코드는 아래와 같다. 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

 

이 부분을 굳이 복붙하지 않아도, prettier install 페이지에서도 확인할 수 있다.

prettier install 페이지 설명란에 기재된 추가해야할 코드

 

코드까지 추가가 되었다면, 코드에 엔터키를 추가하여 잘 작동되는지 확인을 꼭 체크해 볼것!

 

이상 prettier 적용하기 완전 정복 !!