Reactjs

VS Code Reactjs snippets

This extension contains code snippets for ReactJS in JavaScript and TypeScript. It borrows heavily from this extension by xabikos.

Installation

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

Supported languages (file extensions)

JavaScript React (.jsx)
TypeScript React (.tsx)

Snippets

Below is a list of all available snippets organised by JSX, TSX, and some that work in both and the triggers of each one. The ⇥ means the TAB key.

Both .jsx and .tsx

Trigger	Content
`rch→`	Start custom hook
`rimpa→`	Absolute import (import El from '@/El)
`rimpr→`	Relative import (import El from './El)
`cna→`	Classnames as array
`rus→`	`React.useState` hook
`rue→`	`React.useEffect` hook
`rur→`	`React.useRef` hook
`ruca→`	`React.useCallback` hook
`rum→`	`React.useMemo` hook
`ruco→`	`React.useContext` hook
`rmap→`	`.map` in markup
`danger→`	Dangerously Set Inner HTML prop

The output of these change based on the filetype (.jsx vs .tsx)

Trigger	Content
`rscp`	Stateless component
`rscpc`	Stateless component with className prop

.tsx

Trigger	Content
`rtf→`	function prop type
`rtb→`	boolean prop type
`rts→`	string prop type
`rtn→`	number prop type
`rtch→`	children prop type
`rtcn→`	className prop type

.jsx

Trigger	Content
`ptdf→`	Start default prop types

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required.

For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

Trigger	Content
`pta→`	`PropTypes.array,`
`ptar→`	`PropTypes.array.isRequired,`
`ptb→`	`PropTypes.bool,`
`ptbr→`	`PropTypes.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,`
`ptsm→`	`PropTypes.symbol,`
`ptsmr→`	`PropTypes.symbol.isRequired,`
`ptan→`	`PropTypes.any,`
`ptanr→`	`PropTypes.any.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,`
`ptoos→`	`PropTypes.objectOf(PropTypes.shape()),`
`ptoosr→`	`PropTypes.objectOf(PropTypes.shape()).isRequired,`
`ptsh→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),`
`ptshr→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,`

Reactjs code snippets

elwynco