[React / ts] 스니펫 사용하기

VSCode에서는 스니펫을 사용하여 반복되는 코드 조각들을 편리하게 입력할 수 있다.

 

VSCode 좌측 하단의 설정을 누른다.

 

코드 조각을 누른다.

 

typescriptreact를 선택한다. (작업 환경에 맞는 언어와 프레임워크를 선택하면 된다)

 

 

 

VSCode Extension에는 스니펫의 추가를 도와주는 여러 확장 프로그램들이 존재한다.

Snippet Generator를 설치해준다.

 

스니펫을 추가하고자 하는 코드가 포함된 파일을 연다.

 

코드를 드래그한 뒤 팔레트 확장(Ctrl + Shift + P)를 눌러 Generate Snippet에 들어간다.

이후 이름, 설명 등을 입력하면 스니펫이 클립보드에 복사된다.

 

처음에 열었던 typescriptreact.json에 복사한 스니펫을 붙여넣는다.

 

이제 VSCode에서 _comp를 입력하여 지정해둔 스니펫을 사용할 수 있다.

 

추가적으로 "틀"을 만들어 원하는 변수명을 입력해야 할 때 $1, $2... 를 활용할 수 있다.

위의 변수명 부분들을 $1으로 입력하면 이후에 스니펫을 불러왔을 때 편리하게 변수명들을 설정할 수 있다.