[VSCode] 사용법 + 단축키 + 추천 확장팩 모음
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