관리 메뉴

흰둥씨의 개발장

[IDE-vscode] 협업을 위한 툴 eslint와 prettier 함께 사용하기 본문

끙끙거린 흔적

[IDE-vscode] 협업을 위한 툴 eslint와 prettier 함께 사용하기

돈워리비해삐 2023. 8. 24. 22:17

eslint와 prettier는 각각 다른 기능을 제공한다.

eslint는 정적 코드 분석 툴로 문법적 문제 식별 등을 할 수 있고,

prettier는 코드 포맷터로 스페이스 설정, 들여쓰기 설정 등 코드 작성 양식을 동일하게 유지시켜준다.

이 두가지는 협업시 꼭 함께 사용하게되는데,

.eslintrc.js랑 .prettierrc를 작성했음에도 VScode에서 이 두가지 익스텐션이 작동하지 않기도 한다. 

그럴 때 vscode의 setting을 열고, setting의 json을 열어서 아래 두가지를 추가하면 eslint와 prettier를 함께 사용할 수 있게 된다. 

{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
}