[VScode] snippet 만들기

do_Rang·2025년 4월 18일

React snippet vscode

본격적으로 react 강의를 들으면서 강하게 느낀점이 있다면
컴포넌트 만들때마다 기본 구조를 작성하는게 매우매우 귀찮다!!

기본적인 import하기, 파일 이름과 동일한 function을 생성해서 export하기까지.

수많은 컴포넌트를 만들어야하는데, 매번 이 과정을 거칠때마다 누가 자동으로 만들어줬으면.. 하고 바라게 되는 것이다.. 🥲

그래서 나는 snippet을 만들기로 결심했다.

❓ snippet이란?

작은 조각이라는 뜻으로, Code snippet은 '코드 조각'
즉, 재사용 가능한 소스 코드를 의미한다.
코드를 재사용할 수 있게 해줌으로써 반복 타이핑을 피할 수 있다!

대표적인 Code snippet은 여러 IDE에서 !+Tab을 누르면 HTML 기본 구조가 자동으로 출력되는 것이 있다.

그럼 이제 직접 만들어보자.

🚀 VSCode에서 snippet 만들기

1. Configure Snippets 메뉴 클릭

상단에서 원하는 메뉴를 선택할 수 있는데,
모든 폴더에서 사용할 Global snippet 과 현재 작업 폴더만을 위한 snippet 중 나는 Global snippet을 선택했다!

2. snippet 파일 작성하기

snippet 파일을 생성하면 다음과 같이 예시를 보여준다.
예시를 참고하여 json형태로 내가 원하는 내용을 작성하면 끝!

{
	"스니펫 이름" : {
    	"scope" : "snippet을 적용할 언어 또는 파일 타입",
        "prefix" : "호출할 때 입력하는 단어 또는 문자열",
        "body" : "코드에 삽입될 내용",
        "description" : "스니펫에 대한 설명 (도움말)"
    }
}

✨ 내가 만든 스니펫

{
	"Create React Component": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "recomp",
		"body": [
			"import { styled } from 'styled-components';",
			"",
			"function ${1:ComponentName}() {",
			"    return (",
			"        <${2:StyledDiv}></${2:StyledDiv}>",
			"    );",
			"}",
			"",
			"const ${2:StyledDiv} = styled.div``",
			"",
			"export default ${1:ComponentName}"
		],
		"description": "Create React Component"
	}
}