VSCode 스니펫, 자동완성 키워드 생성

사용법

항상 반복되는 코드가 있다면 스니펫을 쓰길 추천

1. 스니펫 열기

ctrl + shift + p 누르고

User Snippets을 검색한다

엔터를 치면 다시 새로운 검색창이 열린다

 

여기서 등록하고싶은 확장자 예를들면

Javascript에서만 작동되는 스니펫을 만들고싶다?

그럼 javascript.json을 검색하면된다

 

검색 후 엔터

2. 스니펫 등록

이제 코드를 스니펫에 등록할 차례다

 

스니펫은 json파일이라서

키와 벨류 형식으로 이뤄져있다.

 

key 부분은 아래에 해당한다

나는 같은 모듈이니까 모든 스니펫의 키를 중복으로 등록하고싶었는데

키를 중복해서 6개 정도까지는 등록이 되다가

그 이후부터는 에러가 났다.

그래서 일단은 뒤에 1 2 3 이런식으로 붙여나갔다.

 

 

다음은 value부분이다

   - prefix: 스니펫이름(자동완성키워드에 표시될 항목명)

   - body: 여기에 코드를 한줄씩 담는데,  한줄마다 " " 로 감싸줘야함

               $1 $2 이건 커서의 위치이다

               처음 생성되자마자 $1위치로 커서가 이동하고 탭을누르면 $2로 커서가 이동한다

   - decription: 설명//생략가능

 

3. 스니펫 사용

저장한 후 js 코드로 돌아와서 

모듈앞 몇글자만 쳐도 자동완성키워드에 뜬다

 

나는 개발한 모듈을 스니펫에 다 등록시켜줬다

 

4. 스니펫 body 예시

"NivusComponent4": 
		{
			"prefix": "MiddleboxC",
			"body": [
			"//색상 tc1:흰색 tc2:하늘 tc3:초록: tc4:노랑 tc5:주황 tc6:보라 tc7:붉은핑크 tc:연한파랑"
			"let ob={"
			"	data:["
			"		{name:'총 유입유량',"
			"		val:282,"
			"		unit:'mg/L',"
			"		color:'tc2'},"
			"		{name:'평균값',"
			"		val:282,"
			"		unit:'mg/L',"
			"		color:'tc3'},"
			"		]"
			"}"
			"{ob.data && <NC.MiddleboxC ob = {ob}/>}"

			],
			"description": "MiddleboxC"
		}
	,