React 개발자를 위한 WebStorm 플러그인

WebStorm을 사용하는 프런트엔드 개발자를 위한 플러그인 추천

JetBrains의 WebStorm을 사용해 React 기반 애플리케이션을 개발하는 프런트엔드 개발자를 위한 Plugin을 추천합니다. 이 외에도 추천할만한 플러그인이 있다면 댓글을 달아주세요. 지속해서 업데이트하겠습니다.

VSCode를 사용하는 프런트엔드 개발자를 위한 Extension 추천 글은 링크에서 확인해보세요.

React snippets

zen코딩을 가능하게 해주는 플러그인으로 VSCode의 ES7 React/Redux/GraphQL/React-Native snippets와 유사한 기능을 합니다.

사용 가능한 템플릿 목록은 해당 리포지토리의 README파일이나 Preference의 Editor>Live Templates에서 확인할 수 있습니다.

컴포넌트 생성 템플릿

rscp

rsc

rcfc

rccp

rrc

rcc

propTypes 관련 템플릿

선언

pt

타입에 따른 템플릿

pta: PropTypes.array,
ptar: PropTypes.array.isRequired,
ptb: PropTypes.bool,
ptbrPropTypes.bool.isRequired,
ptf: PropTypes.func,
ptfr: PropTypes.func.isRequired,
ptn: PropTypes.number,
ptnr: PropTypes.number.isRequired,
pto: PropTypes.object,
ptor: PropTypes.object.isRequired,
pts: PropTypes.string,
ptsr: PropTypes.string.isRequired,
ptnd: PropTypes.node,
ptndr: PropTypes.node.isRequired,
ptel: PropTypes.element,
ptelr: PropTypes.element.isRequired,
pti: PropTypes.instanceOf(ClassName),
ptir: PropTypes.instanceOf(ClassName).isRequired,
pte: PropTypes.oneOf(['News', 'Photos']),
pter: PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr: PropTypes.oneOfType([PropTypes.string,PropTypes.number]).isRequired,
ptao: PropTypes.arrayOf(PropTypes.number),
ptaor: PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo: PropTypes.objectOf(PropTypes.number),
ptoor: PropTypes.objectOf(PropTypes.number).isRequired,
ptsh: PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr: PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,

hook 템플릿

공식 문서에 언급된 훅을 모두 지원합니다.

링크: https://plugins.jetbrains.com/plugin/10113-react-snippets

리포지토리: https://github.com/jinsihou19/ReactSnippets