-
Auto Import: 이 확장 프로그램은 작성 중인 코드와 관련된 모듈을 자동으로 import 해줍니다. 예를 들어, React 컴포넌트를 작성할 때 'Component'를 입력하면, 자동으로
import React, { Component } from 'react'를 추가해줍니다. -
Auto Rename Tag: HTML, XML, JavaScript React 등의 언어에서 열린 태그의 이름을 변경하면 닫힌 태그의 이름도 자동으로 변경해주는 확장 프로그램입니다. 이로써 태그 입력 오류를 줄일 수 있습니다.
-
Bracket Pair Colorizer Toggler: 해당 확장 프로그램은 코드 내의 괄호 쌍을 다른 색상으로 표시해주어, 괄호의 쌍을 쉽게 확인할 수 있게 해줍니다. 이는 복잡한 코드를 이해하고 디버깅하는데 도움이 됩니다.
-
Code Runner: 이 확장 프로그램은 코드 편집기에서 직접 코드를 실행하고 결과를 확인할 수 있게 해줍니다. 지원하는 언어는 40개 이상으로 굉장히 다양합니다.
-
CSS Peek: HTML 파일에서 CSS 선택자에 마우스를 올리면, 해당 선택자의 CSS 스타일을 미리 볼 수 있게 해주는 확장 프로그램입니다. 이로써 HTML과 CSS 사이를 오가며 스타일을 확인하는 수고를 덜 수 있습니다.
-
ESLint: 이 확장 프로그램은 자바스크립트 코드의 문법 오류나 코딩 스타일 문제를 미리 찾아주는 Lint 도구입니다. 코드의 품질을 향상시키는 데 도움이 됩니다.
-
Git History: 이 확장 프로그램은 Git 커밋 히스토리와 이전 커밋과의 차이점을 시각적으로 보여줍니다. 이를 통해 프로젝트의 변경 사항을 쉽게 추적할 수 있습니다.
-
GitLens - Git supercharged: GitLens는 Git의 기능을 확장하여, 누가, 언제, 왜 변경했는지를 쉽게 파악할 수 있게 해줍니다. 또한, 코드 블럭에 대한 Git 블레임 애너테이션과 히스토리 탐색 기능 등을 제공합니다.
-
HTML CSS Support: 이 확장 프로그램은 HTML 파일에서 CSS 클래스나 ID를 자동완성해주고, CSS 파일에서도 이를 자동완성해줍니다. 이로써 HTML과 CSS 작성을 보다 수월하게 해줍니다.
-
indent-rainbow: 이 확장 프로그램은 코드의 들여쓰기 레벨별로 다른 색상을 표시해줍니다. 이를 통해 코드의 구조를 한 눈에 파악하는 데 도움이 됩니다.
-
Live Server: 이 확장 프로그램은 로컬 개발 서버를 생성하여, 변경 사항을 실시간으로 브라우저에 반영해줍니다. 이를 통해 개발 과정에서 변경 사항을 즉시 확인할 수 있습니다.
-
Material Icon Theme: 이 확장 프로그램은 파일 탐색기에서 파일 유형별로 다른 아이콘을 표시해줍니다. 이를 통해 파일 유형을 쉽게 구분할 수 있습니다.
-
Prettier - Code formatter: Prettier는 코드의 형식을 자동으로 맞춰주는 도구입니다. 이를 통해 코드의 일관성을 유지하고, 팀원 간의 코드 스타일 충돌을 방지할 수 있습니다.
-
Reactjs code snippets: 이 확장 프로그램은 자주 사용하는 React 코드 패턴을 빠르게 입력할 수 있도록 도와줍니다. 이를 통해 React 개발을 보다 효율적으로 할 수 있습니다.
-
Tailwind CSS IntelliSense: 이 확장 프로그램은 Tailwind CSS의 클래스 이름을 자동 완성해주고, 잘못된 클래스 이름을 표시해줍니다. 또한, 적용된 스타일을 미리 볼 수 있게 해줍니다. 이를 통해 Tailwind CSS를 보다 쉽게 사용할 수 있습니다.