Vim motions with vscode

Vim? Vim Motions이 뭐지?

Vim이란?

Vim은 모드 기반 텍스트 편집기입니다.

여러 모드가 있지만 가장 많이 쓰는 3가지는 다음과 같습니다:

Normal mode: ‘단축키’가 활성화된 상태 (기본 상태)
Insert mode: 우리가 아는 일반적인 ‘메모장’ 상태
Command mode: VSCode의 Ctrl + P와 비슷한 느낌

Vim의 역사

Vim은 Vi iMproved의 줄임말로, 1991년 Bram Moolenaar가 Vi를 확장 및 개선하여 만든 편집기입니다. Vi는 1976년 빌 조이(Bill Joy)가 만들었습니다.

당시 컴퓨터는 GUI가 아닌 터미널로 소통했기 때문에 마우스 없이 키보드만으로 모든 작업을 수행했습니다. 심지어 방향키도 없던 시절이라 h, j, k, l 키로 커서를 움직였습니다.

왜 Vim Motions을 배우게 되었나?

저는 고등학교 시절 기능 대회 입상을 목표로 개발을 배웠습니다. 대회에서 입상하려면 문제 푸는 속도가 굉장히 중요했습니다.

그래서 VSCode 단축키를 열심히 외우고, 독수리 타자를 교정하고, 마우스를 최대한 안 쓰려고 노력하면서 속도를 높였습니다. 모든 것을 단축키로 해결하거나 VSCode 설정을 수정하면서 조금씩 속도를 단축했습니다.

그러던 어느 날 Vim에 대한 유튜브를 보게 되었고, 지금보다 훨씬 더 속도를 단축할 수 있을 것 같아서 사용하게 되었습니다.

Vim Motions의 장점

손을 키보드에서 떼지 않고 효율적으로 텍스트를 탐색하고 편집할 수 있습니다
방향키도 사용하지 않아 손 이동이 최소화됩니다
문자, 단어, 줄, 문단뿐만 아니라 괄호, 함수, 태그 등 코드 구조 단위로 정교하게 이동할 수 있어 복잡한 코드 탐색에 유리합니다
생각지도 못한 편리한 기능들이 존재합니다

제가 Vim 자체를 사용하지 않는 이유

저는 Vim 텍스트 에디터 자체를 사용하지 않고, VSCode에서 VSCodeVim 익스텐션을 설치해서 사용하고 있습니다.

Vim 자체를 사용하지 않는 이유는 다음과 같습니다:

설정할 것이 너무 많다: Vim은 Lua라는 프로그래밍 언어로 설정이 가능할 정도로 커스터마이징이 방대합니다. VSCode 같은 IDE가 아니다 보니 Git, 검색, 파일 탐색 등 모든 기능을 직접 설정해야 해서 시간이 너무 많이 걸립니다.
VSCode와의 결합도가 높다: 웬만한 Vim 기능들은 VSCodeVim에 존재합니다.
시간 투자 대비 효율: Vim을 제대로 사용하려면 더 많이 배우고 시간 투자를 해야 합니다.

Vim Motions이란?

개별 명령어 하나하나는 특별할 것이 없지만, 명령들과 연산자들이 조합되면 텍스트를 자유자재로 제어할 수 있습니다. 이 조합을 Motions이라고 합니다.

기본 이동 (h, j, k, l)

화살표 키 대신 h, j, k, l로 이동합니다.

키	동작
`h`	왼쪽
`j`	아래
`k`	위
`l`	오른쪽

팁: 숫자와 조합하면 여러 줄/칸을 한 번에 이동할 수 있습니다. 예: 5j = 5줄 아래로

단어 이동 (w, b, e, W, B, E)

키	동작
`w`	다음 단어 시작으로
`b`	이전 단어 시작으로
`e`	현재/다음 단어 끝으로
`W`, `B`, `E`	공백 기준으로 이동 (특수문자 무시)

예시: user_id_123에서 w를 누르면 _ 단위로 끊기지만, W를 누르면 공백까지 한 번에 이동합니다.

줄 시작/끝 이동 (0, ^, $)

키	동작
`0`	줄의 맨 처음으로
`^`	줄의 첫 번째 문자로 (공백 제외)
`$`	줄의 맨 끝으로

문자 검색 (f, F, t, T)

키	동작
`f{char}`	현재 줄에서 앞으로 {char} 찾아서 이동
`F{char}`	현재 줄에서 뒤로 {char} 찾아서 이동
`t{char}`	{char} 직전으로 이동
`T{char}`	{char} 직후로 이동 (뒤로)
`;`	같은 검색 반복
`,`	역방향으로 검색 반복

예시: f( 로 괄호로 이동, f{ 로 중괄호로 이동

줄 번호 이동 (gg, G, {n}G)

키	동작
`gg`	파일 맨 처음으로
`G`	파일 맨 끝으로
`{n}G` 또는 `{n}gg`	n번째 줄로
`:{n}`	n번째 줄로 (Command 모드)

삭제 연산자 (d + motion)

명령	동작
`dw`	단어 삭제
`d$`	줄 끝까지 삭제
`d0`	줄 처음까지 삭제
`dd`	줄 전체 삭제
`d2w`	2단어 삭제
`di(`	괄호 안 전체 삭제

변경 연산자 (c + motion)

c는 삭제 후 Insert 모드로 전환됩니다.

명령	동작
`cw`	단어 변경
`c$`	줄 끝까지 변경
`cc`	줄 전체 변경
`ciw`	현재 단어 전체 변경 (inner word)

대부분 대문자 버전도 있습니다. 예를 들어, 소문자 f는 커서 기준 앞에 있는 문자를 찾지만, 대문자 F는 커서 기준 뒤로 찾습니다.

복사/붙여넣기 (y, p)

명령	동작
`yy`	줄 복사
`yw`	단어 복사
`y$`	줄 끝까지 복사
`p`	커서 뒤에 붙여넣기
`P`	커서 앞에 붙여넣기

Text Object (i, a + object)

가장 강력한 기능입니다! 꼭 익히세요.

따옴표 안 조작

1
const message = 'Hello, World!';

명령	동작
`ci"`	따옴표 안 내용 변경
`di"`	따옴표 안 내용 삭제
`yi"`	따옴표 안 내용 복사

괄호 안 조작

1
2
3
function exampleFunction(param1, param2, param3) {
  console.log(param1, param2, param3);
}

명령	동작
`ci(`	괄호 안 파라미터 전체 변경
`di(`	괄호 안 전체 삭제

중괄호 안 조작

1
2
3
4
5
const config = {
  name: 'test',
  value: 123,
  active: true,
};

명령	동작
`ci{`	중괄호 안 전체 변경
`di{`	중괄호 안 전체 삭제

백틱 안 조작 (템플릿 리터럴)

1
const template = `Hello, ${name}! Welcome to ${place}.`;

명령	동작
`ci``	백틱 안 전체 변경

검색 (/, ?, *, #, n, N)

명령	동작
`/{pattern}`	아래 방향으로 검색
`?{pattern}`	위 방향으로 검색
`n`	다음 결과
`N`	이전 결과
`*`	현재 커서 단어를 아래 방향 검색
`#`	현재 커서 단어를 위 방향 검색

Visual 모드 (v, V, Ctrl+v)

명령	동작
`v`	문자 단위 선택
`V`	줄 단위 선택
`Ctrl+v`	블록(열) 선택

Visual 모드에서 선택 후:

d - 삭제
c - 변경
y - 복사
> - 들여쓰기
< - 내어쓰기

들여쓰기 (>, <)

명령	동작
`>>`	현재 줄 들여쓰기
`>j`	현재 줄 + 아래 줄 들여쓰기
`>3j`	현재 줄 + 아래 3줄 들여쓰기

대소문자 변환 (gu, gU, ~)

명령	동작
`gu$`	줄 끝까지 소문자로
`guiw`	현재 단어 소문자로
`gU$`	줄 끝까지 대문자로
`gUiw`	현재 단어 대문자로
`~`	커서 위치 문자 대소문자 토글

매크로 (q, @)

반복 작업을 자동화할 수 있습니다.

명령	동작
`q{register}`	매크로 녹화 시작 (예: `qa`)
`q`	녹화 종료
`@{register}`	매크로 실행 (예: `@a`)
`@@`	마지막 매크로 반복
`{n}@{register}`	매크로 n번 반복 (예: `3@a`)

연습 예시: const를 let으로 바꾸기

qa 로 녹화 시작
^cw let + Esc + j
q 로 녹화 종료
@a 로 반복, 또는 3@a 로 3번 반복

실제로 제가 쓰는 방법

저는 Vim Motions과 VSCode 단축키를 결합해서 사용하고 있습니다.

자주 사용하는 조합들

명령	동작
`dib`, `cib`, `yib`	괄호 안 삭제/변경/복사
`yi{`, `yi"`	중괄호/따옴표 안 복사
`t,`, `f{char}`	특정 문자까지/로 이동
`gd`	정의로 이동
`gb`	같은 단어 다중 선택
`gx`	링크 열기
`:qa`	모든 창 닫기
`:tabo`	현재 탭 제외 모두 닫기
Marks	특정 위치 저장 및 이동
Leader 키 활용	커스텀 단축키

화면 분할 및 이동

화면 분할
분할된 화면 간 이동
페이지 간 이동
터미널 생성 및 이동
자동완성 선택 이동

단점

익숙해지기까지 시간이 오래 걸립니다
처음 배울 때는 개발하는 것보다 키보드 자체를 처음 사용하는 느낌이 듭니다
업무 효율이 90% 떨어집니다 (처음에는)
회사에서 연습하면 위험합니다!
처음에는 기능이 너무 많아서 부담스럽습니다
텍스트를 쓰면서 ‘이렇게 답답할 수 있구나’를 느끼고 포기하고 싶어집니다

마무리

Vim Motions은 처음에는 어렵지만, 익숙해지면 텍스트 편집 속도가 비약적으로 향상됩니다.

Vim? Vim Motions이 뭐지?#

Vim이란?#

Vim의 역사#

왜 Vim Motions을 배우게 되었나?#

Vim Motions의 장점#

제가 Vim 자체를 사용하지 않는 이유#

Vim Motions이란?#

기본 이동 (h, j, k, l)#

단어 이동 (w, b, e, W, B, E)#

줄 시작/끝 이동 (0, ^, $)#

문자 검색 (f, F, t, T)#

줄 번호 이동 (gg, G, {n}G)#

삭제 연산자 (d + motion)#

변경 연산자 (c + motion)#

복사/붙여넣기 (y, p)#

Text Object (i, a + object)#

따옴표 안 조작#

괄호 안 조작#

중괄호 안 조작#

백틱 안 조작 (템플릿 리터럴)#

검색 (/, ?, *, #, n, N)#

Visual 모드 (v, V, Ctrl+v)#

들여쓰기 (>, <)#

대소문자 변환 (gu, gU, ~)#

매크로 (q, @)#

실제로 제가 쓰는 방법#

자주 사용하는 조합들#

화면 분할 및 이동#

단점#

추천 학습 자료#

마무리#