vim-react-snippets 사용하기

vim-react-snippets 를 사용하여 타이핑을 줄인다.

설치

1. 먼저 vim-plug 를 설치.

2. ~/.vimrc 에 다음 내용을 추가한다.

call plug#begin('~/.vim/plugged')
Plug 'SirVer/ultisnips'
Plug 'mlaursen/vim-react-snippets'
call plug#end()

3. 추가 내용 반영

:so % <cr> 

4. 플러그인 설치

:PlugInstall <cr>

샘플 리스트

사용 가능한 샘플 리스트는 다음 파일에 있다. (또는 Cheatsheet 참조)

~/.vim/plugged/vim-react-snippets/UltiSnips/javascript.snippets

사용하기

기본적으로 트리거를 입력후 탭키로 변환한다. (vim-react-snippets 의 동영상 참조)

입력 포인트가 여러 곳이 있을 때, 이동은 <c-j> 와 <c-k> 로 한다. 

입력 예

1) import { Component } from 'react';

트리거 정의

--------------------------------------------------------------------------------
snippet impn "import { nested } from" b
import { $1 } from '$2'
endsnippet
--------------------------------------------------------------------------------

입력

impn <tab> Component <c-j> react <c-j> ;

2) import React from 'react';

트리거 정의

--------------------------------------------------------------------------------
snippet imp "import package that converts from camelCase or PascalCase to kebab-cased" b
import $1 from '$2`!p snip.rv=lowerdash(t[1])`'
endsnippet
--------------------------------------------------------------------------------

입력

imp <tab> React <c-j> <c-j> ;