VSCode 단축키와 확장기능

VSCode 단축키와 확장기능

VSCode는 개발자들이 소프트웨어를 코딩하고 개발하는 데 널리 사용하는 인기 있는 코드 편집기입니다. 생산성을 향상시키고 개발 프로세스를 향상시킬 수 있는 많은 단축키 및 기능을 제공합니다. 해당 글에서는 VSCode에서 가장 일반적으로 사용되는 단축키 및 확장 기능에 대해 설명합니다.

단축키

다음은 VSCode에서 가장 일반적으로 사용되는 단축키입니다:

1. 파일 열기: "Ctrl + O" 또는 "Cmd + O"
2. 파일 저장: "Ctrl + S" 또는 "Cmd + S"
3. 새 파일: "Ctrl + N" 또는 "Cmd + N"
4. 파일 닫기: "Ctrl + W" 또는 "Cmd + W"
5. 복사: "Ctrl + C" 또는 "Cmd + C"
6. 붙여넣기: "Ctrl + V" 또는 "Cmd + V"
7. 절단선: "Ctrl + X" 또는 "Cmd + X"
8. 라인 삭제: "Ctrl + Shift + K" 또는 "Cmd + Shift + K"
9. 형식 코드: 'Ctrl + Shift + I' 또는 'Cmd + Shift + I'
10. 자동 완성 코드: "Ctrl + Space" 또는 "Cmd + Space"
11. 찾기: "Ctrl + F" 또는 "Cmd + F"
12. 교체: 'Ctrl + H' 또는 'Cmd + Option + F'
13. 해당 라인으로 이동: 'Ctrl + G' 또는 'Cmd + G'
14. 실행 취소: "Ctrl + Z" 또는 "Cmd + Z"
15. 다시 실행: "Ctrl + Shift + Z" 또는 "Cmd + Shift + Z"
16. 주석 행: "Ctrl + /" 또는 "Cmd + /"
17. 들여쓰기: '탭' 또는 'Shift + 탭'
18. 다중 커서 선택: "Alt" 및 여러 줄 클릭
19. 메소드 세부 이동: 'F12' 또는 'Ctrl + 클릭'
20. Peek 정의: "Alt + F12"

그외 개발자가 사용하기에 편한 추가 단축키

1. HTML 초기 태그 자동완성 : "! + Tab"
2. 주석관련

• 한줄 : "Ctrl+/"
• 여러줄 : 범위 지정 후 "Ctrl+/"
  ​

3. 자동코드 정렬: Prettier 플러그인 사용.

• Prettier 플러긴 사용 단축키 설정 후 이용(저는 이것으로 지정해서 사용했네요. Alt + Shift + G)
  ​

4. 설정창 열기 : "Ctrl + ,(콤마)"
5. 터미널 열기/닫기 : "Ctrl + `(백틱)"
6. 폰트 사이즈 조절 : "Ctrl + +(플러스) / "Ctrl + -(마이너스) "
7. 열어놓은 탭 왔다갔다 하기: Ctrl + Pageup / Pagedown
8. 파일 검색 빠르게 : "Ctrl + p"
9. 해당 함수 정의문 이동: "Ctrl + 클릭"
10. 한줄 복사 : "Shift + Alt + (↑, ↓)"
11. 한줄 이동 : "Alt + (↑, ↓)"
12. 한줄 삭제 : "Ctrl + Shift + k / Ctrl + x"
13. 같은단어 전체 선택 : "Ctrl + Shift + L"
14. 파일이름 리펙토링(해당 단어 관련 단어[참조 등등] 한번에 변경) "F2 : ctrl + h"
15. 길다란 커서 : "Ctrl + Alt + (↑, ↓)"
16. 자유 영역 지정 : "Shift + Alt + 마우스 드래그"
17. 에러발생시 없는 모듈 자동으로 찾아주기 (import) : "Ctrl + .(점)"
18. 블록 주석 묶기 : "Alt + Shift + a"

그외 개발자가 사용하기에 편한 추가 단축키 부분 출처

• 블로그 : https://inpa.tistory.com

확장 기능

VSCode에서 주로 사용하는 extensions에 대한 설명입니다:

1. Live Server

Live Server는 정적인 웹 페이지를 로컬에서 개발할 때 사용할 수 있는 플러그인입니다. 이 플러그인을 사용하면 브라우저에서 수정 사항을 실시간으로 볼 수 있습니다.

2. ESLint

ESLint는 코드 검사 도구입니다. 코드를 작성하면서 잘못된 문법이나 개발 가이드에 맞지 않는 스타일을 자동으로 검사해주어, 코드 품질을 개선할 수 있습니다.

3. Prettier

Prettier는 코드 포맷팅 도구입니다. 코드 스타일을 자동으로 통일시켜주어, 개발자들이 코드 포맷팅에 집중할 수 있도록 도와줍니다.

4. Material Icon Theme

Material Icon Theme는 파일 아이콘 테마입니다. 아이콘을 보기 좋게 만들어주어, 파일 구분이 쉬워집니다.

5. GitLens

GitLens는 Git을 사용할 때 편리한 플러그인입니다.

6. Bracket Pair Colorizer

Bracket Pair Colorizer는 괄호를 구분하기 쉽게 색상을 부여해주는 플러그인입니다. 괄호를 쉽게 구분할 수 있어, 코드를 읽고 작성하는데 편리합니다.

7. Auto Close Tag

Auto Close Tag는 HTML 태그를 자동으로 닫아주는 플러그인입니다. 태그를 작성할 때 까다로운 태그 닫기 작업을 자동으로 처리해주어, 편리합니다.

8. Path Autocomplete

Path Autocomplete는 파일 경로를 자동으로 완성해주는 플러그인입니다. 파일 경로를 작성할 때 경로를 완성해주어, 편리합니다.

9. vscode-icons

vscode-icons는 파일 아이콘 테마입니다. 아이콘을 보기 좋게 만들어주어, 파일 구분이 쉬워집니다.

10. Markdown Preview Enhanced

Markdown Preview Enhanced는 마크다운 파일을 미리보기 기능으로 볼 수 있도록 도와주는 플러그인입니다. 마크다운 파일을 작성할 때 미리보기 기능을 사용.

태그: #VSCode #단축키 #extensions #개발 #생산성 #코딩