Visual Studio Code 유용한 Plugin

플러그인 설치 방법

좌측 사이드바에서 Extension을 누르고 원하는 플러그인을 검색창에서 검색 후 install을 누르면 설치할 수 있다. 

 

 

1. Auto Rename Tag

html 작성 시 태그를 변경해야 하는 경우 일반적으론 여는 태그와 닫는 태그를 일일이 수정을 해야 하지만 Auto Rename Tag 플러그인을 설치하면 둘 중 하나만 수정을 해도 동시에 수정이 돼 유용한 플러그인입니다.

 

 

2. Bracket Pair Colorizer2

코드를 작성하다 보면 괄호가 여러 개 겹치는 경우가 있어서 헷갈리는 경우가 종종 있다. Bracket Pair Colorizer2는 괄호마다 색을 다르게 하여 구분시켜준다. 버전 1과의 차이점은 속도가 향상된 것이라 한다. 

 

 

3. Prettier - Code formatter

Code formatter는 우리가 코드를 더럽게 작성하면 그 코드들을 양식에 맞게 자동으로 정렬해 주는 플러그인이다. Code formatter에는 대표적으로 Prettier와 Beautify가 있다. 두 플러그인의 차이점은 Prettier는 정해진 형식을 중요시해 코드를 강제적으로 변경을 시키고 Beautify는 조금 더 자유롭게 코드를 정렬해 자신만의 코드 작성 규칙을 가지고 있는 사람에게 유용하다. 나는 아직 나만의 코드 작성 규칙이 없기에 Prettier를 설치하였다.

 

 

4. Highlight Matching Tag

태그가 여러개 중첩되어 있을 때 각 태그의 끝이 어디 있는지 한 번에 찾기 어려울 때가 종종 있는데 그럴 때 짝이 되는 태그를 같이 표시해 주는 플러그인이다. 

 

 

5. Indent-rainbow

코드를 작성할 때 들여쓰기를 계속하다 보면 어느 순간 들여 쓰기가 헷갈리는 경우가 있다. 이때 들여 쓰기 한 부분을 색깔별로 구별해주는 유용한 플러그인이다. 

 

 

6. HTML CSS Support

웹 페이지를 제작하는 코드에서 html로 작성하다가 css 기능을 넣고 싶을 때가 있다. 이럴때 해당 html 문서에 적용해야 하는 CSS를 직접 작성하는 것이 아닌 추천해주는 기능을 통해 시간을 단축시킬 수 있는 플러그인이다. 

 

7. Live Server

우리는 코딩할 때 우리가 작성하고 있는 코드가 어떻게 적용되고 있는지 실시간으로 확인을 해야 한다. 그럴 때마다 브라우저를 직접 켜서 확인하다 보면 번거로움이 있는데 Live Server를 사용하면 우측 하단에 Go Live라는 아이콘을 통해 현재 소스파일을 브라우저에서 실시간으로 확인할 수 있다.