VScode Snippet 만들기 🔨

1. 👉 snippet 파일 생성

1) 파일 메뉴 -> Preferences -> Configure User Snippets

2) 전역으로 사용하기 위한 New Global Snippets file 선택

또는 해당 프로젝트 영역에서만 사용하려면 아랫 줄의 New Snippets file for '[Project folder name]' 선택

❗ 번외) 단축키로 snippet 설정 검색

window 단축키 : ctrl + shift + P -> snippet검색

mac 단축키 : cmd + shift + P -> snippet검색

---

2. 👉 스니펫 파일 이름 작성

---

3. 👉 스니펫 코드 작성

{
	"Vanilla js Component": {
		"scope": "javascript,typescript",
		"prefix": "vc",
		"body": [
			"import { Component } from '@/core/core'",
			"",
			"export default class $TM_FILENAME_BASE extends Component{",
			"  constructor(){",
			"    super()",
			"  }",
			"",
			"  render(){",
			"    this.el.innerHTML = /*html*/`",
			"      $1",
			"    `",
			"  }",
			"}"
		],
		"description": "Vanilla js Component 기본 생성입니다."
	},
	"Vanilla js innerHTML": {
		"scope": "javascript,typescript",
		"prefix": "vc-inner",
		"body": [
			"this.el.innerHTML = /*html*/`",
			"  $1",
			"`;",
		],
		"description": "Vanilla js innerHTML 자동완성입니다."
	},
	"Vanilla js document": {
		"scope": "javascript,typescript",
		"prefix": "vc-doc",
		"body": [
			"const $1 = document.querySelector('$2')",
			"$3",
		],
		"description": "Vanilla js document 자동완성입니다."
	},
	"Vanilla js addEventListener": {
		"scope": "javascript,typescript",
		"prefix": "vc-addevent",
		"body": [
			"this.el.addEventListener('$1', () => {",
			"  $2",
			"})"
		],
		"description": "Vanilla js addEventListener 자동완성입니다."
	},
}

---

4. 👉 등록한 스니펫 코드 자동 완성 테스트 ✅