Prettier를 vscode extension으로 사용할 때와 npm 패키지로 사용할 때의 차이점?

 

 

원문

---

https://stackoverflow.com/questions/61925900/what-is-the-difference-between-installing-prettier-as-a-npm-package-and-installi

 

what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code

 

 

 

 

 

 

번역

---

 

⛳ 질문

 

저는 웹 프로그래밍을 이제 막 시작한 신예고, npm i -D prettier 를 타이핑하여 prettier를 코드를 포매팅하기 위해 devDependency로 추가할 수 있다는 사실을 배웠습니다. 그 이후 저는 완전히 똑같은 작업을 수행하는 vscode용 익스텐션인 prettier가 있다는 것을 발견 했습니다.

도대체 둘의 차이가 뭐인지 모르겠습니다.

만약 내가 익스텐션만 설치해도 npm 패키지 prettier가 깔려있지 않은 코드베이스에서도 코드 포매팅을 할 수 있는건가요??

아니면 이 둘의 구성 프로세스가 다른 걸까요? 어떤 버전이 선호되는걸까요?

 

 

👩‍💻 답변

 

🎈채택 답변🎈

 

 

기능적으로 둘의 차이는 없습니다. 동일하게 작동합니다.

 

 

vscode 익스텐션 Prettier는 ( Pertty Formatter 이야기가 아닙니다. 그건 다른거에요 ) npm 패키지 prettier의 최신 사본을 포함하고 있습니다. 만약 당신이 npm을 통해 패키지를 하지 않았더라면 기본적으로 적용되게 되는겁니다. Prettier Resolution의 페이지 섹션을 확인해보세요

 

 

저는 한 가지 예시를 통하여 왜 익스텐션이 아니라 npm으로 prettier를 써야하는지 알려드리고 싶습니다.

 

 

당신이 팀으로 일하고 있고, 팀원 모두가 동일한 버전의 prettier를 사용하길 원한다고 가정해봅시다. vscode 익스텐션을 사용한다면 모든 사람이 동일한 버전을 사용하게 하는 것은 꽤나 어려울 것입니다. 개발자들은 자체적으로 버전 관리를 해야할 것이며, 동일한 버전으로 유지하는 것은 ( 만약 필요하다면 ) 어려운 일입니다. 하지만 만약 npm을 사용한다면, 레포지터리 안의 package.json/lock 파일 덕분에 쉽게 동일 버전을 유지할 수 있을 것입니다. 만약 특정 버전으로의 업데이트가 필요하다면 단순히 `npm install`을 타이핑 하고, 모든 사람을 동일선상에 놓을수 있겠지요. prettier와 같은 경우는 이러한 것이 별로 중요하지 않을 수 도 있겠지만, 버전 업데이트에 따라 큰 변화가 있는 패키지의 경우에는 중요한 문제가 될 수 있겠네요.

 

 

그래서 당신의 질문에 답변을 드리자면,

 

만약 내가 익스텐션만 설치해도 npm 패키지 prettier가 깔려있지 않은 코드베이스에서도 코드 포매팅을 할 수 있는건가요?? 

 

vscode 익스텐션을 사용한다면 모든 파일을 포맷팅하는데 사용할 수 있습니다. 만약 프로젝트에 npm package가 깔려있지 않은 경우, 익스텐션이 빌트인 디폴트 패키지로서 사용될 것입니다.

 

 

아니면 이 둘의 구성 프로세스가 다른 걸까요? 어떤 버전이 선호되는걸까요?

 

둘 다 `.prettierrc`라는 작은 크기의 설정 파일을 사용합니다. vscode 익스텐션 버전은 에디터와 어떻게 상호작용하는지에 관한 추가적인 설정이 붙어있습니다 . (역주 : format on save와 같은 에디터 레벨의 설정을 관리하는 부분을 말함 )

또한, 만약 당신이 특정 버전의 Prettier가 필요하거나, 커맨드라인에서 실행시켜야할 필요가 있다면, 그때 npm 패키지로서 당신의 레포지토리에 설치하면 됩니다. 이 두가지는 상호배타적인 옵션이 아닙니다.