Code → Perferences → User Snippets

프로젝트에 맞는 언어를 설정한다. 난 Typescript React!

prefix 단축어 작성

description 노출될 설명

"@types models": {
    "prefix": ["typeModel"],
		"body": //...,
    "description": "@types 모델 파일을 만들 때 사용하자."
},

body 완성되는 코드

"@types models": {
    //...
    "body": [
      "declare module '@types' {",
      "  interface ${1:${TM_FILENAME_BASE}} {",
      "  ",
      "  }",
      "}"
    ],
    //...
  },

• $1:${TM_FILENAME_BASE}
  • 파일명을 가져오는 코드이다.
• $CURRENT_YEAR.$CURRENT_MONTH.$CURRENT_DATE
  • 현재 년.월.일 을 가져오는 코드
• \\n \\t
• 추가적으로 필요한 부분은 공홈을 참고하도록 하자.

기타 내가 만들었던 것...

{
	"tsr": {
		"prefix": ["tsr"],
		"body": [
			"export interface ${1:${TM_FILENAME_BASE}}Props {}",
			"",
			"export const ${1:${TM_FILENAME_BASE}} = ({}: ${1:${TM_FILENAME_BASE}}Props) => {",
			"  return <></>",
			"}",
		],
		"description": "Generate default react form"
	},
	"storytsr": {
		"prefix": ["storytsr"],
		"body": [
			"import { css } from '@emotion/react'",
			"",
			"export default {",
			"  title: '${TM_FILENAME/^([^.]+).*/${1:/pascalcase}/}',",
			"  component: ${TM_FILENAME/^([^.]+).*/${1:/pascalcase}/}",
			"}",
			"",
			"export const Default = () => {",
			"  return (",
			"    <div css={container}>",
			"      <${TM_FILENAME/^([^.]+).*/${1:/pascalcase}/} />",
			"    </div>",
			"  )",
			"}",
			"",
			"const container = css`",
			"",
			"`"
		],
		"description": "Generate default react form"
	},
}