[리액트 기초 스터디] Prettier 적용 방법 & 적용 안 되는 경우 해결 방법

목차 (OPEN)

• 🎨 Prettier란
• ⚒ Prettier 적용 방법
• 🚨 문제상황

 

 

 

 

🎨 Prettier란

Prettier는 코드 포맷터이다.

즉, 개발자가 작성한 코드를 자동으로 정해진 규칙에 따라 보기 좋게 정렬해주는 도구이다.

 

 

예를 들어, 아래처럼 들쭉날쭉한 코드가 있다고 해보자.

function helloWorld(){console.log("Hello, world!");}

 

 

이걸 Prettier로 포맷팅하면 아래와 같이 자동으로 수정된다.

function helloWorld() {
  console.log("Hello, world!");
}

 

 

---

⚒ Prettier 적용 방법

1) VSCode 확장 설치

VSCode에서 Extension 탭 (Ctrl + Shift + x)을 열고,

Prettier를 검색해서 아래 사진과 똑같은 것을 설치한다.

 

 

2) Format On Save 설정

이제 코드를 저장할 때 자동으로 포맷팅되도록 설정해주기 위해  Ctrl + ,  를 눌러준다.

 

그러면 이렇게 설정이 열리는데,

검색창에  format on save 를 입력해서 사진과 같이 체크 표시를 해주면 된다.

 

 

이렇게 하면 Ctrl + s 로 파일을 저장할 때마다 자동으로 Prettier가 적용될 것이다.

 

 

---

🚨 문제상황

그러나 나는 일부러 코드를 지저분하게 작성한 뒤 여러 번 저장해봐도

전혀 포맷팅이 적용되지 않는 문제가 발생했다.

 

 

다행히도 해결 방법은 매우 간단했다.

 

 

Default Formatter 지정하기

VSCode는 여러 포맷터(ex. ESLint, TypeScript 내장 포맷터 등)를 동시에 가질 수 있어서

어떤 걸 기본으로 쓸지 정하지 않으면 Prettier가 무시될 수도 있다고 한다.

 

따라서 다시 Ctrl + , 를 눌러서 검색창에  Default Formatter  를 검색한 후,

사진과 같이 Prettier로 설정해주면 된다.