개요
Prettier는 코드 포멧터(Code formatter)로써, 코드의 스타일을 일관성있게 관리할 수 있도록 도와줍니다.
- Prettier: https://prettier.io/
이번 블로그 포스트에서는 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 Prettier를 설정하여 코드 포멧을 일관성있게 관리하는 방법에 대해서 알아보도록 하겠습니다.
블로그 시리즈
이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Vite의 시리즈 리스트입니다.
- [Vite] TypeScript 기반 React 프로젝트 시작하기
- [Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기
- [Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기
- [Vite] TypeScript 기반 React 프로젝트에 Stylelin(CSS-in-JS) 추가하기
Prettier 설치
Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 Prettier를 사용하기 위해서는 Prettier를 설치할 필요가 있습니다. 다음 명령어를 실행하여 Prettier를 설치합니다.
npm install --save-dev prettier
# yarn add -D prettier
Prettier 설정
설치한 Prettier를 사용하기 위한 Prettier를 설정할 필요가 있습니다. .prettierrc 파일을 생성하고 다음과 같이 수정합니다.
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"printWidth": 100
}
"semi": false: 마지막 세미콜론(;)을 사용하지 않습니다."singleQuote": true: 기본적으로 작은 따옴표(')를 사용합니다."jsxSingleQuote": true: JSX 문법에서도 기본적으로 작은 따옴표(')를 사용합니다."printWidth": 100': 한 줄에 작성할 수 있는 문자 개수를 100개로 제한합니다.
Prettier는 팀과 프로젝트에 따라 다양한 설정이 가능합니다. 다음 링크를 통해 설정이 가능한 옵션을 확인할 수 있습니다.
스크립트 설정
이렇게 설정한 Prettier를 사용하기 위해 package.json 파일을 열고 다음과 같이 스크립트를 추가합니다.
"scripts": {
...
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},
--ignore-path 옵션으로 .gitignore 파일을 선택함으로써, Git으로 관리하지 않는 파일들은 검사하지 않도록 설정할 수 있습니다.
실행
이제 다음 명령어를 사용하여 앞에서 설정한 Prettier의 내용으로 코드를 검사합니다.
npm run format
# yarn format
만약, 설정한 Prettier 옵션에 위반이 되는 파일이 있으면, 다음과 같이 표시됩니다.
Checking formatting...
[warn] .prettierrc.js
[warn] pages/api/hello.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
다음 명령어를 실행하면, 위반된 파일을 자동으로 수정할 수 있습니다.
npm run format:fix
# yarn format:fix
모든 파일이 수정되었다면, 다시 다음 명령어를 실행하여 검사합니다.
npm run format
# yarn format
모든 파일이 잘 수정되었다면, 다음과 같은 결과가 표시됩니다.
Checking formatting...
All matched files use Prettier code style!
완료
이번 블로그 포스트에서는 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 Prettier를 설정하는 방법에 대해서 알아보았습니다. 여러분도 Prettier를 설정하여 일관된 포멧으로 코드를 작성해 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)