VS Code에서 Snippet 사용법

snippet

스니펫(snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다.

html 코드에서 !를 쓰고 탭을 누르면 기본적인 html 태그들이 자동적으로 입력되는 것처럼 다른 파일에서도 사용자가 직접 자동입력이 되게 설정해줄 수 있다.

⚒ VSCode에서 Custom Snippet 만들기

React Functional Component를 만들기 위한 예시 코드

import React from 'react';

function ${TM_FILENAME_BASE}() {
  return (
    <div>
      Hello React!
    </div>
  );
}

export default ${TM_FILENAME_BASE};

${TM_FILENAME_BASE} 는 현재 문서의 파일 이름에서 확장자를 제외한 부분을 가리키는 변수

${ } 안에는 에디터에서 이미 정의되어 있는 내장된 변수를 넣는다.

Snippet-generator 를 이용하면, 우리가 스니펫으로 만들 코드를 에디터에 맞는 스니펫 양식으로 변환할 수 있다.

위의 코드를 왼쪽에 copy&paste 하면, 오른쪽에 VSCode 에디터 양식에 맞는 스니펫 코드로 변환해준다.

 

Description에는 해당 스니펫에 대한 간단한 제목(설명)을 적으면 되고, Tab trigger를 지정해 해당 단축 트리거와 Tab을 이용해 빠르게 스니펫 코드를 불러올 수 있다.

 

VSCode에 해당 스니펫 코드를 적용해보자.

VSCode를 열고 File - Preferences - User Snippets 을 클릭해준다.  (Mac 은 Code - 기본 설정 - 사용자 코드 조각)

이후 javascript를 검색해서 javascriptreact.json 으로 들어간다.(javascriptreact 들어가면 자동으로 json파일 들어가짐)

 

이제 Snippet-Generator 에서 코드를 복사해와서 { } 안에 넣어주면 된다. 그리고 아무런 js 파일을 만들어주고 fc 입력후 탭을 누르면 코드가 자동적으로 입력되는 것으 볼 수 있다.

 

 

[부록] User defined snippets variables

${ } 안에 지정할 수 있는 변수의 예시

 

TM_SELECTED_TEXT   현재 선택된 문자열 또는 빈 문자열

TM_CURRENT_LINE   현재 선택된 줄의 콘텐츠

TM_CURRENT_WORD   커서 아래에 있는 콘텐츠 또는 빈 문자열

TM_LINE_INDEX   줄번호를 나타내는 (zero-index) 숫자

TM_LINE_NUMBER   줄번호를 나타내는 (one-index) 숫자

TM_FILENAME   현재 문서의 파일 이름

TM_FILENAME_BASE   확장자를 제외한 현재 문서의 파일 이름

TM_DIRECTORY   현재 문서의 디렉토리

TM_FILEPATH   현재 문서의 전체 파일 경로

RELATIVE_FILEPATH   현재 문서의 상대 경로(열려있는 작업창 또는 폴더 기준)

CLIPBOARD   클립보드에 저장된 콘텐츠

WORKSPACE_NAME   열려있는 작업창 또는 폴더명

WORKSPACE_FOLDER   열려있는 작업창 또는 폴더의 경로