프론트, 퍼블리셔를 위한 VSCode(Visual Studio Code) 확장 프로그램

VSCode(Visual Studio Code) 확장 프로그램

안녕하세요. 브라켓이 지원종료된다고 하네요 :(

퍼블리싱하기 기능이 좋아서 bracket을 애용했는데 이제는 비쥬얼스튜디오코드로 옮길때가 된 것 같습니다!

이미 익숙해진 것을 옮긴다는 것은 어려운 일이에요 ,,

 

그래 오늘은 기록할 겸, VSCode의 필수 확장프로그램에 대해서 포스팅해보겠습니다 !

 

VSCODE 마켓플레이스에서 확장기능 다운로드 받는법

 

 

우선, 비쥬얼 스튜디오 코드의 확장프로그램의 위치는 위와 같습니다 :)

검색란에 적어주시면 자동완성되어 밑에 뜨니까 간편해요!

 

 

원하는 확장프로그램이 나오면 설치버튼을 눌러주시면 끝이에용

---

Beautify

html, css, javascript, json, sass 정렬 프로그램입니다 :)

내부적으로 beautify 확장 기능을 통해 보기 좋게 정렬해주는 프로그램이에요!

 

사용방법 : 'F1' 클릭후 검색창에 'Beautify' or 'Beautify file' 눌러주세요.

 

 

 

---

Path Intellisense

Path Intellisense는 위의 예제와 같이 경로를 자동으로 입력해주는 프로그램이에요.

이미지나 css, js 파일의 경로를 자동으로 입력시켜줍니다.

---

Color Highlight

색상의 컬러를 배경색으로 보여주어 더 가독성있고, 수정이 편한 비쥬얼스튜디오 코드 확장프로그램이에요:)

개인적으로 다운받는 걸 추천드립니다!

---

Auto Close Tag

다들 닫는태그 한개씩 빠트린 적 있잖아요..?

그걸 방지해주는 소스입니다. 

1의 방법은 자동으로 닫는 코드가 삽입되고,

2의 방법은 수동으로 닫는 코드를 삽입하는 방법인데 'F1'을 눌러주신 후 /입력close tag 해주시면 됩니다.

---

Auto Rename Tag

예제를 보면 이해가 쉬운데,

태그를 변경할 때, 뒤의 닫는 태그도 동일하게 변경되는 플러그인이에요 :)

활용도가 높을 것 같아요!

---

Bracket Pair Colorizer

일치하는 괄호마다  컬러가 달라서 여는태그와 닫는태그를 직관적으로 확인할 수 있는 확장 프로그램입니다 :)

---

 

Prettier

beautify과 비슷한 코드 정렬 프로그램이에요 :)

둘 다 사용해보고 더 좋은 걸 사용하시면 될 것 같아요!

 

사용방법 : 'F1' 단축키 클릭 후 검색창에 -> Format Selection 입력하기

---

vscode-icons

html, css, js 파일에 아이콘을 더해주는 확장기능이에요 :)

실행화면은 오른쪽화면이니 참고하세요!

---

CSS Peek

brackets에서 영감을 받았다고 하는 확장기능이에요:)

html 화면에서 바로 css 코드르 볼 수 있는 기능이여서 엄청 편리할 것 같습니다!

css peek이 안될 때는 아마 단축키를 입력하지 않아서 일거에요:) css peek 사용 방법을 확인해주세요!

 

사용 방법

• Peek : CSS 파일을 인라인으로로드하고 바로 편집 할 수 있습니다. ( Ctrl+Shift+F12)
• 이동 : CSS 파일로 직접 이동하거나 새 편집기에서 엽니다 ( F12). 혹은 'ctrl' 누른 뒤 클릭
• 마우스 오버 : 기호 ( Ctrl+hover) 위에 마우스 오버하면 정의를 표시합니다.

---

IntelliSense for CSS class names in HTML

css 클래스 정의에 대한 class 자동 완성기능을 제공합니다.

linkHTML 파일의 요소에 참조되는 외부 스타일 시트를 지원하는 기능입니다 !

---

indent-rainbow

들여쓰기가 무지개색으로 보이는 확장기능입니다.

총 4가지 색상으로 이루워져 있다고 합니다.

---

Live ServerLive Server

실시간으로 서버를 통해 화면을 볼 수 있는 기능입니다.

 

사용방법

1. 프로젝트를 열고 Go Live상태 표시 줄에서을 클릭 하여 서버를 켜거나 끕니다.

2.HTML탐색기 창에서 파일을 마우스 오른쪽 버튼으로 클릭 하고 'Open with Live Server' 를 클릭합니다.

3.HTML 파일을 열고 편집기를 마우스 오른쪽 버튼으로 클릭하고  'Open with Live Server' 를 클릭합니다.

4. (alt+L, alt+O)서버를 열고 서버를 중지하려면 (alt+L, alt+C)를 누릅니다.