Dev Traveler

해당 사이트는 Visual Studio Code snippet을 자동으로 문법에 맞게 생성해주는 사이트이다.

사이트 주소는 https://snippet-generator.app/

예를들어 Ajax 코드를 Snippet으로 만들어두고 싶을때 아래와 같이 사용하면 된다.

왼쪽에 코드를 입력하면 오른쪽에 VS Code 양식에 맞게 생성된다.

[Copy snippet] 버튼을 통해 해당 내용을 복사한 후 VS Code에서 Snippet을 저장한다.

Mac에서 Snippet을 열기 위해서는 Code -> Preferences -> User Snippets

위 버튼을 누르면 상단에 언어를 선택할 수 있도록 입력창이 뜨는데, 여기서 본인이 원하는 언어를 입력한다.

(나는 자바스크립트를 원하므로 javascript 입력)

위 javascript.json (Javascript (Babel))을 선택하면 javascript.json 파일이 열리고 이안에 해당 Snippet을 입력하면 된다.

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"ajax pattern 1": {
		"prefix": "ajax01",
		"body": [
		  "// ajax pattern 1",
		  "var xhr = new XMLHttpRequest();",
		  "xhr.onreadystatechange = function() {",
		  "    if (xhr.readyState === xhr.DONE) {",
		  "        if (xhr.status === 200 || xhr.status == 201) {",
		  "            console.log(xhr.responseText);",
		  "        } else {",
		  "            console.log(xhr.responseText);",
		  "        }",
		  "    }",
		  "};",
		  "",
		  "xhr.open('GET', 'https://www.zerocho.com/api/get');",
		  "xhr.send();"
		],
		"description": ""
	  }
}

- 17번째 줄의 Prefix가 중요하다. 원하는 Prefix를 입력한다. 저장까지 하고나면 Snippet은 자동 적용된다.

실제 파일에서 아래와 같이 Prefix를 치면 자동으로 Snippet Suggestion이 되면서 Snippet을 활용할 수 있다.

Snippet(스니펫)을 통해 개발 생산성을 향상하길 바란다.