Vim 모드 구현

Claude Code는 터미널 입력 영역에서 완전한 Vim 키바인딩을 지원합니다. 약 700줄, 5개 파일로 구성된 이 구현은 Vim의 모달 편집 철학을 충실하게 재현하며, 순수 함수 기반의 상태 머신으로 예측 가능한 동작을 보장합니다.

핵심 설계 원칙:

• 순수 함수: 상태 전환은 (VimState, Input) => VimState 형태의 순수 함수
• 판별 유니온: 모든 상태를 TypeScript 판별 유니온으로 표현하여 컴파일 타임 안전성 보장
• 의존성 역전: 에디터 API에 직접 의존하지 않고 컨텍스트 인터페이스를 통해 통신
• 유니코드 안전: Intl.Segmenter를 사용하여 이모지, CJK 등 모든 유니코드 문자를 올바르게 처리

VimState는 TypeScript 판별 유니온(discriminated union)으로 표현됩니다. 최상위에서 INSERT 모드와 NORMAL 모드로 나뉘고, NORMAL 모드 안에서 11개의 CommandState 변형이 존재합니다.

// VimState — 판별 유니온
type VimState =
  | { mode: 'INSERT' }
  | { mode: 'NORMAL'; commandState: CommandState }

// CommandState — 11개 변형
type CommandState =
  | { type: 'IDLE' }                                  // 입력 대기
  | { type: 'OPERATOR_PENDING'; operator: Operator }   // d, c, y 후 모션 대기
  | { type: 'COUNT'; digits: string }                  // 숫자 입력 중
  | { type: 'REPLACE_CHAR' }                           // r 후 문자 대기
  | { type: 'FIND_CHAR'; direction: Direction }         // f/F/t/T 후 문자 대기
  | { type: 'REGISTER' }                               // " 후 레지스터 키 대기
  | { type: 'MARK_SET' }                               // m 후 마크 키 대기
  | { type: 'MARK_JUMP' }                              // ' 후 마크 키 대기
  | { type: 'G_PREFIX' }                               // g 후 다음 키 대기
  | { type: 'Z_PREFIX' }                               // z 후 다음 키 대기
  | { type: 'VISUAL'; start: Position; end: Position }  // 비주얼 선택

상태 전환은 순수 함수로 구현됩니다. 현재 상태와 입력을 받아 새로운 상태를 반환하며, 부수 효과가 없습니다.

// 전환 함수 — 순수 함수: (상태, 입력) => 새 상태
function transition(
  state: VimState,
  input: KeyInput,
  ctx: VimContext
): TransitionResult {
  if (state.mode === 'INSERT') {
    if (input.key === 'Escape') {
      return { state: { mode: 'NORMAL', commandState: { type: 'IDLE' } } }
    }
    return { state, textEdit: { insert: input.char } }
  }

  // NORMAL 모드 전환
  switch (state.commandState.type) {
    case 'IDLE':
      return handleIdleInput(state, input, ctx)
    case 'OPERATOR_PENDING':
      return handleOperatorPending(state, input, ctx)
    case 'COUNT':
      return handleCount(state, input, ctx)
    // ... 나머지 11개 변형 처리
  }
}

TransitionResult는 새 상태뿐 아니라 텍스트 편집 명령, 커서 이동, 스크롤 등의 효과도 포함합니다. 이 효과들은 호출자가 적용하며, 전환 함수 자체는 순수합니다.

모션 (순수 커서 수학)

모션은 커서 위치를 계산하는 순수 함수입니다. 현재 커서 위치와 텍스트 내용을 받아 새 커서 위치를 반환합니다. w(단어 앞으로), b(단어 뒤로), 0(줄 시작), $(줄 끝) 등이 있습니다.

// 모션 — 순수 커서 위치 계산
function wordForward(text: string, cursor: number): number {
  const segmenter = new Intl.Segmenter('en', { granularity: 'word' })
  const segments = [...segmenter.segment(text.slice(cursor))]
  const nextWord = segments.find(s => s.isWordLike && s.index > 0)
  return nextWord ? cursor + nextWord.index : text.length
}

연산자 (텍스트 변형)

연산자는 모션이 정의한 범위에 대해 텍스트 변형을 수행합니다. d(삭제), c(변경), y(복사) 등이 있습니다. 연산자 + 모션 조합으로 작동합니다: dw = 삭제 + 단어 앞으로.

// 연산자 — 텍스트 범위에 대한 변형
function applyOperator(
  op: Operator,
  range: { start: number; end: number },
  text: string
): OperatorResult {
  switch (op) {
    case 'delete':
      return {
        text: text.slice(0, range.start) + text.slice(range.end),
        cursor: range.start,
        register: text.slice(range.start, range.end)
      }
    case 'change':
      return {
        text: text.slice(0, range.start) + text.slice(range.end),
        cursor: range.start,
        register: text.slice(range.start, range.end),
        enterInsert: true
      }
    case 'yank':
      return { text, cursor: range.start, register: text.slice(range.start, range.end) }
  }
}

텍스트 객체 (구조적 선택)

텍스트 객체는 구조적 단위(단어, 문장, 괄호 쌍 등)를 선택합니다. iw(inner word), aw(a word), i((괄호 내부), a"(따옴표 포함) 등이 있습니다.

점 반복 (.)

Vim의 핵심 기능인 점 반복은 마지막 편집 명령을 재실행합니다. 구현에서는 마지막 텍스트 변형 명령(연산자 + 모션/텍스트 객체)을 기록하고, . 입력 시 같은 명령을 현재 커서 위치에서 재실행합니다.

// 점 반복 — 마지막 편집 명령 기록 및 재실행
interface DotRepeatRecord {
  operator: Operator
  motion: Motion | TextObject
  count: number
  insertedText?: string  // 'change' 연산자의 경우
}

function handleDotRepeat(
  state: VimState,
  lastEdit: DotRepeatRecord,
  ctx: VimContext
): TransitionResult {
  const range = resolveMotion(lastEdit.motion, ctx.cursor, ctx.text, lastEdit.count)
  return applyOperator(lastEdit.operator, range, ctx.text)
}

복합 카운트 (2d3w)

Vim에서 카운트는 연산자 앞과 모션 앞 모두에 올 수 있습니다. 2d3w는 "3단어 삭제를 2번 반복" = 6단어 삭제를 의미합니다. 구현에서는 두 카운트를 곱하여 최종 카운트로 사용합니다.

// 복합 카운트: 2d3w = 6단어 삭제
function resolveCount(operatorCount: number, motionCount: number): number {
  return (operatorCount || 1) * (motionCount || 1)
}

컨텍스트 인터페이스 (의존성 역전)

Vim 모듈은 에디터 API에 직접 의존하지 않습니다. 대신 VimContext 인터페이스를 정의하고, 호출 코드가 이를 구현합니다. 이를 통해 Vim 로직을 독립적으로 테스트할 수 있고, 다른 에디터에서도 재사용할 수 있습니다.

// VimContext — 의존성 역전 인터페이스
interface VimContext {
  text: string           // 현재 텍스트 내용
  cursor: number         // 커서 위치 (오프셋)
  lineCount: number      // 전체 줄 수
  getLine(n: number): string  // n번째 줄 내용
  getCursorLine(): number   // 커서가 있는 줄 번호
  getCursorCol(): number    // 커서의 열 위치
}

Intl.Segmenter 유니코드 안전

Vim의 단어 이동(w, b, e)은 "단어"의 경계를 정확히 인식해야 합니다. JavaScript의 정규식은 유니코드를 완전히 지원하지 않지만, Intl.Segmenter는 유니코드 표준에 따라 단어 경계를 정확히 식별합니다.

// Intl.Segmenter로 유니코드 안전한 단어 경계 감지
const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' })
const text = 'hello 세계 🌍'
for (const { segment, isWordLike } of segmenter.segment(text)) {
  // 'hello' → isWordLike: true
  // '세계'  → isWordLike: true
  // '🌍'   → isWordLike: false (이모지)
}