[15주차 - DAY5] 스니펫

스니펫 만들기

스니펫은 키워드와 템플릿을 설정하면 키워드를 입력했을 때 해당 템플릿이 입력되게 해준다.

즉, 자동완성 기능을 사용할 수 있게 해주기 때문에 반복 타이핑을 피할 수 있다.

 

1. vscode의 확장에서 스니펫을 설치한다.

 

2. 컴포넌트 이름이 들어가는 부분들에 $1을 입력한다. $1은 스니펫이 입력된 직후에 커서가 위치하는 곳이다.

참고로 $1에서 탭을 누르면 $2로 이동한다.

import styled from "styled-components";

function $1() {
    return (
        <$1Style>
            <div>$1 body</div>
        </$1Style>
    );
}

const $1Style = styled.div``;

export default $1;

 

3. 등록할 코드를 드래그하고 우클릭해서 generate snippet 클릭한다.

 

4. 대응 언어를 선택한다.

 

5. 스니펫 이름을 입력한다.

 

6. 스니펫 트리거를 설정한다. 여기서 설정한 이름을 입력하면 실행이 된다.

 

7. 설명을 작성한다.

 

8. 트리거로 설정한 이름을 입력하면 등록했던 코드가 나타난다.

import styled from "styled-components";

function () {
    return (
        <Style>
            <div> body</div>
        </Style>
    );
}

const Style = styled.div``;

export default ;