JS JSX Snippets
Supported languages (file extensions)
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
Usage
After install this snippets add this inside your settings
"editor.snippetSuggestions": "top",Snippets
Import and export
| Trigger | Content |
|---|---|
imp |
import name from 'module'; |
imd |
import { } from 'module'; |
Import package
| Trigger | Content | Description |
|---|---|---|
imr |
import React from 'react'; |
useful in test |
ipt |
import PropTypes from 'prop-types'; |
Basic methods
| Trigger | Content |
|---|---|
com |
Comment Block |
clg |
console.log() |
React components
Only contain class component and function component.
| Trigger | Content |
|---|---|
rcc |
class component skeleton |
rncc |
react native class component skeleton |
rccp |
class component skeleton with prop types after the class |
rfc |
function component skeleton |
rfcp |
function component with prop types skeleton |
rnfc |
react native function component skeleton |
con |
class default constructor with props |
est |
empty state object |
cdm |
componentDidMount method |
scu |
shouldComponentUpdate method |
cdup |
componentDidUpdate method |
cwun |
componentWillUnmount method |
gsbu |
getSnapshotBeforeUpdate method |
gdsfp |
static getDerivedStateFromProps method |
cdc |
componentDidCatch 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 |
useState |
useState block |
useEffect |
useEffect block |
useContext |
useContext block |
Jest
| Trigger | Content |
|---|---|
describe |
describe Block |
test |
test Block |
it |
it Block |
PropTypes
| Trigger | Content |
|---|---|
pta |
PropTypes.array, |
ptar |
PropTypes.array.isRequired, |
pto |
PropTypes.object., |
ptor |
PropTypes.object.isRequired, |
ptb |
PropTypes.bool, |
ptbr |
PropTypes.bool.isRequired, |
ptf |
PropTypes.func, |
ptfr |
PropTypes.func.isRequired, |
ptn |
PropTypes.number, |
ptnr |
PropTypes.number.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, |