[🛠 개발 환경] VScode User Snippets 설정

프로젝트에서 주석 템플릿을 사용하기로 했다. 파일마다 맨 위에 작성자, 버전, 생성일, 수정일 등을 주석으로 쓰기로 한 것이다. 그 형태는 아래와 같다.

/*

@author
@version
생성일 2022-03-
마지막 수정일 2022-03-
*/

처음에는 어차피 git 기록이 있는데, 왜 파일마다 주석을 다는지, 왜 주석 템플릿을 사용하는지 몰랐다.

한눈에 누가 파일을 만들었는지, 어떤 내용인지 볼 수 있고!
git, VScode 등을 사용하지 않고 파일만 보는 사람도 이해가 되니까 사용한다고 한다.

Java, 인텔리제이를 사용하는 백엔드는 자동으로 해주는 게 있는데,
vscode에서는 그런 기능을 못 찾아서 vscode user snippets로 하기로 했다.

1. File -> Preferences

2. User Snippets 클릭

3. typescriptreact.json을 클릭

나는 react + typescript를 사용했기 때문에, 이 파일을 선택했다.

4. json 파일 내용

{
  "react-component-frame": {
    "prefix": "tsc",
    "body": [
      "/*",
      "",
      "@author",
      "@version",
      "생성일 2022-03-",
      "마지막 수정일 2022-03-",
      "*/"
    ],
    "description": "This is basic annotation."
  }
}

prefix: 뭘 눌러서 body 부분을 생성할지

body: 생성하고 싶은 부분

description: 설명

5. 결과

prefix: tsc를 쓰고 tab을 누르면

아래처럼 나온다.

 

 

 

 

 

------

추후 추가)

화살표 함수형 리액트 컴포넌트도 snippet 만듦!

	"React component": {
		"prefix": "mrc",
		"body": [
				"import React from 'react';",
				"",
			"const $1 = () => {",
				"return (",
				"    <div>$1</div>",
				");",
				"}",
		"export default $1;"
		],
		"description": "리액트 컴포넌트 화살표 함수"
	}

 

$1 은 키보드 포커스가 바로 그 영역쪽으로 이동하게 해준다 !