VIM | Surround.vim 사용하기

Vim 에디터를 사용하고 있다면, 필수로 사용해야 하는 플러그인이라고 생각된다. 괄호, HTML 태그 및 따옴표 같은 값을 몇번의 단축키를 통해서 입력할 수 있다.

설치

surround.vim in awesome-vim 에서 설치방법을 통해서 설치를 진행한다. 별도의 옵션을 설정할 필요없이 바로 사용할 수 있다.

학습 팁

우선, 플러그인 작동 발식을 이해합니다.

• 감싸기(surround)(ys)
• 삭제(delete)(ds)
• 바꾸기(change)(cs)

그리고, 아래에 나와있는 예제를 따라 가세요. 기본 사항들이 이해가 된다면, 코딩에 직접 하시기 바랍니다.

빠르게 개선하기 위해서는 신중한 연습을 필요로 합니다. 매일 약한 부분(ex: 따옴표로 여러단어 추가)을 파악하고, 관련 예제들을 통해 작업하고, 더 많은 예제를 직접 작성 해 봅니다. 그리고, 반복적인 테스트를 진행하시기 바랍니다. 너무 많이 생각할 필요 없이 {motion}과 단축키를 입력하세요.

며칠동안 하루에 몇분이라도 작업을 한다면, surround.vim을 빠르게 사용할 수 있게 될 것입니다.

  Old text                  Command     New text ~
  "Hello *world!"           ds"         Hello world!
  [123+4*56]/2              cs])        (123+456)/2
  "Look ma, I'm *HTML!"     cs"<q>      <q>Look ma, I'm HTML!</q>
  if *x>3 {                 ysW(        if ( x>3 ) {
  my $str = *whee!;         vllllS'     my $str = 'whee!';

• 기본메뉴얼 surround.txt

감싸기

한 단어 감싸기

I am happy.
I am "happy".

ysiw"
(ys: 감싸기; iw: 둘러싸고 싶은 단어 위에 커서가 위치한 상태의 전체 단어; ": "로 감싸기

한 줄 감싸기

I am happy; she is sad.
(I am happy; she is sad.)

yss)
(ys: 감싸기 추가; s: 한줄 선택; ) 한 줄을 괄호로 감싼다 )

Note: 만약 yss(로 입력을 하게 되면 괄호 사이에 공간이 추가 된다. ( I am happy; she is sad. )

태그로 단락 또는 한줄 감싸기

Hello World! How are you?
<p>Hello World! How are you?</p>

yss<p>

(yss: 감쌀(surround) 한줄을 선택; <p> 태그를 추가한다.)

다중 단어 감싸기

I am very very happy.
I am *very very* happy.

ys2aw*

(ys: 감싸기 추가; 2: 감쌀 단어의 숫자; aw: 단어 주위; *: *로 깜싼다)

다중 단어 태그로 감싸기

Hello World! How are you?
<h1>Hello World</h1>! How are you?

ys2aw<h1>

다중 단어 감싸기와 동일하다.

선택 영역 감싸기

The solution is x + y = z. You responded wrongly.
The solution is `x + y = z`. You responded wrongly.

veeeeeS`
커서를 단어 x에 위치한 상태로v로 Visual Mode로 들어 간 후, S 선택 영역을 `로 감싸기

제거

감싸기 삭제

"Hello World!"
Hello World

ds"
(ds: 감싸기 삭제; ": 쌍따옴표 삭제하기

감싼 태그 제거

<em><p>Hello World!</p></em>
Hello World!

dstdst
감싼 태그를 삭제한다. 커서가 안쪽에 있으면, 안쪽 부터 삭제
바깥에 커서가 위치하고 있으면, 바깥 쪽부터 제거한다.

변경

감싸기 변경

"Hello World!"
*Hello World!*

cs"*
(cs: 감싸기 변경; ": 변경 대상자; *: *로 변경)

태그 변경

<p>Hello World!</p>
<em>Hello World!</em>

cst
(cst: 감싸기 변경 태그; <em>: 새로운 태그명)

일반적인 예제

계산식에 괄호 추가하기

3 + 2 + 5 + 7 / 4    # 괄호가 없기에 계산 결과가 달라진다.
3 + 2 + 5 + 7 / 4    # 3에 커서를 위치한 상태에서 veeeeS)iprint
(3 + 2 + 5 + 7) / 4
(3 + 2 + 5 + 7) / 4
print((3 + 2 + 5 + 7) / 4)

메뉴얼 참조

surround.vim에서 기본으로 제공되고 있는 surround.txt에서도 많은 예문을 찾아 볼 수 있다. 이부분만 한번씩 따라해도 어떻게 사용하는 건지 감이 온다.

Old text에 포함되어 있는 *은 커서의 위치다.

  Old text                  Command     New text ~
  "Hello *world!"           ds"         Hello world!
  [123+4*56]/2              cs])        (123+456)/2
  "Look ma, I'm *HTML!"     cs"<q>      <q>Look ma, I'm HTML!</q>
  if *x>3 {                 ysW(        if ( x>3 ) {
  my $str = *whee!;         vllllS'     my $str = 'whee!';

삭제

  Old text                  Command     New text ~
  "Hello *world!"           ds"         Hello world!
  (123+4*56)/2              ds)         123+456/2
  <div>Yo!*</div>           dst         Yo!

변경

  Old text                  Command     New text ~
  "Hello *world!"           cs"'        'Hello world!'
  "Hello *world!"           cs"<q>      <q>Hello world!</q>
  (123+4*56)/2              cs)]        [123+456]/2
  (123+4*56)/2              cs)[        [ 123+456 ]/2
  <div>Yo!*</div>           cst<p>      <p>Yo!</p>