[VSCode] 다운로드 | 추천 확장 프로그램 extension

 

VSCode extensions 추천

🔎 VSCode 다운로드

• VSCode는 하단의 사이트에서 운영체제에 맞는 파일을 다운로드하면 된다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

---

 

🔎 확장 프로그램 설치 방법

• VSCode 좌측 패널에서 마지막 블록 모양의 아이콘을 클릭 후 설치하고자 하는 확장 프로그램을 검색해 준다.

---

🔎 확장 프로그램

1. Live Server

• FTP 업로드 없이, 또는 파일 경로를 타고 직접적인 루트로 파일을 열지 않아도 로컬에서 변경된 실행 결과를 즉각적으로 확인 가능하다.

• 실행 방법 1
  단축키를 설정 Alt + L, Alt + O
  라이브서버 연결을 끊고 싶을 때, Alt + L, Alt + C

• 실행방법 2
  에디터 제일 하단 Go Live를 클릭

---

2. korean language

• VSCode를 한국어 버전으로 사용할 수 있게 해주는 확장프로그램

 

---

3. HTML CSS Support / HTML to CSS autocompletion

• html이나 css 작성할 때, 추천 검색어처럼 하단에 추천 단어가 자동완성 되어 보여 편리하다.
• 두 개의 확장프로그램 모두 설치해 주어야 HTML to CSS와 CSS to HTML 양방향으로 작동한다.

 

---

4. Auto Rename Tag

• 열고 닫는 태그를 사용할 때, 둘 중 한 군데의 태그만 수정해도 나머지 한쪽이 동일하게 수정된다.

 

---

 

5. Auto close tag

• 태그가 자동으로 닫힌다.

 

---

 

6. indent-rainbow

• 들여 쓰기 한 부분이 컬러로 표시되어서 확인하기 쉽다.
• 섹션 구분, 태그 블록 영역 구분이 수월하다.

 

---

 

7. Live Sass Compiler

• sass 또는 scss를 자동으로 css 컴파일시켜 주는 확장 프로그램.

 

 

• 사용방법
  에디터 제일 하단 Watch Sass 클릭해야 css로 컴파일이 된다. (Live server에도 실시간 반영 됨)

 

---

8. CSS Peek

• html에 쓰인 태그의 css관련 파일로 바로 이동할 수 있다.
• ctrl + 클래스명 클릭을 하면 된다.

 

---

9. Beautify

• 코드의 들여 쓰기, 자동 줄 바꾸기 등 코드를 보기 좋게 정렬시켜 준다.
• 설치 후 단축키를 지정해 두면 보다 편리하게 쓸 수 있다.
• 보통 나는 ctrl + alt + L로 지정하는 편.

 

---

10. gitLens

• 깃허브를 사용하는 협업 시에 유용하게 쓸 수 있다.
• 해당코드에 마우스 오버 시 누가, 어떻게 코드를 수정했는지 히스토리를 확인할 수 있다.