react vscode snippets 찍기

리액트를 다루는 기술 ( 프론트엔드 프로젝트: 시작 및 회원 인증 구현 ) (velog.io)

리액트를 다루는 기술 ( 프론트엔드 프로젝트: 시작 및 회원 인증 구현 )

 

import React from 'react';
import styled from 'styled-components';

const ${TM_FILENAME_BASE} = () => {
  return <${TM_FILENAME_BASE}Block>AuthForm</${TM_FILENAME_BASE}Block>;
};

const ${TM_FILENAME_BASE}Block = styled.div``;

export default ${TM_FILENAME_BASE};

 

snippet generator (snippet-generator.app)

snippet generator

 

{
	"Styled React Functional Component": {
		"prefix": "srfc",
		"body": [
		  "import React from 'react';",
		  "import styled from 'styled-components';",
		  "",
		  "const ${TM_FILENAME_BASE} = () => {",
		  "  return <${TM_FILENAME_BASE}Block>AuthForm</${TM_FILENAME_BASE}Block>;",
		  "};",
		  "",
		  "const ${TM_FILENAME_BASE}Block = styled.div``;",
		  "",
		  "export default ${TM_FILENAME_BASE};"
		],
		"description": ""
	  }
}