VS Code에서 react code snippet 만들어 쓰기

매번 컴포넌트 만들때마다 동일하게 작성하는 코드가 있다.

예를 들어 LoginTemplate이라는 컴포넌트를 만든다면 아래와 같은 식으로 작성해주는데, 이 동일한 코드를 매번 컴포넌트 만들때마다 반복하다보니 snippet을 만들어 개발 효율성을 좀 더 높이고자 하였다.

import React from 'react';
import styles from './LoginTemplate.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const LoginTemplate = () => {
    return(
        <div className = { cx('LoginTemplate') }>
        </div>
    )
}

export default LoginTemplate;

VSCode에서 snippet을 설정하는 방법은 아래와 같다.

위의 코드를 예시로 들어 살펴보자.

1. 먼저, https://snippet-generator.app에 들어가서 왼쪽 칸에 위의 코드를 복붙해준다.

2. LoginTemplate이란 단어를 모두 ${TM_FILENAME_BASE}로 바꿔준다. 확장자를 제외한 현재 파일 이름으로 바꾸는 것이다.

그리고 Description에는 이 snippet에 대한 설명을 입력해 준다. 나는 Customized React Functional Component로 적어주었다. TagTrigger에는 crfc로 정해주었는데, 이는 나중에 snippet을 사용할 때 입력하는 단축 이름이다.

3. 모두 작성 했으면 오른쪽의 Copy snippet을 눌러 snippet을 복사해준다.

그리고 VSCode로 돌아가 아래의 메뉴를 열어보자.

Code > Preferences > User Snippets (Code > 기본설정 > 사용자코드 조각)

그러면 아래와 같은 창이 뜨는데, 여기에 javascriptreact를 입력해준뒤, javascriptreact.json파일로 들어가 방금 복사한 snippet을 복붙 후 저장한다.

5. 자, 이제는 이 snippet을 사용할 js파일을 열어준다. 작성한 snippet은 JavaScript에서는 사용할 수 없고 JavaScriptReact에서만 사용할 수 있으므로, 파일 우측 하단의 JavaScript를 클릭한뒤 Configure File Association for '.js'('.js'에 대한 파일 연결 구성)를 선택하여 JavaScriptReact를 선택한다.

6. 그리고 이제 파일에 아까 지정해준 단축 이름을 입력해주면 짜잔!하고 코드가 나온다.