⭐ Prettier란?
Prettier란 내가 작성한 코드를 보기 좋게, 또 일관성 있게 포맷팅을 해주는 도구다. 줄바꿈이나 들여쓰기 간격, 세미콜론을 사용할 것인지, 큰따옴표를 쓸 것인지 혹은 작은 따옴표를 쓸 것인지를 설정해서 내가 파일을 저장할 때마다 형식에 맞게 보기 좋게 정렬을 해준다.
예시를 보여주자면
이렇게 들여쓰기도 엉망으로 되어 있고 세미콜론도 없는(자바스크립트에서는 필수가 아니긴 하지만) 이 파일을 저장하는 순간!
이런 식으로 알아서 내가 원하는 포맷팅 형식에 맞게 정리한 후 저장을 해주는 거다. 편리하고, 가독성도 좋아지기 때문에 많은 사람들이 이 도구를 사용한다.
❤️ Prettier 설정하기
이제 차근히 Prettier 옵션을 내가 원하는 대로 설정해보자.
1. VS code의 Extension에서 Prettier 설치
VS Code의 Extension에서 먼저 Prettier 확장 프로그램을 설치해준다. 여러 개가 나올 텐데 가장 위에 있는, 즉 사진과 같은 익스텐션을 설치해주자.
2. Setting 설정
먼저 Ctrl + ,를 동시에 눌러 vscode의 설정에 들어가준다.
Editor: Default Formatter을 검색란에 입력 후 해당 설정을 Prettier로 설정해준다.
그 다음 Editor: Format on save mode를 검색 후 체크해준다. (파일을 저장할 때마다 자동으로 prettier 실행하도록)
마지막으로 Prettier를 검색 후 원하는대로 설정해주면 된다. 각 옵션이 어떤 걸 의미하는지는 뒷부분에서 설명할 예정이다.
만약 모든 프로젝트에 동일한 Prettier를 설정할 예정이라면 위와 같이 설정하고 끝내도 무관하다. 하지만 각기 다른 프로젝트에 다른 포맷팅을 적용하고 싶을 때가 있다. 또한 협업을 진행하게 된다면 팀 컨벤션에 맞추어 Prettier 설정이 달라지기도 한다. 보통 이럴 때는 .prettierrc라는 설정 파일을 생성하여 해당 파일에 원하는 포맷팅 형식을 저장한다. 이후에 다룰 내용이 바로 이 파일을 생성하고 원하는 옵션을 적용해보는 것이다.
3. .prettierrc 파일로 개별 옵션 설정하기
3-1. prettier 설치
먼저 npm을 통해서 prettier를 설치해준다. prettier는 배포에 무관한 개발 관련 패키지 이기 때문에 --save-dev 옵션을 추가해서 설치해주면 된다.
npm i --save-dev prettier
이렇게 devDependencies에 정상적으로 prettier가 설치된 것을 볼 수 있다.
3-2. .prettierrc 파일 생성
가장 루트 폴더에 .prettierrc 파일을 하나 생성해준다. 그리고 원하는 Prettier 옵션을 추가해서 설정해준다.
물론 우리가 vscode 내 세팅란에서 prettier 설정을 완료했지만, vscode 세팅에서 설정한 값보다 .prettierrc 파일의 적용 순위가 더 높기 때문에 기존 설정값이 무시되고 .prettierrc에서의 설정값이 적용된다. 따라서 보통 협업할 때에도 해당 파일을 사용해서 팀 컨벤션을 적용하곤 한다.
옵션에 대해서는 따로 추가를 해두었지만, 가장 자주 쓰는 몇 가지만 예시로 보여주고자 한다.
먼저 기본으로 설정한 .prettierrc를 적용했을 때의 파일이다. 여기서 이제 tabWidth 설정을 바꿔보자. 참고로 tabWidth는 들여쓰기 시 공백을 얼만큼 줄 것인지 설정하는 옵션이다. 기본적으로는 4로 설정이 되어 있는데 난 이게 너무 넓다고 생각해서 보통은 2~3으로 줄여서 사용하는 편이다.
이렇게 파일을 수정하면 위 예시처럼 들여쓰기 간격이 확연히 줄어든 걸 확인할 수 있다.
그 다음으로는 세미콜론을 추가할지의 여부도 선택할 수 있는데, 자바스크립트는 세미콜론을 쓰지 않아도 무방하다. 다만 내게 있어서는 습관이기도 하고 과거에는 대부분 세미콜론을 붙이는 경향이 대다수였기 때문에 나는 보통 true로 설정해둔다. 근데 보면 최근에는 코드를 가독성 좋고 깔끔하게 작성하는 것을 선호하기 때문에 세미콜론을 일부러 붙이지 않는 경우도 많다고 한다. 이건 취향 차이일 것 같으니 개인 성향에 맞게 요령껏 조절해주면 될 것 같다.
해당 파일을 저장 후 확인해보면 기존의 세미콜론들이 전부 사라진 걸 확인할 수 있다.
4. .prettierignore 파일 생성하기
Git을 자주 사용하는 개발자라면 .gitignore 파일에 대해 다들 익숙할 것이다. .prettierignore 파일 또한 .gitignore 파일과 비슷한 역할을 한다. 말 그대로 prettier가 적용되지 않을 파일을 설정해두는 것이다.
나는 예시로 작성한 파일 하나와 패키지 파일들에는 prettier가 적용되지 않도록 설정했다.
확인해보면 해당 파일들에는 내가 설정해둔 Prettier 옵션이 적용되지 않는 것을 확인할 수 있다!
✨ Prettier 옵션 뜯어보기
{
"arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부
"bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입할지 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 한 줄에 출력되는 코드의 최대 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 간격
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}위 옵션들은 아래 정리된 블로그에서 발췌했다. Prettier 외에도 ESLint에 대해서 잘 정리해주셔서 도움이 많이 되었으니 다들 한 번 쯤 읽어보는 걸 추천한다!
🌸 Prettier 옵션을 확인해보자
사실 위에 정리해두긴 했지만 글로만 정리되어 있다 보니 정확히 어떤 옵션이 무엇을 뜻하는지 알기 어려울 때도 있다. 내가 원하는 옵션을 눈으로 확인하면서 직접 .prettierrc를 작성하고자 할 때 아래 사이트가 큰 도움이 될 것이다.
위 사이트에 접속하면 우상단에 Playground라는 메뉴가 보인다. 해당 메뉴를 클릭해서 들어가자.
그러면 위 사진처럼 옵션을 하나씩 수정해가면서 결과물을 눈으로 확인할 수 있다.
원하는 옵션을 전부 선택하면 하단에 위 사진과 같은 메뉴가 뜰 텐데, 여기서 Copy config JSON을 클릭하자. 그러면 우리가 방금 눈으로 보며 설정한 prettier 옵션을 손쉽게 우리의 프로젝트 내에서 사용할 수 있다.
{
"arrowParens": "always",
"bracketSameLine": true,
"bracketSpacing": true,
"semi": false,
"experimentalTernaries": false,
"singleQuote": true,
"jsxSingleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"singleAttributePerLine": false,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"proseWrap": "preserve",
"insertPragma": false,
"printWidth": 80,
"requirePragma": false,
"tabWidth": 4,
"useTabs": false,
"embeddedLanguageFormatting": "auto"
}복사한 내용을 .prettierrc 파일에 붙여넣기 해주면 우리가 원하는 옵션으로 prettier 설정이 손쉽게 완료되었다!
