[VSCode] 사용법 + 단축키 + 추천 확장팩 모음

728x90

1. 단축키

1) ctrl + D

=> 현재 커서에 있는 단어 전체를 선택한다. 여러번 누를 경우 같은 단어들을 '동시에' 선택한다.

2) shift + alt + UP or DOWN

=> 현재 커서 줄 전체를 복사

3) ctrl + alt + UP or DOWN or 마우스 왼쪽 클릭

=> 다중 커서 선택

4) ctrl + B

=> 편집기의 레프트 메뉴 열고 닫기

5) 그 외 단축키 커스터마이징

=> 왼쪽 아래 설정 > 바로가기키를 누르면, 단축키를 마음대로 설정할 수 있다 !!

- 추천 커스터마이징 단축키 설정

=> '분할' 검색 후, 왼쪽 연필 아이콘을 클릭하면 단축키를 설정할 수 있는데, ctrl + 화살표 조합으로 창 분할을 빠르게 할 수 있음.

6) ctrl + 1,2,3 숫자

=> 창 분할 후 해당 창 선택

7) ctrl + W

=> 해당 창 닫기

2. FTP 연결

레프트 메뉴 블럭아이콘 클릭 후 마켓플레이스에서 ftp-simple 설치

F1 누른 후 ftp-simple 검색. Config 선택.

접속할 ftp정보를 입력한다

autosave => ctrl + s를 누르지 않아도 자동 저장할껀지 (기본 true가 좋지만, 실제 작업시에 ctrl + S를 눌러주는게 안정적인 것으로 확인됨...)

confirm => ctrl + s를 눌러 저장할 때마다 '저장하시겠습니까?' 팝업창을 띄울껀지

설정을 완료했다면, 이번엔 remote 선택

내가 ftp설정한 목록이 뜰것이다.

클릭하면 파일 경로와 함께 최상단에 Current directory 가 뜸. 이거 클릭하면 ftp 접속 됨

VSCode에서 FTP-simple 사용시 주의사항

- 편집기내에서 신규 파일생성 x, 파일삭제 x (파일질라 등으로 접속해 따로 해줘야 안정적임)

- ftp 접속시 너무 덩치가 크거나 경로가 많은 프로젝트일 경우에... 모든 파일중 일부가 시간이 지나도 정상적으로 로딩되지 않을 때가 있다. 이럴 땐 재로딩하거나, 수정할 파일의 폴더까지 들어가서 그 폴더만 여는게 좋음. (remote로 해당 폴더까지 접근해서 Current directory를 눌러주는게 좋음.)

3. 그 외 확장팩

위처럼 ftp-simple을 설치했듯, 모든 추가 확장팩은 왼쪽 블럭버튼을 눌러 마켓플레이스에서 검색해 설치하면 된다.

1) auto rename tag

> 태그 이름 바꿀 때 닫는 태그 이름도 동시에 변경

2) color Highlight

> 편집기안에서 색상코드가 있을 경우, 화면에서 그 색상을 표현해준다.

3) Highlight Line

> 현재 선택한 줄 lighlight 효과

4) HTML CSS Support

> html 과 css 작성시 여러기능지원. ( 작성한 html/css가 올바른지 컨펌, 작성중인 코드에서 추천 코드를 지원해준다던지 등등)

5) indent-rainbow

> 들여쓰기를 색상으로 표시해 보기 쉬워짐

6) korean language

> vscode 한국어로 사용하기

7) Live Server

> 설치후 html 파일을 열고 아래의 화면 아래의 Go Live 를 누르면, html/css변경을 즉시 확인할 수 있다

8) Material Icon Theme

> 왼쪽 메뉴에서 각 파일 확장자 쉽게 볼 수 있도록 아이콘 변경해줌

9) rainbow Brackets

> 화면의 부모,형제,자식 코드를 더 보기 쉽게 도와주는 도구

10) Power Mode

> 코드 타이핑 시 효과넣기

설정방법 => 왼쪽하단 설정 > 'powermode' 검색 > powermode Enabled 체크 + Presets에서 어떤 효과 쓸지 선택

11) Turbo Console log

> 빠르게 콘솔찍기 가능.

콘솔찍을 단어 선택 후, Ctrl + alt + L