1. VS Code 실행 후 확장 프로그램 설치
VS Code에는 VSCode는 코드 편집기지만 강력한 익스텐션(확장도구)을 제공해 개인화된 개발환경을 제공한다.
나의 개발환경을 위해 원하는 익스텐션을 설치해준다.
내가 설치한 Extensions
Indent Rainbow: 코드의 들여쓰기를 색상으로 구분하여 들여쓰기 오류를 쉽게 발견할 수 있게 해주는 플러그인
Better Comments: 주석을 카테고리별로 색상으로 구분해주는 플러그인
colorize: CSS 의 색상문자 코드에 배경색을 입혀 색상을 알아볼 수 있게 해주는 플러그인
Code Runner: 여러 언어(JavaScript, Python 등)의 코드를 VS Code 안에서 바로 실행할 수 있게 해주는 익스텐션.
Codex: 코드 작성 시 AI 보조 기능을 제공해주는 확장. 자동완성, 코드 힌트 등 개발 속도를 빠르게 도와준다.
HTML CSS Support: HTML 파일 작성 시 class나 id 에 맞는 CSS 자동완성 기능을 제공해 주는 확장. HTML과 CSS 연결 작업이 훨씬 쉬워진다.
HTML to CSS antocompletion: HTML에서 스타일을 작성할 때 CSS 속성 자동완성이 더 똑똑하게 작동하게 해주는 익스텐션. 빠르게 스타일링 진행할 때 좋다.
indent-rainbow: 들여쓰기 레벨마다 색을 다르게 표시해 주는 익스텐션. 들여쓰기 오류나 구조 파악에 매우 유용하다.
Live Preview: VS Code 안에서 HTML 파일을 브라우저처럼 즉시 미리보기로 확인하게 해주는 익스텐션. 파일을 수정하면 미리보기 화면도 바로 반영된다.
Live Server: HTML/CSS/JS 프로젝트를 로컬 서버로 띄워서 자동 새로고침(Live Reload)이 가능하게 하는 확장. 웹 개발할 때 가장 많이 쓰이는 필수 익스텐션 중 하나.
2. 설치된 예시 사진) Code Runner
before
after
오늘 학습한 내용
VS Code는 경량성과 확장성을 동시에 제공하여 개발자의 요구에 맞게 커스터마이징할 수 있는 코드 편집기 이다. 웹 개발, 백엔드 개발, 모바일 및 클라우드 개발 등 다양한 개발 환경에 적합하다. VScode Extensions을 통한 나만의 에디터를 만들 수 있다.
더많은 익스텐션을 확인하고 싶다면 ... ↓
