Vscode 자바스크립트 주석 - vscode jabaseukeulibteu juseog

비주얼 스튜디오 코드 (Visual Studio Code) 는 마이크로소프트 사에서 제작한 무료 코드 편집기로 맥, 리눅스, 윈도우에서 모두 실행이 가능하기 때문에 많이 이용되고 있다. 또 최근의 편집기 답게 다양한 확장 기능이 제공되고 있어 (git 연동, 한글 언어팩 등) 본인이 원하는 데로 편집기를 튜닝할 수 있다. 개인적으로는 앞서 포스팅한 브라켓과 달리 alt + f가 먹는다는 점만 해도 비쥬얼 스튜디오 코드를 더 사랑한다.

​

유용한 단축키

​

Ctrl + Shift + p 명령 팔레트 열기

비쥬얼 스튜디오 코드의 모든 명령을 볼 수 있는 명령 팔레트를 실행한다. 팔레트의 항목을 선택하면 해당 기능을 바로 실행한다.

​

Ctrl + / 주석 설정, 해제

커서가 가르키는 한 줄, 또는 블럭 지정된 라인을 주석을 설정한다. (한번 더 실행시 해제)

한줄 주석과 여러줄 주석이 있는 언어인 경우 한줄 주석이 전체 라인에 설정된다. (자바스크립트의 경우 //)

​

Shift + Alt + A / 여러줄 주석 설정, 해제

여러줄 주석이 있는 언어인 경우 여러줄 주석을 설정한다. (자바스크립트의 경우 /* */)

​

Ctrl + Alt + m / 문제 탭 토글

편집기 하단에 문제 (Problem) 탭을 토글한다. 오류가 있는 부분이 표시되므로 수정 작업시 참고할 수 있다.

Shift + Alt + A 여러줄 주석 설정, 해제

여러줄 주석이 있는 언어인 경우 여러줄 주석을 설정한다. (자바스크립트의 경우 /* */)

​

Shift + Alt + ↑, ↓ 줄 복사

커서가 있는 라인, 또는 블럭으로 지정된 라인들을 위, 아래에 복사 한다.

이미 작성한 내용과 동일한 내용이 필요할때 사용하면 편리.

​

Alt + ↑, ↓ 줄 이동

커서가 있는 라인, 또는 블럭으로 지정된 라인들을 위, 아래로 이동시킨다.

소스의 위치를 수정할 때에 굳이 잘라내고 붙여넣기 하지 않아도 되므로 매우 유용.

​

Ctrl + ], [ 줄 들여쓰기, 내어쓰기

커서가 있는 라인, 또는 블럭으로 지정된 라인들을 들여쓰기 ( Ctrl + ] ) 내어쓰기 ( Ctrl + [ ) 한다.

​

Ctrl + Shift + k 줄 삭제

커서가 있는 라인, 또는 블럭으로 지정된 라인들을 삭제한다.

​

Ctrl + Alt + ↑, ↓ 다중 커서 생성

한번에 여러줄을 수정할 수 있도록 다중 커서를 생성한다.

​

(블럭 지정 없이) Ctrl + C 줄 복사

비주얼스튜디오 코드에서는 한줄을 복사하고자 하는 경우 굳이 해당 줄을 블럭할 필요가 없다.

복사하고자 하는 라인에 커서가 있는 상태에서 Ctrl + C 를 누르면 해당 줄이 복사 된다.

​

(블럭 지정 없이) Ctrl + X 줄 잘라내기

위와 동일. 커서만 두고 Ctrl + X를 누르면 해당 줄을 잘라낸다. 만약 붙여넣기를 안한다면 줄 삭제로도 사용할 수 있다.

​

Ctrl + Enter 아래에 신규 행 삽입

보통 다음 한줄을 입력하고 싶으면 텍스트의 맨 오른쪽 끝으로 커서를 옮긴 다음 엔터로 개행처리 해야 하지만 컨트롤 엔터를 누르면 현재 편집중인 라인은 그대로 놔두고 아래쪽에 신규 행이 삽입되며 커서도 신규 행으로 이동한다.

​

Ctrl + Page Up, Page Down 탭 이동

아래와 같이 열려 있는 항목이 여러개인 경우 왼 쪽, 오른 쪽 항목으로 탭을 바꿔준다.

단축키 목록 보기 / 변경 방법

​

1. 전체 단축키 목록 보는 법

​

Ctrl + K 를 누르고 땐 후 다시 Ctrl + S 를 누르면 바로가기 키 메뉴를 열수 있다. 또는 상단 메뉴 파일 - 기본 설정 - 바로 가기 키 메뉴를 클릭해도 된다.

​

바로 가기 키 페이지가 열리면 비주얼 스튜디오 코드 내에 설정된 모든 단축키 목록을 확인 할 수 있다.

​

​

2. 단축키 변경 방법

위의 바로 가기 키 페이지에서 설정하고 싶은 기능을 찾는다.

변경하고자 하는 항목을 더블 클릭한다. 더블 클릭하면 위와 같이 키 조합을 입력하는 팝업 창이 열리며, 변경하려고 하는 단축키를 설정하면 된다.

​

비주얼 스튜디오는 하나의 단축키에 여러 기능을 등록 할 수 있고, 하나의 기능에 여러 단축키를 설정하는 것도 가능하다.

위 이미지 처럼 Ctrl + D 에 줄 삭제를 반영 시키려고 하면 이미 기존 명령에 이 키 바인딩이 있습니다. 라고 나오는 걸 볼 수 있는데 상단 검색 창에 "Ctrl + d" 로 검색 (쌍따옴표 안에 본인이 설정하고 싶은 키 조합을 넣으면 된다) 해보면 그 키에 설정된 모든 기능을 확인할 수 있다.

중복으로 바인딩 된 상태에서도 본인이 원하는 기능이 정상적으로 작동이 된다면 그대로 놔둬도 되고, 아니라면 단축키에 중복된 기능 바인딩을 삭제 해버리자. (삭제는 마우스 오른쪽 클릭 후 삭제 메뉴를 누르거나 항목 선택한 채로 delete 키 누르면 지워진다)

​

​

3. 단축키 추가 방법

하나의 기능에 여러개의 단축키를 넣고 싶거나, 삭제 해버린 단축키를 다시 살리고 싶은 경우 keybindings.json 라는 단축키 셋팅 파일을 직접 수정하면 된다. 해당 파일의 폴더 위치는 다음과 같다.

C:\Users\사용자명\AppData\Roaming\Code\User

​

해당 파일을 비주얼 스튜디오 코드에서 열면 아래와 같이 기본키를 변경했거나 삭제한 목록을 볼 수 있다.

삭제한 키는 "command" 의 값의 맨 처음에 - 가 붙어 있다. 해당 -만 지우거나 해당 기능의 중괄호 { } 전체를 지워버리면 기본값으로 복원된다.

​

단축키를 신규로 생성하고 싶은 경우 작성되어 있는 소스 하단에 똑같이

,{

"key": "적용할 단축키",

"command": "기능",

"when": "작동할 조건"

}

을 넣어주면 된다.

​

command와 when의 값은 https://code.visualstudio.com/docs/getstarted/keybindings 페이지나 바로가기 키 메뉴에서 찾아서 적용하자.

기존 기능을 복제하는 쉬운 방법은 바로가기 키 메뉴에서 추가할 단축키를 찾은 후 마우스 오른쪽 클릭 - 복사 를 선택하거나 Ctrl + c 한 후 keybindings.json 에 붙여 넣기 하면 값을 그대로 가져올 수 있다. 이 후 단축키만 바꿔주면 된다.

​

참고로 중괄호와 중괄호 사이에는 반드시 쉼표가 들어가야 하니 그것만 주의 할 것.

​

​

#비주얼스튜디오코드 #비쥬얼스튜디오코드 #visualstudiocode #vscode #단축키 #단축키변경 #단축키추가 #vs코드