본문 바로가기
IDE (개발환경)/VisualStudioCode

[VSC] Prettier 설정

by staticClass 2021. 1. 19.

Prettier

코드를 분석하여 깔금하고 일관된 코드스타일을 유지시켜주게 도와주는 코드 포맷터이다.

우리는 세이브 자동으로 포맷팅 기능을 쓰고싶다👍

하지만 처음이라면 Prettier세팅이 생각보다 어렵다.

이 글은 세팅에 대해 설명하는 글이다.

 

 

혹시 몰라 설치하는 방법도 적어본다. 필요하다면 아랫줄의 더보기를 클릭하자

더보기

1. 빨간색 박스의 아이콘을 클릭하자

 

 

2. 검색창에 prettier를 입력후 검색된 prettier를 설치하자.

나는 이미 설치가 되어있기 때문에 처음 설치하는 경우 화면이 다를 수 있다.

설치가 끝났다면 다음 내용대로 세팅하자.😁

 

 

Prettier 설정방법

1. 설정으로 들어가자

 

 

2. 검색창에 editor format on save 를 입력 하고

Editor: Format On Save를 체크해주자.

 

 

3. 검색창에 editor Default Formatter 를 입력

Editor: Default Formatteresbenp.prettier-vscode로 선택하자!

 

보통은 여기까지 하면 될거라고 생각하지만 잘 작동하지 않는다면, 다음 단계도 따라해보자.😉

 

 

4. Prettier를 사용하려는 파일로 이동한다.

(나는 내가 만들어서 놀고 있던 home.html탭을 클릭했다)

그 뒤에 F1을 누르고 검색창에Format Document를 입력

문서 서식 프로그램을 선택하자

 

 

5. 기본 값으로 Prettier - Code Formatter 선택하면 모든 설정이 끝!

이렇게까지 했는데 작동을 안한다면???

vsc를 껏다가 켜보도록 하자.🙄

댓글