14-5 스니펫

14-5 스니펫

스니펫

---

Snippet
짧은 코드 조각이라는 뜻.

자주 사용되거나 반복되는 코드(로직)을 정의하여, 재사용성을 높인 코드블록입니다.
e.g. 확장프로그램ES7+ React을 설치 후 rfc를 입력하면 리액트 함수의 구조를 자동으로 생성해주는 것이 스니펫에 해당함.

설치

• Microsfot 링크1 에서 설치
  or
• VSCode 확장프로그램 관리탭에서 Snippet Generator 검색하여 설치

설치한 후 VSC좌측하단 톱니모양의 아이콘을 클릭하면, Snippets(사용자 코드 조각)옵션을 확인할 수 있습니다.

해당 메뉴를 선택하여 원하는 확장자의 스니펫을 등록할 수 있습니다.

import styled from "styled-components"

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

const $1Style = styled.div``

export default $1

$1 : 스니펫이 입력된 직후 커서가 위치하는 지점
$2 : Tab키 입력시 $1 다음으로 이동되는 지점

1. 위와 같이 스니펫으로 만들 코드를 작성한 다음
2. 드래그해서 선택하고, 우클릭하여
3. 'Generate Snippet'를 선택합니다.

이후

1. 대응언어 : 스니펫을 사용할 언어(language)
2. 이름 : 스니펫의 이름(name)
3. 트리거 : 단축어(prefix)
4. 설명 (description)

순서대로 작성/입력해줍니다.