[vs code] HTML/ CSS / JavaScripts extensions 다운 방법 및 앱 추천

0. vs code extensions의 역할

코딩 작성을 더 빠르고 효율적으로 작성할 수 있도록 도와준다.

 

Ⅰ. extensions 다운 방법

1. vs code에 들어간다.

2. 좌측에 있는 extensions(확장) 메뉴를 누른다.

3. 다운 받고 싶은 extensions을 검색한다. 

 

 

 

---

 

 

 

Ⅱ. 추천 항목

1. Prettier - Code formatter

작성한 코드를 규칙에 따라 자동으로 정렬하고 정리해준다.

 

 

2. Rainbow Brackets

중첩된 괄호 - (),{},[] 들을 색으로 구분한다.

 

 

3. indent-rainbow

코드의 들여쓰기 정도(tab)를 서로 다른 색으로 구분한다.

3-1. vscode tab 기본 값 변경

file - preferences - settings

prettier tab 검색 후 원하는 만큼 변경하기 (2가 적당)

 

 

4. Auto Rename Tag

시작/종료 태그를 변경하면 다른 태그도 자동적으로 수정한다.

 

 

5. CSS Peek

HTML 파일에서 원하는 CSS 클래스에 마우스를 올려 해당 CSS 파일의 내용을 미리 볼 수 있다.

Ctrl을 누른 상태에서 CSS 클래스를 클릭하면 직접 CSS 파일로 이동한다.

 

 

6. HTML CSS Support

 

 

7. Live Server

작성한 코드를 웹 브라우저에서 실시간으로 볼 수 있다.

7-1. Live Server 실행 방법

View(보기) - Command Platte(명령 팔레트) - Live Server: Open with Live Server 입력 후 클릭

 

8. Mithril Emmet

작성 시간을 단축 시켜준다.

8-1. Mithril Emmet 활용 방법

! 입력 후 tab 키를 누르면 html 기본 골격이 자동으로 나온다.

태그 속 태그는 > 와 + 를 활용해서 쉽게 작성할 수 있다.