문제

최근 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 옵션을 없애자.