프론트엔드 개발자를 위한 Visual Studio Code 확장 프로그램(Extension) 설치 방법 및 추천

 

안녕하세요 😁

이번 포스팅에서는 Visual Studio Code에서 제가 유용하게 사용하고 있는 확장 프로그램을 추천해드리려고 합니다.

저는 홈페이지 관리를 하고 있어서 주로 HTML, CSS, JavaScript 코딩 작업들을 하고 있어서 프론트엔드 쪽 작업하시는 분들께 유용할 것 같아요~!

 

목차

 

Visual Studio Code 확장 프로그램(Extentions) 설치 방법

Visual Studio Code가 이미 다운로드 된 상태라고 생각하고 시작할게요!

우선 확장 프로그램 설치하는 방법부터 보여 드릴게요.

1. Visual Studio Code 좌측에서 아래 모양과 같은 아이콘을 클릭해주세요.

2. 검색창에 원하는 확장 프로그램명을 검색하고, Install 을 클릭해 주면 끝입니다. 엄청 간단해요!

 

---

 

Visual Studio Code 확장 프로그램(Extentions) 추천

1. Beautify

이건 정말 ‼️필수적인‼️ 확장 프로그램이에요. 이름 그대로 코드를 예쁘게, 들여쓰기(Indentation) 정리를 해줍니다.

 

2. vscode-icons

파일 별로 아이콘을 추가해주는 확장 프로그램입니다. 아이콘으로 파일을 구분할 수 있어서 편해요.

 

3. Auto Close Tag

HTML 작성 시, 닫는 태그를 자동으로 입력해줍니다. 시간 단축이 제법 많이 되는 것 같습니다!

 

4. Auto Rename Tag

태그를 수정하는 경우, 그 태그와 쌍을 이루는 태그도 수정해줍니다.

아래와 같이 동작합니다.

 

5. Color Highlight

코드 내에 입력된 색상 코드에 강조 표시를 해줍니다. 해당 색상 코드에 맞는 색상으로 강조 표시가 되어 은근히 편하더라구용 😊

 

6. Lorem ipsum

Lorem ipsum 을 자동으로 생성하여 입력해줍니다. 그런데 사실 VS Code 최신 버전에는 기본적으로 Emmet이 설치되어 있어서 lorem 입력하고 tab키를 누르면 Lorem ipsum 이 자동으로 입력되긴 해요 ㅎㅎ

 

7. CSS Peek

html에 적용되어 있는 css 의 위치를 찾아줍니다. html이랑 css 양쪽에 띄워놓고 찾아가는 수고로움을 덜어주는 기특한 칭구예요 👍🏻

 

8. Bracket Pair Colorizer

코딩 작업할 때 괄호.. 헷갈리실 때 많으시죠..? 얘가 해결해줄 거예요 😇

 

---

 

세상은 넓고 유용한 확장 프로그램은 정말 많은 것 같아요!

앞으로도 좋은 확장 프로그램을 발견하게 되면 추가해놔야겠어요 💡