[VSC] 설치해놓으면 편리한 확장팩

확장팩 검색하기(공통)

 

🔻한국어 지원 확장팩🔻

'korean' 검색

install 진행

 

---

🔻색테마🔻

'THEME' 검색

설치한 확장팩의 톱니바퀴를 누른다.

 

Set Color Theme 클릭

 

 

취향에 맞는 색 테마를 선택한다.

 

---

🔻파일 아이콘🔻

'icon' 검색

install 진행

톱니바퀴 클릭 후 Set File Icon Theme 클릭

설치한 Material Icon Theme를 클릭한다.

파일의 아이콘이 변경됐다.

 

---

🔻live server🔻

vsc에서 아파치 톰캣 대신 live server를 사용한다.

install 진행

서버로 열 파일을 선택하여 우클릭한다.

Open with Live Server를 선택하면 링크가 자동으로 열린다.

 

또는 우측 하단의 'Go Live'를 클릭하여 실행 할 수도 있다.

서버가 실행 중이면 아래와 같이 뜨는데 한 번 더 클릭하면 서버가 닫힌다.

---

🔻단축키 변경하기🔻

위에 설치한 live server의 단축키를 변경해준다.

톱니바퀴에서 바로 가기 키를 클릭한다.

 

바로 가기 키

단축키 변경하고 싶은 기능명을 입력한다.

 

 

open with live Server 더블클릭하여 설정 변경한다.

원하는 조합키를 누른다.

 

 

---

🔻Auto Rename Tag🔻

한쪽의 태그를 수정하면 다른 한쪽의 태그도 수정되는 기능이다.

'tag'로 검색한다.

install 진행

 

한쪽 태그를 수정하면 자동으로 짝 태그도 수정된다.

---

🔻tab out🔻

코드에서 tab으로 빠져나가기

'tab'으로 검색

 

---

🔻 HTML to CSS autocompletion🔻

• 모든 html파일에 있는 아이디와 클래스를 인텔리센스로 보여준다.

install 진행

 

설정(ctrl + shift + p)

html to css 검색 및 선택

'Set autocompletion workspace scope' 선택

 

'workspace' 선택

 

---

🔻HTML CSS Support🔻

css에서 정의한 아이디와 클래스를 html에서 인텔리센스로 보여준다.

 

 

---

🔻CSS Peek🔻

css