본문 바로가기

react vscode snippets 찍기

by tonyhan18 2022. 3. 21.
728x90

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

 

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

이번 작업은 24 , 25 , 26, 27 챕터에 걸쳐 진행된다고 한다.실습 흐름작업 환경 준비회원 인증 UI 구현회원 인증 리덕스 연동헤더 컴포넌트 만들기로그인 유지 및 로그아웃blog 디렉토리에 blog-frontend

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

Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)

snippet-generator.app

 

{
	"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": ""
	  }
}

 

728x90