[VS Code] 자동완성 키워드 만들기 - User Snippets

 

 VS Code에서 사용자 자동완성 키워드를 생성하는 방법에 대해 다룹니다.

설정파일에 대한 간단한 팁도 기재하였습니다.

개발생산성 뿐만아니라 팀 내 협의된 Style을 작성하는 경우 유지보수성에도 좋은 영향을 줄 것으로 예상합니다.

1. Snippets 설정메뉴

 바로가기 입력창 단축키 ('F1') → 'snippets' 입력 → "코드 조각: 사용자 코드 조각 구성" 선택 후 Enter

2. 자동완성을 사용할 파일 확장자에 따른 셋팅파일 선택

 JavaScript, HTML, CSS 등등 사용하고자 하는 파일 확장자에 맞는 (*.json) 파일을 선택한다.

본문에서는 JavaScript 확장자를 다룬다.

3. (*.json) 파일 설정방법

 별도로 수정하지 않았다면, 아래 주석란에도 설명이 기재 되어있습니다.

이 때, body 내용에 꽤 긴 내용을 기재 해야할 경우 콘솔에서 JSON.stringfy(`[자동완성내용]`) 으로 내장된 JSON API를 사용한 후 그대로 복사하여 body값에 입력하면 편리합니다.

API 인자에 전달할 때 꼭 백틱 ( ` )으로 문자열을 감싼 후 사용하세요. ( 줄바꿈, 띄워쓰기 유지 )

[JSON Object 설명]

• prefix : 자동완성 키워드
• body : 자동완성 실행 시 출력될 내용
• description : 자동완성값에 대한 부연설명 (툴팁에 출력되진 않음.)

[body 내용 생성방법]

[ JSON.stringfy( 자동완성내용 ) ]

[JSON 형태로 변환된 자동완성 소스코드 내용]

4. 수행결과 

 (3)에서 설정한 "CustomStyle"에 prefix값에 따라 자동완성 목록에 출력되고 있다.

[자동완성 목록확인]

[ 실행 결과 ]