Visual Studio Code - 숫자를 증가 / 감소 시키는 단축키

소개

영상부터 보여드리겠습니다.

단축키로 숫자를 증감

• 단축키를 이용해 선택한 숫자를 0.1 / 1 / 10 만큼 증가시키거나 감소시킬 수 있다.
• vscode에서 기본적으로 지원하는 Emmet의 기능을 이용합니다.

 

Emmet: Increment by 0.1 => ctrl+alt+up

Emmet: Increment by 1 => ctrl+up

Emmet: Increment by 10 => ctrl+shift+up

Emmet: Decrement by 0.1 => ctrl+shift+down

Emmet: Decrement by 1 => ctrl+down

Emmet: Decrement by 10 => ctrl+alt+down

 

---

 

설정 방법

1. vscode에서 ctrl+shift+p 를 입력해서 comment palette를 열어줍니다.
2. 바로 가기 를 입력하고 기본 설정: 기본 바로 가기 키 열기(JSON) 을 클릭하여 keybindings.json 을 열어줍니다.

 

 

3. 배열 안에 아래의 코드를 추가해줍니다.

  {
    "key": "ctrl+alt+up",
    "command": "editor.emmet.action.incrementNumberByOneTenth",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+up",
    "command": "editor.emmet.action.incrementNumberByOne",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+shift+up",
    "command": "editor.emmet.action.incrementNumberByTen",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+shift+down",
    "command": "editor.emmet.action.decrementNumberByTen",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+down",
    "command": "editor.emmet.action.decrementNumberByOne",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+alt+down",
    "command": "editor.emmet.action.decrementNumberByOneTenth",
    "when": "editorHasSelection"
  }

 

• 설정한 모습

 

---

 

"when": "editorHasSelection"를 추가한 이유

• 기본 키 바인딩과 command가 겹치기 때문입니다.

•  예를 들어 ctrl+down, ctrl+up은 기본 키 바인딩에 다음과 같이 세팅돼있습니다.

{ "key": "ctrl+down",             "command": "scrollLineDown",
                                     "when": "textInputFocus" },
{ "key": "ctrl+up",               "command": "scrollLineUp",
                                     "when": "textInputFocus" },

• 따라서 커맨드가 발동하는 조건인 when 조건을 다르게 했습니다.

• "editorHasSelection"는 텍스트를 선택했을 때를 의미합니다.

---

 

참고

• https://www.roboleary.net/2021/10/11/vscode-increment-decrement-numeric-values-keyboard-shorcuts.html

VS Code - Quickly increment and decrement numeric values with keyboard shortcuts

• https://code.visualstudio.com/api/references/when-clause-contexts

when clause contexts