Visual Studio Code 기본 Extension 추천

🌳Extension

편리하게 개발할 수 있도록 도와주는 확장팩 

 

🌳사용 방법

빨간색 클릭시 들어갈 수 있다.  

 

🌳 추천 

1. Korean Language Pack for Visual Studio Code 

• VS Code용 한국어 팩 
• 영어로 되어 있는 비쥬얼 스튜디오 코드를 한국어 버전으로 보여주는 확장 프로그램

 

2. Live Server 

 

• 작성하고 있는 코드를 실시간으로 보여주기 때문에 변경 내용을 파악할 수 있다. 

 

3. HTML CSS Support 

• html태그 클래스에서 css 선택자를 쓸 때 자동 완성 기능을 지원해준다.

 

4. Prettier - Code formatter

• VS Code 코드 자동화 정렬 확장 프로그램
• 코드를 들여쓰기 하지 않고 작성을 해도, Ctrl+S로 저장하면 코드가 자동으로 들여쓰기가 된다. 
• 저장하여 코드를 정렬하기 위해서는 따로 설정이 필요함. 

 

5. Material Icon Theme

• 아이콘을 예쁘게 바꿔준다 => 파일이 어떤 파일인지 아이콘을 보고 쉽게 구분 가능

 

6. Auto Close Tag

• 닫는 태그를 자동으로 만들어준다. 

 

7. Rainbow Brackets

• 괄호 별로 색을 구분해주어서 코드를 잘 파악할 수 있도록 도와준다. 

 

8. Code Runner

• 자바스크립트 결과를 보기 위해서 (live server로는 볼 수 없음)
• ctrl+alt+n을 통해 실행가능

 

9. Auto Rename Tag

• 태그명 변경시 닫힘 태그도 자동으로 바꿔준다. 

 

10. HTML to CSS autocompletion

• css파일에서 코딩할 때 html에서 생성한 클래스명 및 아이디명을 자동완성해준다. 

 

11. CSS Peek

• html 파일에서 css 파일을 빨리 찾아줌.
  => ctrl을 누른 상태에서 html 요소를 클릭하면 그에 해당되는 css파일로 이동한다.  

 

 

12. indent-rainbow

• 태그들의 각각의 tab 영역을 색으로 구분해준다.