vscode 에디터 단축키, 사용자 설정하기

vscode 에디터의 기본 단축키

• alt 를 누른상태에서 줄을 클릭하면 여러줄이 클릭된다.(여러줄 동시 수정할 때 유용)
• 커서가 깜빡이는 상태에서 ctrl + c를 누르면 커서가 있는 그 줄 전체 내용이 복사된다.
• 커서가 깜박이는 상태에서 alt키를 누르고 위아래 방향키를 누르면 그 줄이 위 아래로 이동한다.
• ctrl + /를 누르면 주석이 된다.

vscode 설정 (사용자, 작업영역)

사용자 설정 : 내 vscode editor에 대한 기본 설정이며 주로 폰트, 탭간격, 줄바꿈 여부 등을 설정한다.
한 번 설정시 전역으로 설정됩니다.

작업영역 설정 : 프로젝트에 대한 개별 설정 부분이다.

쉽게 말해서 사용자 설정은 vscode editor에 대한 설정값이고,
작업영역은 각 개별 프로젝트 폴더 단위로 특정 설정값을 넣어주고 싶을 때 건드는 부분이다.

1. vscode 에디터 하단 톱니바퀴 모양에서 설정을 클릭한다.
2. setting.json 링크를 클릭한다.

3. 왼쪽은 vscode에서 제공하는 설정들이고, 저 내용들 중 필요한 부분을 {} 안에 복붙해서 넣으면 에디터에서 원하는데로 사용자 설정이 가능하다.

현재 내 vscode의 사용자 설정 값은 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "workbench.settings.useSplitJSON": true,
  "editor.fontSize": 14,
  "editor.renderWhitespace": "all",
  "editor.wordWrap": "on",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "D2Coding, Consolas, 'Courier New', monospace",
  "editor.renderIndentGuides": false,
  //prettier
  "editor.formatOnSave": true,
  "tslint.autoFixOnSave": true,
  "eslint.autoFixOnSave": true,
  "liveServer.settings.donotShowInfoMsg": true
}

그런데 가끔 에디터 버전에 따라, 저 왼쪽 vscode에서 제공하는 설정이 안보이는 경우가 있는데,
이럴경우 “workbench.settings.useSplitJSON”: true,를 사용자 설정 부분에 넣고 저장하면 보인다.

“editor.fontSize”: 14, 에디터의 기본 폰트 사이즈를 14로 하겠다.
“editor.renderWhitespace”: “all”, :탭이 몇칸 띄워져 있는지를 보여주는 것.
“editor.wordWrap”: “on”, : 자동 줄 바꿈
“terminal.integrated.shell.windows”: “C:\Program Files\Git\bin\bash.exe”,
:터미널을 기본 gitbash로 설정하겠다.
“workbench.iconTheme”: “material-icon-theme”, : (에디터 확장 플러그인에 material-icon-theme를 설치 한 뒤에 ) 이를 기본 아이콘 테마로 사용하겠다는 의미

“editor.fontFamily”: “D2Coding, Consolas, ‘Courier New’, monospace”, : 폰트 설정 네이버에서 제공하는 D2Coding 폰트를 기본으로 사용함

D2Coding 폰트 다운로드 ▼▼
link : https://github.com/naver/d2codingfont

//prettier
“editor.formatOnSave”: true,
“tslint.autoFixOnSave”: true,
“eslint.autoFixOnSave”: true,

:prettier 관련 설정인데 저장시 자동으로 코드가 정렬되게 함

이런식으로 사용자 설정을 내가 원하는 데로 커스텀 가능하다.