[React] 축약어로 함수 편하게 불러오기 [사용자 코드 조각 구성 설정 (snippets)]

VSC

Shift + command + p

 

snippets 검색

 

global.code-snippets.json 파일 설정

{
	"reactFunction": {
	"prefix": "rfc",
	"body": "import React from 'react';\n\nexport default function ${1:${TM_FILENAME_BASE}}() {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t);\n}\n\n",
	"description": "Creates a React Function component"
	},
	"reactStatelessImplicitReturn": {
	"prefix": "rsi",
	"body": "import React from 'react';\n\nexport const ${1:${TM_FILENAME_BASE}} = (props) => (\n\t\t\t$0\n\t);",
	"description": "Creates a React Function component"
	},
	"Import Module CSS": {
	"prefix": "si",
	"body": [
	"import styles from './$TM_FILENAME_BASE.module.css'"
	],
	"description": "Import PostCSS"
	},
	"ClassName": {
	"prefix": "cn",
	"body": [
	"className={styles.$1}"
	],
	"description": "Adding className"
	}
	}
	// 20230204105027
	// https://d2lmphbmp3ptuw.cloudfront.net/assets/global_code_snippets_90e952e0d8.json
	​
	{
	  "reactFunction": {
		"prefix": "rfc",
		"body": "import React from 'react';\n\nexport default function ${1:${TM_FILENAME_BASE}}() {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t);\n}\n\n",
		"description": "Creates a React Function component"
	  },
	  "reactStatelessImplicitReturn": {
		"prefix": "rsi",
		"body": "import React from 'react';\n\nexport const ${1:${TM_FILENAME_BASE}} = (props) => (\n\t\t\t$0\n\t);",
		"description": "Creates a React Function component"
	  },
	  "Import Module CSS": {
		"prefix": "si",
		"body": [
		  "import styles from './$TM_FILENAME_BASE.module.css'"
		],
		"description": "Import PostCSS"
	  },
	  "ClassName": {
		"prefix": "cn",
		"body": [
		  "className={styles.$1}"
		],
		"description": "Adding className"
	  }
	}