[Vue] vetur beautify 들여쓰기 설정하는 법

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

최근 vue를 공부하면서, vs code의 vue관련 확장인 vetur를 설치해 코딩하다가 매우 거슬리는 것을 발견했습니다.

코딩하다가 beautify를 했더니, 위와 같이 indent가 2칸으로 되는겁니다..

평소에 indent를 4칸으로 해놓는지라, 매우 거슬려서 이리저리 찾아보았습니다.

설정창을 열어서 vetur로 검색하니 주르륵 나옵니다.

formatter관련 default설정을 보니 포멧터로 prettier라는 녀석을 사용하나 봅니다.

그러나 저는 prettier라는 확장을 설치하지 않았기 때문에, 설정창에 prettier로 찾아봐도 vetur설정밖에 나오지 않았습니다.

그래서 제가 현재 사용중인 beautify로 설정하려고 했습니다만..

위와 같이 valid value가 non, prettier, vscode-typescript밖에 없습니다.

(그와중에 오타났네요..)

none으로 하니 beautify가 되지 않아서, vscode-typescript로 설정해봤습니다.

추가로, 위의 설정 스샷에서 eslint.validate배열에 vue를 추가해주셔야 합니다.

    

그랬더니 위와 같이 거슬리던 2칸 indent가 4칸 indent로 적용되었습니다.

vetur공식 홈페이지를 뒤적거려도 영어를 원체 못하는지라.. 이리저리 해메다가 결국 고쳤습니다.

---

vetur공식 홈페이지를 다시 뒤져보니 더 간편한 방법이 있었네요.

{
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false
}

vs code json설정창에서 해당 설정을 수정하시면 됩니다.