웹 개발을 위한 Visual Studio Code 활용하기

Shortcuts(단축키)

[Ctrl] + [`]

TERMINAL로 포커싱한다.

 

[Ctrl] + [0]

탐색기 사이드바에 포커싱한다.

파일을 검색하려면, 바로 검색어를 입력하면 된다.

 

[Ctrl] + [ ,  [Ctrl] + ]

현재 행을 들여쓰기 또는 내어쓰기 해준다.

 

[Ctrl] + [A] 후, [Ctrl] + [K] 누르고 [Ctrl] + [F]

html 태그들을 보기 좋게 가지런히 정렬해준다.

 

[Ctrl] + [D]

현재 커서에 있는 단어를 선택해준다.

 

[Ctrl] + [Enter]

커서가 줄 끝에 있지 않더라도, 바로 아랫 줄로 Enter해준다.

 

[Ctrl] + [Shift] + [K]

현재 행을 삭제한다.

 

[Ctrl] + [PageUp],  [Ctrl] + [PageDown]

작업 탭을 이전 또는 다음으로 포커싱한다.

 

[Alt] + [↑] ,  [Alt] + [↓]

현재 행을 위 또는 아래로 이동시킨다.

 

---

 

Extensions

 

Korean(사용법) Language Pack for Visual Studio Code

vscode의 언어를 한글로 설정해준다.

 

Live Server

웹페이지 파일을 수정하고 저장할 때 마다 변한 모습을 실시간으로 보여준다.

(설치 후, [Alt] + [L], [Alt] + [O]를 누르면 브라우저에서 페이지를 보여준다.)

 

Prettier - Code formatter

 

TabOut

[Tab]키로 "", (), {}, <>등의 안에 있는 커서를 오른쪽 바깥으로 빼내게 해준다.

 

---

그 외 팁들

 

파일 검색하기(1)

[Ctrl] + [0]으로 탐색기 바에 포커싱한 후,

곧바로 검색어를 입력하면 된다.

 

입력하면 검색어 박스가 생성되는데, 여기서 필터 버튼을 누를 수 있다.

 

파일 검색하기(2)

[Ctrl] + [P]를 누르면 검색 바가 나온다.

검색한 후, [→] 키를 누르면 해당 파일이 새 탭에 열린다.

 

화면 분할하여 열기 버튼을 누를 수 있다.