VSCode 기본 사용, 단축키, 설정

 설치하면 바로 쓸 수 있는 VSCode

 https://code.visualstudio.com/ 에서 다운받아 설치하면 된다. 매우 쉽다. 설치 과정에서 별 다른 설정을 해 줄 필요가 없으며, 옵션 선택에 고민을 할 필요도 없다. 홈페이지의 Docs 메뉴에 사용법에 대한 내용이 잘 정리되어 있다.

 설치만 쉬울 뿐 아니라 텍스트 에디터인 만큼 사용도 쉽다. VSCode 는 상단의 메뉴바, 왼편의 단축아이콘, 중앙의 작업공간, 하단의 상태바로 구성되어 있다. 기본적인 사용은 메모장을 사용하듯 하면 된다.

 기본 사용법은 단축키를 익히는 것부터 시작!

 시작페이지에서 Printable keyboard cheatsheet 를 선택하거나, F1 을 누르고 Help: Keyboard shortcuts Reference 를 선택하면 위와 같이 자주쓰는 단축키 리스트를 확인할 수 있다. 이 중에 내가 사용하는 단축키은 다음과 같다.

 1. General

1-1. Ctrl+Shift+P or F1 : Show Command Palette - 명령어를 입력할 수 있다. 자동완성 기능이 있다.

1-2. Ctrl+P : Quick Open, Go to File - 파일을 연다.

1-3. Ctrl+, : User Settings - 설정을 확인, 변경한다.

1-4. Ctrl+K and then Ctrl+S : Keyboard Shortcuts - 단축키를 확인, 변경한다.

 2. Basic editing

2-1. Ctrl+X, Ctrl+C : Cut line, Copy line (empty selection) - 선택된 문자가 없으면 줄 전체를 잘라내거나 복사한다.

2-2. Ctrl+], Ctrl+[ : Indent line, Outdent line - 들여쓰기, 내어쓰기

2-3. Ctrl+/ : Toggle line comment - 선택되어 있는 줄을 주석으로 만든다.

 3. Navigation

3-1. Ctrl+G : Go to Line

3-2. F8, Shift+F8 : Go to next error or warning, Go to previous error or warning

3-3. Alt+←, Alt+→ : Go back, Go forward

 4. Search and replace

4-1. Ctrl+F : Find

4-2. Ctrl+H : Replace

4-3. F3, Shift+F3 : Find next, Fine previous - 찾은 내용들을 순회한다.

 5. Rich languages editing

5-1. Ctrl+Space : Trigger suggestion - 자동완성 기능

5-2. Ctrl+Shift+Space : Trigger parameter hints - 인자값을 알려준다.

5-3. F12 : Go to Definition - 함수 및 변수의 정의된 곳으로 간다.

5-4. Alt+F12 : Peek Definition - 함수 및 변수의 정의된 곳을 참조한다. (팝업 형태로 보여준다.)

5-5. Ctrl+K and then F12 : Open Definition to the side

5-6. Shift+F12 : Show References - 참조하고 있는 곳을 참조한다. (팝업 형태로 보여준다.)

 6. Editor management

6-1. Ctrl+\ : Split editor - 작업 공간을 분리한다.

6-2. Ctrl+1, Ctrl+2, Ctrl+3 : Focus into 1st, 2end, 3rd editor group - 분리된 작업 공간을 선택한다.

 7. Display

7-1. F11 : Toggle full screen

7-2. Shift+Alt+0 : Toggle editor layout horizontal, vertical - 분리된 작업공간을 세로 혹은 가로로 정렬한다.

7-3. Ctrl+B : Toggle Sidebar visibility - 왼편의 단축아이콘 창을 열거나 닫는다.

 8. Debug

8-1. F9 : Toggle breakpoint

8-2. F5, Shift+F5 : Start / Continue, Stop

8-3. F11, Shift+F11, F10 : Step into, Step out, Step over

 폰트부터 바꾸고 시작하실까요?

단축키 Ctrl+, 를 누르거나, 왼편의 단축아이콘 최하단에 톱니바퀴 버튼을 누르고 Settings 을 선택하면, 설정창으로 갈 수 있다. 리스트로 되어 있으며 찾기 기능도 있기에 생각하고 있는 기능을 바꿀 수 있다. 설정은 json 파일로 저장되는데, Default, 기본 설정값들이 있고, 그것을 User Settings, 사용자 설정값이 있을 경우 덮어씌워지는 방식이라고 이해하면 된다. 나는 찾기 메뉴 오른편의 팝업메뉴에서 Open settings.json 을 선택하여, json 파일을 직접 변경하는 방식으로 설정 값을 수정하고 있다.

 찾기 기능으로 font 를 찾으면, editor.fontFamily 항목이 있는데, 왼편의 기본 설정값에서 복사하여, 오른쪽 사용자 설정값에 넣고, D2Coding 으로 바꾸어보았다. 설정값 저장과 동시에 적용된다.

 Extension 없이 VSCode 를 사용하지 말라.

 위의 텍스트 에디터의 기본 기능을 익혔으면, 이제 확장 기능 설치 차례다. VSCode 에는 수 많은 확장 기능이 존재하며 지금도 개발되고 있다. 그리고 확장 기능은 매우 쉽게 설치할 수 있다. 왼편의 단축아이콘 중 가장 마지막 Extensions 를 선택한 후, 필요한 확장 기능을 설치하면 된다.