[VSCode] Prettier format on save 느려진 후기

들어가며

코드 컨벤션은 협업에 있어서 아주아주 중요합니다. 그러고 이런 컨벤션은 필연적으로 자동화가 되어야합니다.

그렇지 않고 사람의 수고가 개입되면, 수고스러움이 귀찮은 누군가각 컨벤션을 깨드리게 되며 그 이후에는 더욱 빠른 속도로 악화됩니다.
( 공유지의 비극 , repo는 공유지임으로 더욱 신경써야한다)

그래서 자동화를 위해 eslint와 prettier란 툴이 가장 많이 쓰입니다.

이번 글에선 그중에 prettier에 대한 간단한 설명과 함께 적용방법, 그리고 느려진 prettier의 원인을 찾아본 내용을 적어보겠습니다.

Prettier 란?

• An opinionated code formatter - 코드 포멧터다
• Supports many languages - 많은 언어를 지원한다.
• Integrates with most editors - 많은 에디터에서도 지원한다.
• Has few options - 옵션이 적다

위의 특징을 가지고 개발된 코드 스타일 정리 도구입니다.

Prettier를 언제 사용하는가?

그냥 개발자라면 별일 없으면 사용합니다 라고 답해도 무방합니다. 협업을 하다보면 공통된 스타일이 유지보수하기에 좋기 때문에 거의 필수로 코드 스타일(컨벤션)를 정리하게 되어있습니다.

format on save 기능

prettier가 제공하는 여러 기능 중에 주로 쓰는 기능입니다.

기능명 그대로 코드를 save 할때 prettier의 formatter가 동작하여 설정된 format으로 맞춰주는 기능입니다.

갑분 스페인어??

비상!! prettier가 느려졌다

특정 파일만 그렇다면 해당 파일이 문제라고 생각했지만 어느 순간 수정하는 모든 파일에서 버벅임이 일어나서 개발하기가 불편한 상황에 이르게 됩니다.

그래서 원인을 하나씩 찾아보기로 합니다.

원인 1 | 파일이 너무 많아

FormatOnSave takes a long time · Issue #1333 · prettier/prettier-vscode

답변을 보시면 exclude에 특정 파일을 추가하라고 합니다.

저의 경우 next를 사용하고 있는데 빌드하게 되면 .next안에 빌드된 결과물이 생깁니다. 이 파일들에 대한 포멧팅을 매번 진행하다 보니 이런 문제가 발생한 듯합니다.

tsconfig.json 설정을 건드려보겠습니다.

해서 하이라이트한 부분에 대한 파일을 예외처리를 하고 나니 속도는 다시 원래대로 빨라졌습니다.

원인 2 | extension이 너무 많아

vsc에서 사용 가능한 extension은 여러 개발자 형누님들이 편리한 기능을 추가로 제공하기 위해 개발한 것입니다.

그 중에 저는 tailwind와 tabnine등을 사용하고 있었는데요.

현재 프로젝트에서는 tailwind를 사용하지 않고 tabnine 같은 ai 코드추천툴을 사용하지 않습니다. 다만 기본적으로 깔려있기 때문에 매번 함께 돌고 있었습니다.

그래서 현재 workspace에서 disable 시켜버렸습니다. 그리고 tabnine은 uninstall했는데요.

이 작업을 해주고 나니 다시 format on save가 빠르게 동작하는 것을 확인할 수 있었습니다.

 

익스텐션 심층분석 ( 2022.08.28 추가)

테일윈드 익스텐션들을 버리고 개발을 하고 있는 와중에 새로운 맥북을 받아 설치하고 개발을 하는데 어느순간 또 vsc가 느려진 나...

그동안 갈고 닦은 지식으로 이번엔 원인을 바로 찾아가보기로 합니다.

Show Running Extensions

vscode 에서 CTRL+SHIFT+P 누르고 Show Running Extensions를 눌러봅니다.

다음과 같은 화면이 나오고요

현재 vsc에서 리소를 가장 많이 잡아먹는 순으로 정렬되어 나옵니다.

짜란!!!

저는 Auto Import가 말썽이었네요. 3초 정도 걸리는 것이 보이시나요. 에러 마크도 있는걸 보니 뭔가 이상하니 일단 지웁니다.

네. 잘 동작하구요. Auto Import는 음,.. 이제 하나씩 import해보도록 하죠.

마치며

prettier가 현재 저장한 파일만을 읽고 바꾸면 된다고 생각했는데, eslint, tsconfig등의 다양한 설정과 맞물려 적절한 format인지 판단하는데 시간이 오래걸릴수 있다라고만 생각하고 있습니다.

뭔가 더욱 근본적인 원인을 찾아보고는 싶지만  근시안적인 판단으론 당장 속도가 빨라졌기에 이번엔 그냥 넘어가겠습니다 ( 이번 한번만 봐준다 prettier!!)

2022.08.28일자로 이제 원하는 익스텐션의 프로파일을 확인할 수 있게 되었습니다.

그러니 이 글을 읽고 계신 개발자 여러분들도 혹시 vsc가 느려졌는데 익스텐션이 원인인 것처럼 보인다면 이전의 저처럼 하나씩 제거하면서 확인하지 말고

멋지게 한큐에 원인을 바로잡아 해결해봅시다.

끝.