Visual Studio Code 웹개발을 위한 필수 익스텐션 10가지

1. Material Theme

• 테마 정하기

2. Marterial Icon Theme

• 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜

3. Prettier - Code formatter

• 코드 포멧팅
• ctrl + 눌러서 setting 창으로 이동
• JavaScript/TypeScript > Preferences: Quote Style을 single로 변경하는것을 추천

4. Bracket Pair Colorizer

• 괄호마다 코드에 색깔을 다르게 줌

5. Indent-rainbow

• 들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시
• 코드 읽을 때 도와줌

6. Auto Rename Tag

• 앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌

7. CSS Peek

• html에서 css를 금방 찾게해줌
• html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 정의된 css파일로 이동하게 해줌.

8. HTML CSS Support

• html에서 css의 자동완성을 이용하게 해줌

9. Live Server

• html이나 css 수정 시 브라우저창에 새로고침하는 것을 없애줌.
• 커맨드 팔렛트에 > live Server: Open with Live Server 입력하고 숏컷키 후 실행

10. HTML to CSS autocompletion

• html에서 정의한 class를 css에서 자동완성하게 해줌
  
  
  현업에서 간단히 html, CSS의 결과를 확인할 때 유용한 사이트

• jsbin.com

• jsfiddle.net

• codesandbox.io