※비주얼스튜디오 코드(Visual Studio Code)의 유용한 설정들과 단축키들을 알아보도록 하겠습니다.
이제 시작하는 단계이기 때문에 전문적인 세팅보다는 사용하기 편리한 기능들 위주로 정리해 두었습니다.
목차
1. 기본 설정
[파일]→[기본설정]→[설정]으로 들어가거나 cmd + , 를 누른다.
@Auto Save
옵션을 onFocusChange로 바꾸어 에디터에서 포커스가 벗어나는 순간 작성내용이 자동으로 저장되도록 하는 기능.
- cmd + S를 누르지 않아도 터미널에서 바로 변경된 내용으로 컴파일을 할 수 있다.
@Tab Size
- 탭을 눌렀을 때 입력 될 공백 수 설정이다. 기본값 4로 설정되어 있다.
@Font Size
- cmd +,- 로 View의 전체 배율을 변경하는 것과 달리 코드의 폰트 크기만 조절한다. 기본값 12로 설정되어 있다.
@format on save
- 저장할 때 자동으로 포맷을 정리해 주는 기능.
2. 확장(Extensions) or 플러그인 or 패키지 설치
| ftp-simple | FTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다. |
| ftp-sync | 프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다. |
| HTML Snippets | HTML 코드를 편하게 입력할 수 있도록 돕는 기능 |
| View in Browser | HTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다. |
| Live HTML Previewer | HTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다. |
| Syncing | 확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다. |
| Guides | 여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다. |
| Markdown Shortcuts | 마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다. |
| markdownlint | 마크다운 문법을 체크합니다. |
| Beutify | 지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다. |
| Auto Rename Tag | HTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다. |
| VS Color Picker | 컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다. |
| vscode-open-project | 프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다. |
| Paste Image | 클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다. |
3. 단축키
@기본 편집 단축키
| Ctrl + X 커서 위치 행 삭제(잘라내기) |
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + X로 행을 삭제(잘라내기)합니다. | editor.action.clipboardCutAction |
| Ctrl + Shift + K 커서 위치 행 삭제 |
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + Shift + K로 행을 삭제합니다. | editor.action.deleteLines |
| Ctrl + C 커서 위치 행 복사 |
커서 행 코드를 반복해서 사용해야 할 경우, 해당 행에 커서를 놓고 Ctrl + C로 행을 복사합니다. | editor.action.clipboardCopyAction |
| Ctrl + Enter 커서 아래 행 빈줄 생성 |
커서를 맨 뒤로 보낸 후 Enter를 쳐서 빈 행을 생성할 수 있지만, 행의 코드 중간 부분에서도 Ctrl + Enter 단축키를 사용할 경우 더욱 쉽게 커서 아래에 빈 행을 생성 후 이동 가능합니다. |
editor.action.insertLineAfter |
| Ctrl + Shift + Enter 커서 위 행 빈줄 생성 |
행의 코드 중간 부분에서도 Ctrl + Shift + Enter단축키를 사용할 경우 더욱 쉽게 커서 위에 빈 행을 생성 후 이동 가능합니다. | editor.action.insertLineBefore |
| alt + (↑)화살표 행을 위로 이동 |
커서가 있는 현재 행을 윗줄로 옮길때 alt + (↑)화살표를 할 경우 쉽게 행의 코드 윗줄과 순서를 바꿀 수 있습니다. | editor.action.moveLinesUpAction |
| alt + (↓)화살표 행을 아래로 이동 |
커서가 있는 현재 행을 아래로 옮길때 alt + (↓)화살표를 할 경우 쉽게 행의 코드 아랫줄과 순서를 바꿀 수 있습니다. | editor.action.moveLinesDownAction |
| Ctrl + alt + (↑)화살표 커서를 위에 추가(다중선택) (★) |
동일하게 문자열을 수정시 Ctrl + alt + (↑)화살표로 윗행을 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. | editor.action.insertCursorAbove |
| Ctrl + alt + (↓)화살표 커서를 아래에 추가(다중선택) (★) |
동일하게 문자열을 수정시 Ctrl + alt + (↓)화살표로 아래행 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. | editor.action.insertCursorBelow |
| Ctrl + / 한줄 주석처리 (★) |
코드에 대한 설명 또는 필요에 의해 코드를 삭제하지 않고 브라우저에서 보여주고 싶지 않을 경우 Ctrl + / 단축키를 사용하면 됩니다. 퍼블리싱 작업시 자주 사용하는 단축키입니다. 해당 주석을 풀고 싶을 경우 Ctrl + / 단축키를 한번 더 누르면 됩니다. |
editor.action.commentLine |
| Ctrl + K → Ctrl + C 블럭 주석 처리 (★) |
한줄 주석(//)을 여러 행 한꺼번에 처리하는 블럭주석으로 Ctrl + K → Ctrl + C 단축키를 사용하면 됩니다. | editor.action.addCommentLine |
| Ctrl + K → Ctrl + U 주석 삭제 (★) |
주석 처리한 부분을 해제 하고 싶을 경우 Ctrl + K → Ctrl + U 단축키를 사용하면 됩니다. | editor.action.removeCommentLine |
| Alt + Shift + A 블럭 주석 처리 (★) |
커서 위치에서 /* */ 또는 드래그 하여 선택된 부분을 블럭 주석 처리 하고 싶을 경우 Alt + Shift + A 단축키를 사용하면 됩니다. | editor.action.blockComment |
| Ctrl + Shift + [ 커서 영역 접기 |
퍼블리싱 작업시 해당 블럭의 코딩을 완료 후 코드의 양이 많아서 코드가 보기 힘들 경우 가독성을 위해 커서 위치에서 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 접을 수 있습니다. | editor.foldRecursively |
| Ctrl + Shift + ] 커서 영역 펼치기 |
퍼블리싱 작업시 접었던 부분의 코드를 다시 수정하거나 보고 싶을 경우 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 펼칠수 있습니다. | editor.unfoldRecursively |
@편집 단축키
| Ctrl + G 행(라인 번호)으로 이동 (★) |
퍼블리싱 작업시 특정 줄 번호로 빠르기 이동하고 싶을 경우 Ctrl + G 단축키를 사용하면 빠르게 원하는 행으로 이동 가능합니다. | workbench.action.gotoLine |
| Ctrl + P 빠른 파일 열기 (★) |
프로젝트 파일 폴더에서 일일이 클릭해서 파일을 찾는 수고로움을 피하고, 빠르게 파일을 찾고 싶을 경우 Ctrl + P 단축키를 사용하면 됩니다. | workbench.action.quickOpen |
| Ctrl + F 찾기 |
현재 파일에서 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 빠르게 찾아아서 이동 가능합니다. | actions.find |
| Ctrl + Shift + F 전체 파일에서 찾기 |
폴더에서 파일을 전체 검색하여 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 검색한 문자열이 있는 모든 파일을 찾을 수 있습니다. 그러나 전체 검색이다 보니, 파일이 많을 경우 시간이 오래 걸릴 수 있습니다. |
workbench.view.search |
| Ctrl + H 현재페이지 문자열 수정하기 (★) |
현재 퍼블리싱 중인 페이지에서 여러개의 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. 한 개씩 확인하면서 바꾸고 싶을경우 Enter 하면 한 개씩 변경 가능하며, Ctrl + Alt + Enter 하면 모두 수정이 가능합니다. |
editor.action.startFindReplaceAction |
| Ctrl + Shift + H 폴더 모든 페이지 문자열 수정하기 (★) |
프로젝트 폴더 전체 페이지에서 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. | workbench.action.replaceInFiles |
| F8 오류 또는 경고 찾기 |
HTML, JS, CSS 파일에서 오타로 인해서 오류를 확인하고자 할 경우 F8 단축키를 사용하면 쉽게 찾아서 수정할 수 있습니다. | editor.action.marker.next |
@파일 관리 편집 단축키
| Ctrl + N 새로운 편집 탭 열기 |
퍼블리싱을 하다보면 새로운 파일(HTML, CSS, JS)을 생성해야 할때가 있습니다. 이럴 경우 Ctrl + N 단축키를 사용하여 파일 탭을 생성합니다. |
workbench.action.files.newUntitledFile |
| Ctrl + Shift + N 새로운 창 열기 |
VS Code 에디터에서 새로운 프로젝트 폴더를 생성한 후 열고 싶을 때 Ctrl + Shift + N 단축키를 사용합니다. 현재 작업중인 프로젝트에서 종류가 다른 프로젝트의 수행을 위해 새로운 창을 열고 싶을 때 사용하는 단축키 입니다. |
workbench.action.newWindow |
| Ctrl + O 파일 열기 |
새로운 파일을 만드는 것이 아닌 프로젝트 폴더내에 이미 생성된 파일을 열고자 할 경우 Ctrl + O 단축키를 사용합니다. | workbench.action.files.openFile |
| Ctrl + W 파일 창 닫기 (★) |
퍼블리싱 작업을 하다보면, 여러개의 창을 열어 놓을 경우가 있습니다. 해당 파일을 더이상 열어 놓을 필요가 없거나, 파일창이 너무 많아 일부분 닫아야 할 경우 Ctrl + W 단축키로 파일을 닫아 줍니다. |
workbench.action.closeWindow |
| Ctrl + Shift + T 이전에 닫힌 편집파일 다시 열기 (★) |
현재 파일에서 퍼블리싱 작업중, 이전에 닫았던 창을 다시 열어야 할 경우 Ctrl + Shift + T 단축키로 사용하면 됩니다. | workbench.action.reopenClosedEditor |
| Ctrl + S 파일 저장 |
신규 파일 저장이 아닌 현재 파일을 저장해야 할 경우 Ctrl + S 단축키로 파일을 저장하면 됩니다. | workbench.action.files.save |
| Ctrl + Shift + S 다른 이름으로 파일 저장 |
현재 파일을 새로운 이름의 파일로 생성하여 저장해야 할 경우 Ctrl + Shift + S 단축키로 파일을 저장하면 됩니다. | workbench.action.files.saveAs |
| Ctrl + \ 파일 화면 창 분할 (★) |
한 개 이상의 파일 화면을 동시에 보면서 퍼블리싱 해야 할 경우 Ctrl + \ 단축키를 사용하여 화면 창을 분할하여 보면 편리합니다. Ctrl + \ 단축키를 누른 횟 수 만큼 화면 창이 분할 됩니다. |
workbench.action.splitEditor |
| Ctrl + N(숫자) 화면 분할 창 위치 포커싱 (★) |
화면을 여러 개 분할 후, 퍼블리싱 작업시 원하는 위치의 분할 창으로 이동해야 할 경우 Ctrl + N(숫자) 단축키를 사용하여 원하는 파일 분할창으로 쉽게 이동할 수 있습니다. 예를 들어 Ctrl + 2 단축키를 누르면 2번 파일 분할창으로 이동합니다. 마우스로 매번 분할창 클릭을 하지 않아도 됩니다. |
@언어 편집 단축키
| Ctrl + ← / Ctrl + → 단어별 커서 이동 |
한글자씩 커서 이동이 아닌, 단어별로 커서를 이동해야 할 경우 Ctrl + ← / Ctrl + → 단축키를 사용하여 좌우로 쉽게 이동할 수 있습니다. | |
| Ctrl + Shift + ← / Ctrl + Shift + → 단어 선택 |
단어를 선택해야 할 경우 Ctrl + Shift + ← / Ctrl + Shift + → 단축키를 사용하면 됩니다. | |
| Alt + Shift + → 선택 확장 |
문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다. | editor.action.smartSelect.grow |
| Alt + Shift + ← 선택 축소 |
문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다. | editor.action.smartSelect.shrink |
| alt + 마우스 클릭 필요한 문자열을 골라서 커서 추가(다중선택) (★) |
동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다. | |
| Ctrl + K → Ctrl + F 자동 정렬(★) |
들여쓰기를 제대로 정리하지 못했을 경우 Ctrl + A 후 Ctrl + K → Ctrl + F 단축키를 사용하면 한번에 코드 자동정렬을 할 수 있다. 여러명의 퍼블리셔가 한개의 프로젝트를 진행할 경우 코드 정렬의 통일성 문제를 해결할 수 있기 때문에, 없어서는 안될 단축키 입니다. |
editor.action.formatSelection |
| Ctrl + D 특정 문자열 여러개 찾기(★) |
동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다. 다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다. 예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다. |
editor.action.addSelectionToNextFindMatch |
| Ctrl + Shift + L 특정 문자열 모두 선택 |
Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다. 찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다. |
@확장프로그램 단축키
| Live Server | 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다. 사용방법은 확장프로그램을 설치한 후 , Alt + L → O 단축키를 사용하면 브라우저에서 실시간으로 코딩 상황를 확인 가능합니다. |
Alt + L → O Live Server 실행 (★) |
| Live Server | 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다. 사용방법은 확장프로그램을 설치한 후 , Alt + L → C 단축키를 사용하면 가상 서버를 종료 합니다. |
Alt + L → C Live Server 종료 (★) |
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 LIST (0) | 2023.02.18 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0) | 2023.02.17 |
| 비주얼스튜디오 코드(Visual Studio Code)의 기본코드 (0) | 2023.02.16 |
| 비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0) | 2023.02.15 |
| 웹 개발 기본 다지기 (0) | 2023.02.14 |
