<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react"><span itemprop="name">react</span></a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react/vite/react-typescript/prettier/"><span itemprop="name">[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88">블로그 시리즈</a></li><li><a href="#prettier-%EC%84%A4%EC%B9%98">Prettier 설치</a></li><li><a href="#prettier-%EC%84%A4%EC%A0%95">Prettier 설정</a></li><li><a href="#%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95">스크립트 설정</a></li><li><a href="#%EC%8B%A4%ED%96%89">실행</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><p><code>Prettier</code>는 코드 포멧터(Code formatter)로써, 코드의 스타일을 일관성있게 관리할 수 있도록 도와줍니다.</p><ul><li>Prettier: <a href="https://prettier.io/" rel="noopener" target="\_blank">https://prettier.io/</a></li></ul><p>이번 블로그 포스트에서는 <code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 <code>Prettier</code>를 설정하여 코드 포멧을 일관성있게 관리하는 방법에 대해서 알아보도록 하겠습니다.</p><h2 id="블로그-시리즈">블로그 시리즈</h2><p>이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 <code>Vite</code>의 시리즈 리스트입니다.</p><ul><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/start/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트 시작하기</a></li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/test/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기</a></li><li>[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기</li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/stylelint/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 Stylelint(CSS-in-JS) 추가하기</a></li></ul><h2 id="prettier-설치">Prettier 설치</h2><p><code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 <code>Prettier</code>를 사용하기 위해서는 <code>Prettier</code>를 설치할 필요가 있습니다. 다음 명령어를 실행하여 <code>Prettier</code>를 설치합니다.</p><div><pre><code>npm <span>install</span> <span>--save-dev</span> prettier
<span># yarn add -D prettier</span>
</code></pre></div><h2 id="prettier-설정">Prettier 설정</h2><p>설치한 <code>Prettier</code>를 사용하기 위한 <code>Prettier</code>를 설정할 필요가 있습니다. <code>.prettierrc</code> 파일을 생성하고 다음과 같이 수정합니다.</p><div><pre><code><span>{</span>
  <span>"</span><span>semi</span><span>"</span><span>:</span> <span>false</span><span>,</span>
  <span>"</span><span>singleQuote</span><span>"</span><span>:</span> <span>true</span><span>,</span>
  <span>"</span><span>jsxSingleQuote</span><span>"</span><span>:</span> <span>true</span><span>,</span>
  <span>"</span><span>printWidth</span><span>"</span><span>:</span> <span>100</span>
<span>}</span>
</code></pre></div><ul><li><code>"semi": false</code>: 마지막 세미콜론(<code>;</code>)을 사용하지 않습니다.</li><li><code>"singleQuote": true</code>: 기본적으로 작은 따옴표(<code>'</code>)를 사용합니다.</li><li><code>"jsxSingleQuote": true</code>: JSX 문법에서도 기본적으로 작은 따옴표(<code>'</code>)를 사용합니다.</li><li><code>"printWidth": 100'</code>: 한 줄에 작성할 수 있는 문자 개수를 100개로 제한합니다.</li></ul><p><code>Prettier</code>는 팀과 프로젝트에 따라 다양한 설정이 가능합니다. 다음 링크를 통해 설정이 가능한 옵션을 확인할 수 있습니다.</p><ul><li>공식 문서: <a href="https://prettier.io/docs/en/options" rel="nofollow noreferrer" target="\_blank">https://prettier.io/docs/en/options</a></li></ul><h2 id="스크립트-설정">스크립트 설정</h2><p>이렇게 설정한 <code>Prettier</code>를 사용하기 위해 <code>package.json</code> 파일을 열고 다음과 같이 스크립트를 추가합니다.</p><div><pre><code><span>"</span><span>scripts</span><span>"</span><span>:</span> <span>{</span>
  <span>...</span>
  <span>"</span><span>format</span><span>"</span><span>:</span> <span>"</span><span>prettier --check --ignore-path .gitignore .</span><span>"</span><span>,</span>
  <span>"</span><span>format:fix</span><span>"</span><span>:</span> <span>"</span><span>prettier --write --ignore-path .gitignore .</span><span>"</span>
<span>},</span>
</code></pre></div><p><code>--ignore-path</code> 옵션으로 <code>.gitignore</code> 파일을 선택함으로써, <code>Git</code>으로 관리하지 않는 파일들은 검사하지 않도록 설정할 수 있습니다.</p><h2 id="실행">실행</h2><p>이제 다음 명령어를 사용하여 앞에서 설정한 <code>Prettier</code>의 내용으로 코드를 검사합니다.</p><div><pre><code>npm run format
<span># yarn format</span>
</code></pre></div><p>만약, 설정한 Prettier 옵션에 위반이 되는 파일이 있으면, 다음과 같이 표시됩니다.</p><div><pre><code>Checking formatting...
<span>[</span>warn] .prettierrc.js
<span>[</span>warn] pages/api/hello.ts
<span>[</span>warn] Code style issues found <span>in </span>the above file<span>(</span>s<span>)</span><span>.</span> Forgot to run Prettier?
</code></pre></div><p>다음 명령어를 실행하면, 위반된 파일을 자동으로 수정할 수 있습니다.</p><div><pre><code>npm run format:fix
<span># yarn format:fix</span>
</code></pre></div><p>모든 파일이 수정되었다면, 다시 다음 명령어를 실행하여 검사합니다.</p><div><pre><code>npm run format
<span># yarn format</span>
</code></pre></div><p>모든 파일이 잘 수정되었다면, 다음과 같은 결과가 표시됩니다.</p><div><pre><code>Checking formatting...
All matched files use Prettier code style!
</code></pre></div><h2 id="완료">완료</h2><p>이번 블로그 포스트에서는 <code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 <code>Prettier</code>를 설정하는 방법에 대해서 알아보았습니다. 여러분도 <code>Prettier</code>를 설정하여 일관된 포멧으로 코드를 작성해 보시기 바랍니다.</p><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 Prettier를 추가하여 코드 포멧을 일관성있게 관리하는 방법에 대해서 알아보도록 하겠습니다.