1. Korean Language Pack for Visual Studio Code
한국어 버전으로 보여주는 확장프로그램이다.
2. Prettier - Code formatter
코드를 작성하고 저장(Ctrl + S)을 누르면 코드를 자동으로 정렬해주는 확장프로그램이다.
저장하여 코드를 정렬하기 위해서는 아래의 설정이 필요하다.
1. 비주얼 스튜디오 코드의 왼쪽 하단의 톱니바퀴를 눌러 '설정'에 들어간다.
2. editor format 검색한다.
3. Editor: Default Formatter에 '없음(null)'로 되어있는것을 'Prettier - Code fomatter' 로 변경한다.
4. Editor: Format On Save에 체크 표시를 한다.
4. Material Theme
비주얼 스튜디오 코드의 테마를 변경하는 확장프로그램이다.
색 테마 설정을 클릭하면 테마를 설정할 수 있다.
5. Material Icon Theme
아이콘을 변경해주는 확장프로그램이다.
코드 파일의 아이콘을 보고 쉽게 구별할 수 있다.
5. Auto Rename Tag
HTML 코드를 작성할 때 태그를 자동으로 수정 및 작성 해주는 확장프로그램이다.
닫는 태그를 자동으로 작성해주고, 하나의 태그만 수정해도 자동으로 나머지 태그를 같이 수정해준다.
6. indent-rainbow
들여쓰기의 색상을 지정하는 확장프로그램이다.
단계별로 4가지 색상으로 번갈아가며 지정함으로써 가독성이 좋아진다.
7. Rainbow Brackets
브라켓 { } 의 색상을 변경해주는 확장프로그램이다.
8. Image preview
이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장프로그램이다.
9. px to rem & rpx & vw (cssrem)
px로 작성한 값을 rem, rpx, vw 단위로 변경할 수 있는 확장프로그램이다.
| px -> rem | Alt + z |
| rem -> px | Alt + z |
| px -> rpx | Alt + r |
| rpx -> px | Alt + r |
| px -> vw | Alt + v, Alt + w |
| vw -> px | Alt + v, Alt + w |
10. Color Highlight
색을 설정하는 코드(rgb 또는 16진수의 색상)를 입력하면 해당 코드의 색상을 배경 색상으로 보여주는 확장프로그램이다.
11. Path Intellisense
파일이나 이미지의 등의 경로를 지정할 때 자동으로 경로를 보여주고, 이를 선택해서 지정할 수 있는 확장프로그램이다.
10. Live Server
HTML 코드를 브라우저로 쉽게 확인하게 해주는 확장프로그램이다.
html 파일에서 마우스를 우클릭 한 뒤, 'Open with Live Server'를 클릭하면 바로 웹 브라우저에서 해당 코드 화면을 확인할 수 있다.
