Visual Studio Code

---

Configure User Snippets 설정 2

지난번에 Configure User Snippets 설정 1 이 이번에 리액트를 하면서 JavaScript 에서는 작동이 되지 않는거 같아서 다른 방법을 알아봤다.
먼저 지난번에 쓴 JSON파일은 이렇다.

일단 지난번과 동일하게 Configure User Snippets 창을 연다.

👇👇이번에는 단축키로 사용해보자👇👇

단축키

• 원도우 : Ctrl+Shift+P, F1
• 맥 : ⇧(쉬프트)+⌘(command)+P, F1

1. 단축키를 누르면 아래의 그림과 같이 창에서 Snippets: Configure User Snippets 가 뜬다. 선택한다.

2. Snippets: Configure User Snippets에 들어가면 다음 목록이 나오는데 지난번에는 HTML.JSON을 찾아서 수정을 했는데 그냥 새로운 파일을 만들어준다. New Global Snippets file... 을 클릭

3. New Global Snippets file... 새로운 파일을 생성하니 파일이름을 적어준다. ex ) new_snippets...

4. 새로운 Snippets 파일이 생성됐다. 주석은 예시이므로 삭제해도 무방하다. 하지만 8번째 줄에 있는 Example 는 참고하거나 복사하고 지워준다.

5. Example 이다. 저번에는 다 지우고 prefix , body 두개만 나두고 다 지우고 써서 그랬던거 같다.. 이번에는 하나하나 의미를 알고 사용해 보기로 한다.

	Example:
	"Print to console": {
	"scope": "javascript,typescript",
	"prefix": "log",
	"body": [
		"console.log('$1');",
        	"$2"
		],
	"description": "Log output to console"
	}

1. scope : snippet이 실행되는 언어, 여러개로 지정가능 (예제는 javascript , typescript 가 되어있다)
2. prefix : 외부에서 사용하게 될 단축어(명령어)를 지정하는 곳이다. (예제는 log 로 되어있다)
3. body : 단축어(명령어)를 입력하면 나타나게 될 코드를 넣는 곳이다. (예제는 console.log() 이다)
   지난번에 참고하면 설명이 있는데 $1 숫자는 코드조각(Snippets)을 불러오면 자동 커서 포커스 순서이다.
4. description : 단축어(명령어)를 입력하면 옆에 노출되는 설명이다.

이상 각 목록의 의미였고

	"Print to react Class Component": {
	"scope": "javascript,typescript",
	"prefix": "joo",
	"body": [
		"import React, { Component } from 'react';\n",
		"class App extends Component {",
		"\t render() {",
		"\t return (",
		"\t\t<div>",
		"\n",		
		"\t","</div>",
		"\t",");",
		"}",
		"}",
		"\n",
		"export default App;"
		],
	"description": "react Class Component"
	},