[JavaScript] Web 개발을 위한 JavaScript (1) - Visual Studio Code 설치 + Extension 꿀팁 + Material Theme + Material Icon Theme + Prettier + Bracket Pair Colorizer + indent-Rainbow + Auto Rename Tag + CSS PEEK + HTML CSS Support + Live Server + ..

 Visual Studio Code 설치 + Extension 꿀팁 

 

'JavaScript'가 약하다고 생각돼서 '드림 코딩'의 '엘리'라는 분이 올려주신 유튜브를 보고 공부하려고 시작했다.

시작에 앞서, VSC를 사용하기전에 도움이 되는 'Extension'을 많이 가르쳐주셔서 나름대로 정리해보았다.

---

'Visual Studio Code '는 'MS사'에서 개발한 것이라고 한다.

Atom이나 SublineText와 같은 간단한 툴이지만, IDE 못지않게 좋은 기능들을 많이 사용할 수 있다고 한다. 

 

오늘은 Visual Studio Code를 사용하는데 있어서 도움이 되는 'Extesion' 10가지를 알아보고자 한다.

 

 

1. Material Theme : 사용자가 원하는 색상으로 VSC 전체적인 색을 변경할 수 있도록 도와준다.

2. Mateiral Icon Theme : Icon이 보다 생동감 있도록 표시해준다.

3. Prettier : 코드를 포맷팅하는데 도움을 준다.
Ctrl + ,(컴마) 를 누르고 'prettier'를 검색하면 제공하는 기능들을 이용할 수 있다

4.Bracket Pair Colorizer : 각 괄호마다 색깔을 지정해서 Pair(짝)로 만들어주기 때문에 가독성이 좋다.

5. indent-Rainbow : 들여쓰기가 되는 부분에 색깔이 지정되어서 가독성을 높여주는 익스텐션.

6.Auto Rename Tag : HTML태그를 편집할 때, 도움을 주는 익스텐션.
(ex : 앞에 코드를 바꾸면 자동으로 마감 태그까지 자동으로 바꿔주는 태그)

7. CSS PEEK : 정의된 CSS에 대해서 'Ctrl + 클릭' 만으로 해당 CSS 기능이 정의된 파일로 이동시켜준다. (원래는 일일이 찾아가면서 CSS를 확인하는 번거로움이 있었다.)

8. HTML CSS Support : 정의한 CSS를 찾아서 자동완성시켜주는 익스텐션

'S' 라고만 쳐도, 만들어 놓은 CSS를 인식해서 자동완성 제공

9. Live Server : HTML코드를 변경하고 '저장'만 하면 변경된 내용을 업데이트 해주는 익스텐션.
(매번 새로고침을 누르는 번거로움을 덜어준다.)

10. Markdown Preview : readme 파일이 어떻게 생성되는지 미리 보여주는 익스텐션.
(이건 따로 다운받을 필요없이, VSC에 내장되어 있다.) 

 

11. Emmet - HTML 코드를 빠르게 작성할 수 있도록 도와준다. 
기본적으로 저장된 문법을 사용하면 Emmet이 HTML코드를 자동으로 생성을 해준다.

'!'만 쳐도 Emmet에서 자동으로 아웃라인을 잡아준다.

12.HTML to CSS autocompletion : 'HTML CSS Support'와 반대로 HTML에서 정의한 클래스를 CSS에서 자동완성 시켜주는 익스텐션
(HTML에서 뭐라고 작성했는지 다시 HTML 파일을 다시 확인하는 번거로움을 덜어준다.)