<div id="readability-page-1" class="page"><div id="site-main">

        <article>

            

            <figure>
            </figure>

            <div>
                    <h2 id="">문제</h2>
<p>최근 VS Code에 prettier 플러그인을 연동해서 매우 편하게 포맷팅을 하고 있다.</p>
<p>그런데 어느날부터 TypeScript를 작성하는데 &lt;와 &gt;로 표현한 제네릭 표현법이 이상하게 바뀌는 걸 확인하게 되었다.</p>
<p>증상은 아래와 같다.</p>
<pre><code>// 아래처럼 작성 후 prettier를 거치면
const [data, setData] = useState&lt;DataModel | null&gt;(null)

// 아래처럼 바뀐다
const [data, setData] = useState &lt; DataModel | null &gt; (null)
</code></pre>
<h2 id="">해결</h2>
<p>구글링 해보니, <a href="https://github.com/prettier/prettier-vscode/issues/420">https://github.com/prettier/prettier-vscode/issues/420</a> 이런 이슈를 발견했다.</p>
<p>해결법은 프로젝트 루트에 있는 <code>.prettierrc</code>에 있는 <code>parser</code> 옵션을 지우는 것. 해당 옵션을 지워야 prettier plugin이 언어를 제대로 추론해서 동작하는 듯.</p>
<p>해당 옵션을 제거 후 VS Code를 껐다 켰더니 문제가 해결 되었다.</p>
<blockquote>
<p>한줄요약: VS Code + TypeScript + Prettier 사용 시 <code>.prettierrc</code> 파일의 <code>parser</code> 옵션을 없애자.</p>
</blockquote>

                </div>


            

                

        </article>

    </div></div>

로토의 블로그

로토

문제
 사이에 공백이 들어가는 문제">
최근 VS Code에 prettier 플러그인을 연동해서 매우 편하게 포맷팅을 하고 있다.
그런데 어느날부터 TypeScript를 작성하는데 <와 >로 표현한 제네릭 표현법이 이상하게 바뀌는 걸 확인하게 되었다.
증상은 아래와 같다.
// 아래처럼 작성 후 prettier를 거치면
const [data, setData] = useState<DataModel | null>(null)
// 아래처럼 바뀐다
const [data, setData] = useState < DataModel | null > (null)
해결
구글링 해보니, https://github.com/prettier/prettier-vscode/issues/420 이런 이슈를 발견했다.
해결법은 프로젝트 루트에 있는 .prettierrc에 있는 parser 옵션을 지우는 것. 해당 옵션을 지워야 prettier plugin이 언어를 제대로 추론해서 동작하는 듯.
해당 옵션을 제거 후 VS Code를 껐다 켰더니 문제가 해결 되었다.
한줄요약: VS Code + TypeScript + Prettier 사용 시 .prettierrc 파일의 parser 옵션을 없애자.

VS Code에서 TypeScript와 prettier 사용 시 <와 > 사이에 공백이 들어가는 문제

댓글