vs code에는 code 자동완성 기능이 있다. 이를 snippets 이라고 한다.
생산성을 높에주는 아주 편리한 도구이다. 그런데 간혹 자동 완성된 코드가 마음에 들지 않을 때가 있다. 이럴 경우 사용자 지정으로 만들어서 사용하면 편리하다.
다음은 사용자 snippets을 만드는 과정이다.
1. File > Preferences > User Snippets 선택
2. 새로운 파일 이름 입력. (C:\Users\[user name]\AppData\Roaming\Code\User\snippets\ 여기에 저장됨.)
3. 새로운 파일이 생성되면 자동으로 열리면서 셈플 코드가 주석 처리되어 나온다. 이것을 복사하여 주석을 없애고 수정해서 사용한다.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
1) "Print to console" - 여기에 snippet 제목을 쓴다.
2) "scope": "[변환할 키워드]" - code에 삽입할 때 사용할 키워드
3) "prefix": "html5-developerN" - 표시될 제목
4) "body": [ "[삽입할 내용] " ] - 삽입될 내용. 여러줄을 삽입할 경우 콤마(,)로 구분한다.
5) "description": "[간단한 설명]" - snippets의 간단한 설명
다음은 html을 입력하면 삽입될 snippets의 예이다.
"HTML5 form": {
"scope": "html",
"prefix": "html5-developerN",
"body": [
"<!--",
" * File : ${1:file name & version}",
" * Update: ${2:date}",
" * Author: developerN",
"-->",
"<!DOCTYPE html>",
"<html lang=\"ko\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>${3:title}</title>",
"</head>",
"<body>",
"$0",
"</body>",
"</html>"
],
"description": "default html5 form"
사용자 snippets 만들기
