[VScode] 리액트 필수 플러그인 React 코드 템플릿 자동 완성 플러그인 @ Reactjs code snippets

 

VS code 툴을 사용하고 React 언어를 사용한다면 필수인 플러그인 Reactjs code snippets

신규로 컴포넌트를 정의할 때마다 일일이 코드를 작성해야 하는 번거로움을 줄여준다,

 

 

😎 설치 방법

VS CODE 가장 왼쪽 사이드바에서 4번째 탭을 들어가면 플러그인등 다운받는 스토어 가있다.

그리고 Reactjs code snippets 검색

 install 버튼을 클릭하여 플러그인을 설치하고 VS Code를 재시작하면 사용할 수 있다.

세부정보를 내려보면 보면 사용가능한 단축 트리거 들이 있다.

 

😎 사용법

Trigger	Content
rcc→	class component skeleton
rrc→	class component skeleton with react-redux connect
rrdc→	class component skeleton with react-redux connect and dispatch
rccp→<	class component skeleton with prop types after the class
rcjc→	class component skeleton without import and default export lines
rcfc→	class component skeleton that contains all the lifecycle methods
rwwd→	class component without import statements
rpc→	class pure component skeleton with prop types after the class
rsc→	stateless component skeleton
rscp→	stateless component with prop types skeleton
rscm→	memoize stateless component skeleton
rscpm→	memoize stateless component with prop types skeleton
rsf→	stateless named function skeleton
rsfp→	stateless named function with prop types skeleton
rsi→	stateless component with prop types and implicit return
fcc→	class component with flow types skeleton
fsf→	stateless named function skeleton with flow types skeleton
fsc→	stateless component with flow types skeleton
rpt→	empty propTypes declaration
rdp→	empty defaultProps declaration
con→	class default constructor with props
conc→	class default constructor with props and context
est→	empty state object
cwm→	componentWillMount method
cdm→	componentDidMount method
cwr→	componentWillReceiveProps method
scu→	shouldComponentUpdate method
cwup→	componentWillUpdate method
cdup→	componentDidUpdate method
cwun→	componentWillUnmount method
gsbu→	getSnapshotBeforeUpdate method
gdsfp→	static getDerivedStateFromProps method
cdc→	componentDidCatch method
ren→	render method
sst→	this.setState with object as parameter
ssf→	this.setState with function as parameter
props→	this.props
state→	this.state
bnd→	binds the this of method inside the constructor
disp→	MapDispatchToProps redux function

 

사용법은 너무 간단하다. (가장 기본적이며 많이 사용하는 rsc)

.js파일을 생성하고 rsc + 엔터

import React from 'react';

const Test1 = () => {
    return (
        <div>

        </div>
    );
};

export default Test1;

rcc는 클래스형 컴포넌트를 생성할 때 사용하는 트리거

rsc는 함수형 컴포넌트를 생성할 때 사용한다.

 

리액트 언어 사용시 시간을 많이 줄일수 있는 필수 플러그인

어렵지 않아 사용을 권장한다