[React] vscode snippet(자동완성 커스텀) 설정 방법

vscode에서 함수형 컴포넌트를 작성할 때 항상 작성되는 폼이 있는데 이 때 Snippet 설정을 한다면 생산성을 높일 수 있다.

 

1. 원하는 Snippet 모양을 작성한다. (ex. 함수형 컴포넌트)

import React from 'react';

function ${TM_FILENAME_BASE}(){
    return(
        <div>

        </div>
    );
}

export default ${TM_FILENAME_BASE};

여기서 ${TM_FILENAME_BASE} 는 파일의 확장명을 제외한 파일명을 의미한다.

즉, Sample.js 파일에 생성을하면 Sample이 들어가게 된다.

 

2. snippet-generator.app/ 에 들어가서 위의 코드를 붙여넣는다.

초기 화면

①번에는 만드려는 Snippet의 설명 (ex. create functional component)

②번에는 사용하고 싶은 자동완성 단어를 설정 (ex. fc)

③번에는 코드를 붙여넣는다.

Sample

이제 오른쪽의 Copy snippet 버튼을 눌러 vscode로 이동한다.

 

3. Code > 기본설정 > 사용자 코드 조각

javascriptreact.json

javascriptreact.json에 아까 복사한 Snippet을 붙여넣는다.

 

4. Snippet 자동완성 사용하는 방법

사용하려고 자동완성 코드를 써보면 자동완성이 없는걸 볼 수 있다.

이럴 때는 오른쪽 하단의 Javascript를 클릭해서 JavaScript React로 바꿔준다

이렇게 설정이 끝나면 자동완성을 할 수 있게된다.