[VS Code] 프론트엔드 개발자를 위한 확장 프로그램 추천

안녕하세요, 블로그 주인장인 주니어 개발자 '하댑'입니다.

오늘은 개발자가 보다 편리하고 빠르게 개발할 수 있도록 도와주는 대표적인 IDLE 프로그램인 비주얼 스튜디오 코드(VS Code)에서 제공하고 있는 확장 (extension plugin) 추천드리려고 합니다. 특히 프론트엔드 개발을 하면서 작업하는데 도움이 될만한 (주관적인 추천) 확장 프로그램을 추천합니다.

비주얼 스튜디오 코드 설치하기

1) https://code.visualstudio.com/ 으로 이동합니다.

2) VSCode 홈페이지 중앙 좌측 파란색 다운로드 버튼을 선택합니다. 운영체제에 맞게 자동 설정되는데, 아니라면 드롭다운으로 선택해주세요.

3) 설치파일 다운로드가 완료되면 VSCode를 설치합니다.

VS CODE 확장 플러그인 추천

1) Live Server

Live Server - Visual Studio Marketplace

로컬에서 개발할 때 코딩의 수정 결과를 새로 고침없이 실시간으로 브라우저에서 확인할 수 있게 해줍니다. 웹 서버가 설정되지 않은 노트북에서 가상웹서버의 역할을 해줍니다. 서버 세팅을 하지 않고 스크립트 작성하는 분들께 꼭 필요한 확장프로그램입니다.

2) Prettier

Prettier - Code formatter - Visual Studio Marketplace

코딩 수정할 때 코드의 들여쓰기 줄바꿈 등을 코드 형식에 맞게 자동 정렬해주는 기능입니다.

3) Auto Complete Tag

Auto Complete Tag - Visual Studio Marketplace

HTML/XML 등 태그를 열면 닫는 태그를 자동 작성하고, 수정하면 동시에 자동 수정해주는 기능을 제공합니다.

4) Path Intellisense

Path Intellisense - Visual Studio Marketplace

파일이나 이미지 경로를 지정해줄 때 자동으로 경로를 선택해서 지정할 수 있게 도와줍니다.

출처: Visual Studio Marketplace

5) Color Highlight

Color Highlight - Visual Studio Marketplace

에디터에서 색깔 지정해줄 때 그림처럼 하이라이트해서 표기해주는 기능을 제공합니다.

6) Highlight Matching Tag

Highlight Matching Tag - Visual Studio Marketplace

어떤 태그가 서로 매칭되는지 확인할 수 있습니다. 기본값은 노란색 밑줄이지만, 색깔은 따로 설정할 수 있습니다.

7) Auto Import

Auto Import - Visual Studio Marketplace

리액트 개발할 때 많이 사용하는 확장 기능입니다. JSX, TSX, TS까지 모두 제공하기 때문에 import 하지 않은 모듈의 메소드를 불러오거나, 리액트 컴포넌트를 불러올 때 자동으로 import 구문을 찾아서 추천해줍니다.

8) Material Icon Theme

Material Icon Theme - Visual Studio Marketplace

파일 아이콘을 예쁘게 꾸며줍니다. 

이외에도 테마를 지정할 수 있게 해주는 'Material Theme', 깃 히스토리를 좀 더 쉽게 관리할 수 있게 도와주는 'GitLens', HTML/CSS 자동 완성 'HTML CSS Support', 작성한 CSS를 빨리 찾도록 도와주는 'CSS Peek',  리액트 사용할 때 코드 작성 자동 완성을 지원해주는 'Simple React Snippets' 등 

9) CodeSnap

CodeSnap - Visual Studio Marketplace

작성한 코드를 깔끔하게 캡처해서 이미지로 저장하고 싶을 때 사용합니다. 블로그 게시글 작성하거나 PPT 만들 때 유용하게 사용하고 있습니다. 

10) Code Spell Checker

Arabic - Code Spell Checker - Visual Studio Marketplace

코드 작성할 때 오타를 방지해주는 검사 도구입니다. 

이외에도 테마를 지정할 수 있게 해주는 'Material Theme', 깃 히스토리를 좀 더 쉽게 관리할 수 있게 도와주는 'GitLens', HTML/CSS 자동 완성 'HTML CSS Support', 작성한 CSS를 빨리 찾도록 도와주는 'CSS Peek',  리액트 사용할 때 코드 작성 자동 완성을 지원해주는 'Simple React Snippets' 등 다양한 플러그인을 제공하고 있으니 개발을 하시다가 정말 필요한 것들 위주로 하나씩 추가로 설치하는 것을 추천드립니다. 

 

 

VS CODE 편의 기능

1) Markdown Preview
VSCODE에서는 마크다운 파일을 미리 보고 싶을 때 오른편 'Markdown Preview'를 클릭하거나 MD파일을 우클릭하면 미리보기 기능을 사용할 수 있습니다.

2) 터미널에서 해당 폴더 VSCODE로 열기
VSCODE를 열고 cmd+shift+p 단축키를 이용해서 code 명령어를 PATH에 추가할 수 있습니다. 
이후에는 터미널에서 열고 싶은 파일 위치로 이동한 뒤, code . 명령어를 입력하면 VSCODE에서 바로 작업을 시작할 수 있습니다. 

3) Bracket Pair Colorizer
예전에는 확장프로그램으로 설치하던 기능인데, VSCODE 최신 버전 기준(22.08.22)으로 기본 제공하고 있습니다.