VS code 유용한 extension 10가지

 

 

비쥬얼 스튜디오 필수 익스텐션 10개 

 

VS code 에디터 사용을 도와주는 익스텐션 설치법은 왼쪽 아래와 같은 익스텐션 텝을 클릭하고 원하는 테마 명을 검색학고 install 버튼을 클릭하면 설치가 된다. 

 

 

 

 

Material theme

 

VSCode를 실행하고 왼쪽 아래 확장 프로그램 아이콘을 클릭합니다. 이후 검색창에 theme를 검색하면 가장 먼저 등장하는 Meterial Theme를 선택하고 오른쪽 화면의 설치를 클릭합니다. 여기서는 설명하지 않았지만 검색 목록상에 있는 Material Icod Theme도 같은 방법으로 설치해주세요. 파일들의 아이콘을 예쁘게 바꾸어 줍니다. 

 

 

 

Material icon theme: 설치 후 왼쪽 하단 설정 아이콘(톱니바퀴) 클릭 > File Icon Theme에서 Material Icon Theme 선택

 

Prettier

설명 : 파일 저장 시 알아서 포맷에 맞게 소스 코드가 보기좋게 정렬 됨

사용법 : 설치 후 Setting화면 (Ctrl + ,) 에서 "Format on Save" 입력 후 체크해 줌 (사용안 할 경우 다시 체크 해제) 

 

Bracket pair colorizer

 

Indent-rainbow: 들여 쓰기를 색상으로 표시

 

Auto rename tag : HTML, XML, php 등 태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그의 이름이 자동으로 바뀝니다.

 

CSS PEEK: html파일에서 css파일을 금방 찾게해줌 (컨트롤키를 누른 상태로 html요소를 클릭시 정의된 css파일로 이동)

 

HTML CSS SUPPORT

 

LIVE SERVER :  

html 소스등의 내용을 실시간으로 서버로 띄워 화면에 표시해준다. html 소스 수정 시 실시간 반영

사용법 : 설치 후 하단의 Go Live 클릭 또는 마우스 오른쪽 버튼 클릭하여 "Open with Live Server" 메뉴 클릭 

 

 

아래는 지금 사용하고 있는 Extension

 

Material Theme : vscode의 테마를 설정

Material Icon Theme : 파일등 아이콘들의 테마가 변경

Bracket Pair Colorizer : 괄호에 색을 입혀 중첩 상황에서 구별을 쉽게 해줌

Auto Rename Tag : 앞에 태그를 바꿀 시 뒤의 태그를 자동으로 바꿔줌

Auto Close Tag : 앞에 태그를 생성 시 자동으로 닫는 태그 생성

Css Peek : html파일에서 css파일을 금방 찾게해줌 (컨트롤키를 누른 상태로 html요소를 클릭시 정의된 css파일로 이동)

html css support : html에서 자동적으로 css관련 태그를 완성시켜줌

Live Server : 새로고침 없이 자동으로 브라우저화면을 업데이트

Color Highlight : 색상코드에 배경색으로 해당색상을 입힌다

Code Spell Checker : 맞춤법을 검사해준다

translator : 한영번역을 해줌