아니 우리 코드도 꾸밀 줄 안다고요! - prettier에 대해 알아보자

prettier

prettier라는 것은 vscode를 사용한다면 모두가 알것이다

prettier는 줄바꿈, 띄어쓰기, 공백, 들여쓰기 이런것들을 관리한다 즉 코드의 가독성을 높이는데 기여하는 툴이다

 

사용

• 내가 쓰고있는 vscode에서만 prettier 적용
• .prettierrc.json을 사용해 프로젝트 전용 prettier 적용
• eslint와 같이 사용

이중에서 eslint와 같이 사용하는 방법을 빼고 알아볼 것이다(아직 lint에 대해 잘모르기 때문에 나중에 추가할것 입니다)

 

vscode에 적용

vscode에서 사용하는 방법은 vscode에서 지원하는 extension을 설치하는 방법이다

 

extension을 설치만 하고 바로 적용이 되면 좋겠지만 몇가지 설정을 해주어야 한다

 

 

vscode 설정에서 사진의 설정이 해당 사진처럼 되어있는지 확인한다

 

이렇게 설정이 된다면 앞으로 저장할때 마다 자동으로 형식을 수정해줄것이다

// 저장전

const getDate = () => {
const date =    new Date()
return date
}

// 저장후

const getDate = () => {
  const date = new Date();
  
  return date;
};

 

위와 같이 좀더 깔끔하고 보기좋은 코드가 된다

 

.prettierrc.json 사용

prettier를 사용해 보기 좋은 코드를 만들면 가독성을 높여 편리하다 하지만 다른 사람들과 프로젝트를 할 때

서로 세팅되어있는 형식이 다르다면 오히려 보기 힘들것이다 이럴때 프로젝트에 .prettierrc.json을 이용하면 된다

 

.prettierrc.json를 root 폴더에 넣어두고 prettier 형식을 세팅해준다면 프로젝트에서 코드를 작성하고 저장을 하면

.prettierrc.json의 세팅에 맞게 형식을 수정해준다

 

그리고 .prettierignore라는 prettier 형식을 적용시키지 않을 파일들을 작성해주는 파일이 있다

 

// prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

 

위의 세팅은 현재 내가 참여하고 있는 프로젝트의 prettier 세팅인데 하나씩 보자면

 

singleQuote - "를 '로 바꾸는 설정

jsxSingleQuote - jsx 파일에서 "를 '로 바꾸는 설정

trailingComma - 배열, 객체 마지막 요소 뒤에 ,를 붙일지에 대한 설정

printWidth - 몇글자이상 작성시 줄바꿈 설정

 

마무리

최근에 클린코드가 뭐라고 생각하냐는 질문을 받았는데 prettier를 사용하면 클린코드를 작성하는데 도움이 될거 같다

그리고 또 요즘 프로젝트를 세팅하는것에 관심이 많아져서 prettier프로젝트 세팅을 알아봤다

조만간 eslint에 대해서도 자세히 알아보고 eslint와 prettier를 같이 세팅하는 방법을 블로그 작성해보려고 한다