프론트엔드

VSCode html 저장 시 자동정렬 되게 하기, 들여쓰기 사이즈 4칸 -> 2칸으로 수정하기

seomoon 2022. 4. 19. 19:16

1. VSCode 자동 정렬 단축키 (Mac) :

Option + Shift + f

 

2. VSCode html 저장 시 자동정렬되게 하기 : 

매번 단축키를 눌러서 정렬하기는 귀찮고 저장할 때마다 자동정렬을 하고 싶어서 찾아봤다. 

 

설정에서 format on save를 켜고, 

html default formatter를 Prettier -> html-language-features 로 변경한다. 

 

settings.json : 

  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },

 

Prettier를 default formatter로 사용하면, 

format on save가 작동되지 않는다. 

html 파일 default formatter를 기본 포매터인 html-language-features로 변경하면 잘 작동한다. (왜인지는 모름.. ) 

 

Prettier를 사용하면서 html format on save를 적용하는 방법이 있지 않을까 싶은데 더 찾아봐야 겠다. 

 

3. 들여쓰기 사이즈 조정하기 (4칸 -> 2칸) : 

나는 개인적으로 html 문서에서 2칸 들여쓰기를 선호하는 편이다. 

그런데 html 파일에 대해서는 4칸 들여쓰기가 기본으로 설정이 되어 있는건지 

탭을 눌렀을 때도 4칸이 입력되고, 자동정렬을 했을 때도 4칸으로 정렬이 된다. 

 

그러면 우선 1) Settings에서 Tab Size 항목을 2로 설정해주어야 한다. 

Tab Size를 2로 설정했는데도 4칸 들여쓰기가 된다면, 

2) Settings의 Detect Indentation 항목 체크를 해제해주면 2칸 들여쓰기가 적용된다. 

저작자표시