Vue prettier 적용되지 않을 경우

프로젝트 환경이 모노레포로 구성되어 있다면 root에 위치한 eslint + prettier 설정 파일로 모든 프로젝트에 포맷팅을 맞춰줄 수 있다.

 

eslint, prettier는 모노레포라고 해서 별 다를 게 없고 설정해주면 되는데, React와 달리 Vue 같은 경우 settings.json에서 속성을 추가 하지 않으면 prettier 적용이 되지 않는 문제가 있어 조금 삽질을 많이 했었다. 

 

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },        
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },   
}

 

jsx, tsx는 위 값이 없어도 포매팅이 잘 적용되던데... 정확한 원인은 모르겠지만 우선 위 값을 settings.json에 추가해줄 경우

Vue 파일에서도 포매팅이 잘 적용되었다.