[웹] VS Code 설치, 단축키

Visual Studio Code 설치

더 편리한 HTML 편집을 위해 다운로드!

Visual Studio Code - Code Editing. Redefined

설치가 끝나면 아래 사진처럼 확장 탭을 눌러, 두 가지 확장팩을 깔아주자.
하나는 한국어 지원, 다른 하나는 Alt + B를 눌렀을 때, 바로 웹 브라우저를 통해 결과를 확인할 수 있게 해준다.

 

다음과 같이 HTML 파일을 생성한다. 

 

 

Visual Studio Code 단축키

Visual Studio Code 단축키 정리

1. Alt + Shift + F -> 입력 라인 자동 정렬( Beauty lib 설치되어있어야함) "코드 format"

2. Ctrl + [ or ] -> 들여쓰기, 내어쓰기

3.  code .  -> cmd 창에서 현재 디렉토리로 visual studio code를 실행하려 할 때

4.  Alt + <방향키>  -> 해당 커서에 있는 행 내용을 위아래로 이동

5. Ctrl + Shift + K  -> 해당 커서에 있는 행 삭제

6. Ctrl + Shift + P -> Show all commands ( VS Code에서 사용할 수 있는 모든 명령어를 입력 할 수 있다.)

  -> process explorer 입력시 메모리 상황창 호출 됨(느려질시 이거 켜서 필요없는 프로세스 kill)

  -> show running extensions 입력시 VS Code에서 사용하고 있는 extensions 확인 가능

7. Ctrl + Alt + 위/아래 화살표 -> 위아래로 커서를 늘려서 동시에 여러줄 수정할 수 있도록 하는 기능

8. Ctrl + P or E -> Quick Open(파일명 여기서 입력하면 한방에 찾을 수 있음)

9. Ctrl + Shift + T -> Re Open(방금 전에 닫은 파일을 다시 열고 싶을때 사용)

10. Ctrl + B -> 토글 사이드 바

11. Ctrl + K 누른후 잠시 후 Z -> 에디트 창 전체화면/해제

12. Ctrl + Space -> IntelliSense(입력시 자동 추천메뉴? - 이클리스 기능?)

13. F12 or Ctrl + 해당 정의 마우스 클릭 -> 정의로 가기(Go to Definition) 

13-1. 정의 누르고 F2 -> 해당정의 모든 변경

13-2. Shift + F12 -> 모든 정의 찾아서 리스트화.

14. Shift + alt + left or right -> 셀렉션 축소 확장

15. Shift + alt + 드래깅 -> 컬럼(박스) 셀렉션

16. Shift + alt + 위/아래 방향키 -> 셀렉션 위/아래 로 복사

17. Ctrl + u -> 셀렉션 되돌리기

18. Ctrl + Shift + \ -> () 또는 {} 괄호의 시작점이나 끝점으로 이동함.