👟 Etc

[Visual Code] prettier 자바스크립트 자동 포맷터 설정

dev_genie 2023. 5. 20. 02:36

************************************************************************************************

✅ Prettier 란?

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

코드가 길어지면 가독성도 떨어지고, 들여쓰기 안된 부분들도 생기게 되는데,

이럴때마다 줄맞춤이 자동포맷팅 되도록 Prettier 를 이용해 셋팅을 변경해줄 수 있다.

************************************************************************************************

스크립트 자동정렬을 위해 흔히 사용하는 prettier,

매번 찾기 번거로우니 자동 포맷터 설정을 위한 정리를 남겨보려한다. 

 

*Tip 프리티어 설정 전, 잠깐 !

1 .prettierrc 파일을 프로젝트 최상단에 만들기

여러 사람과 협업할 때는 코드 스타일을 통일해야 하는 경우가 생긴다.

이럴 때 각 파일마다 아래 형식을 지정해놓으면 일관성있게 작업하기 용이하다.

{
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"tabWidth": 4,
	"trailingComma": "all",
	"printWidth": 80
}

※ 어디 글을 보니까 .prettierrc파일을 만들지 않고 설정 부분만 고치니 적용 안되는 경우도 있었다 한다.

그러니 꼭! 잊지말고 파일 생성!하자!!

Prettier 익스텐션을 이미 설치했다는 가정 하에 ! 😏

✅ Prettier 설정방법 

1. 좌측 하단 톱니바퀴 > [설정]으로 들어간다.

 

2.  검색에 prettier 입력 후 아래와 같이 설정

이외에는 본인이 편한대로 설정해주면 될듯?

 

4. 검색에 format on save 입력 후 아래와 같이 설정

 

5. 검색에 Default Formatter 입력 후 아래와 같이 설정

 

6. 간격 이상한 파일에서 Ctrl + S !!

간격이 삐뚤빼뚤한 이러한 파일이 있을 때, Ctrl + S 눌러주면 !!!!

보다시피 깔 ~ 끔 해졌다.

LIST