[VSCode] User Snippets 설정 & 사용법

1. User Snippets이란?

---

코딩을 할 때 반복적으로 작성해야하는 코드들이 분명히 있다. 이 반복되는 틀을 간편하게 불러오기 위한 기능이 User Snippets이다. 

 

VSCode에서 리액트의 컴포넌트 코드를 만들어주는 React Snippets Extension이라는 기능도 있지만, 단축어들을 파악해야하기 때문에 따로 User Snippets을 이용하여 전체 틀을 한꺼번에 불러와 약간의 수정을 해서 코딩할 수 있도록 하려 한다. 

 

 

2. User Snippets 설정

---

File > Preference > User Snippets 

 

User Snippets를 클릭하면 새로 User Snippets를 만들어서 모든 영역에서 사용하도록 하는 방식과 현재 프로젝트에서 사용할 파일을 생성할 수 있도록 선택권이 주어짐.  

 

 

그 중 전역에서 사용할 수 있도록 New Global Snippets file 선택하고 snippet의 이름을 설정해준다.

 

 

설정한 이름을 입력하고 엔터를 누르면 아래와 같은 파일이 생성되고 주석으로 스니펫을 설정할 수 있는 예시를 보여준다. 

 

 

예시를 풀어서 설명하자면, 아래와 같은 형태이다. 

{

 "스니펫 이름": {
 "scope": "사용 언어",
 "prefix": "스니펫을 선택할 때 사용되는 약어",
 "body": [
	"내용 1",
	"내용 2",
	"한 줄에 하나씩"
  ],
 "description": "스니핏의 설명"
  }
}

 

리액트 컴포넌트를 새로 생성할 때 반복되는 부분을 상용구화 한 예시 

{

	"react-component-frame": {
		"scope": "javascript",
		"prefix": "rcf",
	 	"body": [
			"import React, { Component } from 'react';",
			"import PropTypes from 'prop-types';",
			"", 
			"const propTypes = {",
			"",
			"};",
			"const defaultProps = {",
			"",
			"};",
			"",
			"class App extends Component {",
			"",
			"    constructor(props){",
			"        super(props);",
			"    }",
			"    render(){",
			"        return(",
			"            <div>my Component</div>",
			"        );",
			"    }",
			"}",
			"",
			"App.propTypes = propTypes;",
			"App.defaultProps = defaultProps;",
			"",
			"export default App;"
	 	],
	 	"description": "this is basic react-component-frame"
	 }
}

 

3. User Snippets 사용 방법

---

자신이 정한 약어를 작성하면 작성한 User Snippets가 슬며시 보인다.

 

여기서 Tab키를 누르면 코드가 작성된다.