Airbnb react snippets (Prettier)
ES6 Reactjs code snippets for VS Code compliant with Airbnb style guide
Fork of cobeia/airbnb-react-snippets which replaces string single quotes with double quotes, for prettier users
Installation
In order to install an extension you need to launch the Command Pallete (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 (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
Imports
| Trigger |
Content |
imr→ |
Import react |
Class Components
| Trigger |
Content |
rc→ |
class component skeleton |
rcc→ |
class component skeleton with constructor |
rconst→ |
class default constructor |
rpt→ |
empty propTypes declaration |
rdp→ |
empty defaultProps declaration |
rbm→ |
binds the this of method inside the constructor |
rcwm→ |
componentWillMount method |
rcdm→ |
componentDidMount method |
rcwr→ |
componentWillReceiveProps method |
rscu→ |
shouldComponentUpdate method |
rcwup→ |
componentWillUpdate method |
rcdup→ |
componentDidUpdate method |
rcwun→ |
componentWillUnmount method |
rren→ |
render method |
rsst→ |
this.setState with object as parameter |
rssf→ |
this.setState with function as parameter |
rprops→ |
this.props |
rstate→ |
this.state |
Function Components
| Trigger |
Content |
rfunc→ |
function component skeleton |
Hooks
| Trigger |
Content |
uste→ |
UseState Hook |
uctx→ |
UseContext Hook |
ufx→ |
UseEffect Hook |
urdc→ |
UseReducer Hook |
ucbck→ |
UseCallback Hook |
umem→ |
UseMemo Hook |
uref→ |
UseRef Hook |
uih→ |
UseImperativeHandler Hook |
ule→ |
UseLayoutEffect Hook |
udv→ |
UseDebugValue Hook |
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, |
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, |
| |
