비쥬얼스튜디오 유용한 익스텐션

1. prettier - 코드를 깔끔하게 정리해 줌

• 설치 후 setting창 이동 (단축기 [ctrl + , 맥os는 command + , ] -> setting)
• save 검색후 format on save 체크
  
  
• 들여쓰기가 많아질수록 복잡해지기 때문에 tap Width를 기본설정 값인 4 대신 2로 바꿔줌
  

2. indent-rainbow - 들여쓰기마다 다른 색 적용

• 들여쓰기가 명확하게 보임

3. Auto Rename Tag - 태그 자동 변경

• 태그 이름 변경시 앞 태그를 바꾸면 뒤에 태그가 자동으로 바뀜

4. CSS Peek

• HTML에서 ctrl 누른상태에서 클래스나 아이디명 클릭하면 CSS 파일의 해당 태그로 이동함

5. HTML CSS Support

• html에서 정의된 클래스명이나 id명이 자동완성되어 보여짐

6. HTML to CSS autocompletion

• HTML에서 정의된 클래스나 아이디 명이 CSS에서 자동완성되어 보여짐

7. Live Server

• 코드 편집시 실시간으로 브라우져에 반영됨

8. markdown open preview

• 비쥬얼 스튜디오에 내장되어 있는 기능으로 READ.ME 같이 markdown으로 작성한 파일의 미리보기가 가능함
• 커멘트 팔레트(ctrl + shift + p)에서 markdown open preview 검색하면 됨 혹은 단축키 (ctrl + shift + v)