1. Prettier란😍?
Prettier는 간단하게 코드 스타일을 관리해주는 도구다.
코딩을 하다보면 혼자서 코딩을 하더라도 코딩이 일관성이 없어진다.
어디서는 ;을 잘 붙어 놓고 어디선 안 붙이고 혹은
for (let i = 0; i < 10; i++)
for (let i=0;i<10;i++)위 두줄은 같은 것을 의미하지만 육안으로 볼 때 확실히 달라보인다.
이렇게 코드가 일관성이 없다면 내 코드를 읽어도 짜증나는데 남의 코드를 읽거나 남이 이런 내코드를 읽으면 얼마나 화가 날까...🤬
이런 문제를 해결하기 위하여 태어난 것이 바로 Prettier이다. 나는 혼자 프로젝트를 할 때도 자주 사용하지만 다른 사람들과 협업을 할 때 더 빛을 발한다.
확실히 이름처럼 코드가 더 이뻐지는 것을 느낄 수 있을 것이다.🌻
2. Prettier 사용법💻
우선 우리 프로젝트에 Prettier를 설치해야한다.
npm i -D prettier
(저는 npm 유저여서 npm 기준으로 설명을 진행할께요...😅)
그 후에 prettier를 설정하기 위해 최상위 디렉터리에 .prettierrc파일을 만들어주세요.
그럼 해당 파일에서 여러가지 설정이 가능하답니다.😁
그러면 제가 자주 사용하는 것들 위주로 설명을 드릴께요.
singleQuote: 문자열 입력시 " 를 쓸지 ' 를 사용할지 설정할 수 있어요. 저는 ' 를 사용하기에 true로 설정해 놓았습니다.
semi: 세미콜론(;) 사용에 관한 설정이에요. 저는 사용하므로 true 로 놓고 사용해요.
tabWidth: 들여쓰기의 크기를 정할 수 있어요. 저는 2칸으로 놓고 써요. 4칸으로 놓고 쓰면 들여쓰기가 중첩될 시에 코드 뒷부분이 안보이는 경우가 생기더라구요....ㅜ
trailingComma: 객체 또는 배열이 여러줄로 구성되어 있으면 다음과 같이 맨 마지막 줄에 쉼표를 붙여줄지 설정할 수 있어요.
const object = {
a: 1,👈
b: 2,👈
};none 이면 쉼표를 붙이지 않고, es5 이면 객체, 배열을 사용하게 될 떄 쉼표를 붙이고, all 이면 함수를 사용 할 때 인자를 전달 할 때도 쉼표를 붙입니다.
printWidth: 줄 바꿈할 폭의 길이를 설정해줄 수 있어요.📏
저는 아래와 같이 설정해 놓고 사용합니다.
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
제가 주로 사용하는 옵션들 말고도 많이 있으니 Docs를 링크하도록 할께요.😉
3. 마치며
prettier는 정말로 코드의 질을 높여주는 것 중에 가장 가성비가 좋다. 이렇게 간단한데 코드는 정말로 43.1324배는 깔끔하고 이뻐진다. 정.말.로. 진심이다. 아직 사용하지 않는 분들이라면 꼭 한번 사용해보기를 추천한다.
💡직접 읽어보면 뼈가 되고 살이 되는 출처
👉https://react.vlpt.us/basic/27-useful-tools.html
👉https://velog.io/@kyusung/eslint-prettier-config
👉https://prettier.io/docs/en/options.html
