2단계: 코딩 속도를 3배 높여주는 필수 확장 프로그램
VS Code의 진정한 힘은 '확장 프로그램(Extensions)'에서 나옵니다. 초보자가 코딩할 때 오타를 줄여주고 실시간 결과를 바로 보여주는 5가지 핵심 확장 도구를 설치해봅니다.
확장 프로그램 설치 탭 여는 단축키
VS Code에서 Ctrl + Shift + X (Mac: ⌘ + ⇧ + X) 를 누르면 좌측에 검색창이 열립니다. 아래 추천 도구 이름을 그대로 검색하여 [Install]을 누르세요!
Live Server ★★★★★
웹 개발 초보자 1순위 필수품! 코드를 수정하고 저장(Ctrl+S)하면 브라우저가 알아서 새로고침되어 변경사항을 실시간으로 확인시켜 줍니다.
Prettier - Code formatter
들여쓰기나 줄바꿈이 엉망이어도 저장할 때 완벽하게 표준 코드로 자동 정렬해줍니다. 초보자의 가독성과 코딩 습관을 완벽하게 잡아줍니다.
Material Icon Theme
밋밋한 탐색기 파일 목록을 .html(주황 태그), .css(파란 스타일), .js(노란 JS) 등 직관적인 예쁜 아이콘으로 바꾸어 프로젝트 구조를 한눈에 파악하게 해줍니다.
Auto Rename Tag
여는 태그 <h1>을 <h2>로 수정하면 닫는 태그 </h1>도 동시에 자동으로 수정됩니다. 태그 불일치 에러를 100% 방지합니다.
Color Highlight
CSS에서 #0078d4, rgb(255,0,0) 등 컬러 코드를 작성하면 에디터 배경에 실제 색상을 입혀주어 어떤 색인지 바로 눈으로 볼 수 있습니다.
Prettier를 '저장할 때 자동 정렬'로 연동하기
Prettier는 설치만 하고 끝나는 게 아니라 기본 포맷터 지정 + 저장 시 자동 정렬을 켜두어야 진가를 발휘합니다.
-
1
설정창 열기
단축키 Ctrl + , (Mac: ⌘ + ,)를 누릅니다.
-
2
기본 포맷터(Default Formatter) 지정
검색창에
default formatter를 입력하고, 드롭다운에서 Prettier - Code formatter를 선택합니다. -
3
저장 시 서식 지정(Format On Save) 켜기
검색창에
format on save를 검색하고 ☑ Editor: Format On Save 체크박스에 체크합니다.