📝 VS Code React snippets
This extension provides you React/Redux snippets for VS Code
📚 Supported languages (file extensions)
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
📖 Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
React Component
Lifecycle
|
trigger
|
snippet(JS)
|
snippet(TS)
|
rcns⇥ |
constructor(props) {
super(props)
this.state = {
}
}
|
constructor(props: Props) {
super(props)
this.state = {
}
}
|
cdm⇥ |
componentDidMount() {
}
|
componentDidMount(): void {
}
|
cdu⇥ |
componentDidUpdate(prevProps, prevState, snapshot) {
}
|
componentDidUpdate(prevProps: Props, prevState: State, snapshot: any): void {
}
|
cdc⇥ |
componentDidCatch(error, info) {
}
|
componentDidCatch(error: Error, info: ErrorInfo): void {
}
|
cwu⇥ |
componentWillUnmount() {
}
|
componentWillUnmount(): void {
}
|
scu⇥ |
shouldComponentUpdate(nextProps, nextState) {
}
|
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
}
|
gdsfp⇥ |
static getDerivedStateFromProps(nextProps, prevState){
}
|
static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): Partial<State> | null {
}
|
gdsfe⇥ |
static getDerivedStateFromError(error){
}
|
static getDerivedStateFromError(error: any): Partial<State> | null {
}
|
gsbu⇥ |
getSnapshotBeforeUpdate(prevProps, prevState){
}
|
getSnapshotBeforeUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): SnapShot | null {
}
|
ren⇥ |
render(){
}
|
render(): React.ReactNode {
}
|
Class Properties
|
trigger
|
snippet(JS)
|
snippet(TS)
|
cdp⇥ |
Component.defaultProps = {
}
|
Component.defaultProps = {
}
|
Instance Properties
|
trigger
|
snippet(JS)
|
snippet(TS)
|
thp⇥ |
this.props.
|
this.props.
|
ths⇥ |
this.state.
|
this.state.
|
Refs
|
trigger
|
snippet(JS)
|
snippet(TS)
|
cref⇥ |
this.nameRef = React.createRef()
|
this.nameRef = React.createRef<Type>()
|
fcref⇥ |
const nameRef = React.createRef()
|
const nameRef = React.createRef<Type>()
|
Context
|
trigger
|
snippet(JS)
|
snippet(TS)
|
cct⇥ |
const contextName = React.createContext(defaultValue)
|
const contextName = React.createContext<Type>(defaultValue)
|
ctp⇥ |
<Context.Provider value="value">
</Context.Provider>
|
<Context.Provider value="value">
</Context.Provider>
|
ctc⇥ |
<Context.Consumer>
{value => ()}
</Context.Consumer>
|
<Context.Consumer>
{value => ()}
</Context.Consumer>
|
Others
|
trigger
|
snippet(JS)
|
snippet(TS)
|
ss⇥ |
this.setState({})
|
this.setState({})
|
ssu⇥ |
this.setState((state, props) => {
return {stateChange}
})
|
this.setState((state, props) => {
return {stateChange}
})
|
Skeleton
rcc⇥
JS
import React, { |PureComponent,Component| } from 'react'
class FileName extends |PureComponent,Component| {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
)
}
}
export default FileName
TS
import React, { |PureComponent,Component|, ReactNode } from 'react'
interface Props {}
interface State {}
class FileName extends |PureComponent,Component|<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
}
}
render(): ReactNode {
return (
)
}
}
export default FileName
rccp⇥
JS
import React, { |PureComponent,Component| } from 'react'
import PropTypes from 'prop-types'
class FileName extends |PureComponent,Component| {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
)
}
}
export default FileName
rfc⇥
JS
import React from 'react'
function FileName() {
return (
)
}
export default FileName
TS
import React from 'react'
interface Props {}
function FileName(props: Props) {
const {} = props
return (
)
}
export default FileName
rfcp⇥
JS
import React from 'react'
import PropTypes from 'prop-types'
function FileName(props) {
const {} = props
return (
)
}
FileName.propTypes = {
}
export default FileName
rfmc⇥
JS
import React, { memo } from 'react'
function FileName() {
return (
)
}
export default memo(FileName)
TS
import React, { memo } from 'react'
interface Props {}
function FileName(props: Props) {
const {} = props
return (
)
}
export default memo(FileName)
rfmcp⇥
JS
import React, { memo } from 'react'
import PropTypes from 'prop-types'
function FileName(props) {
const {} = props
return (
)
}
FileName.propTypes = {}
export default memo(FileName)
rccrdx⇥
JS
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
class FileName extends PureComponent {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
TS
import React, { |PureComponent,Component| } from 'react'
import { connect } from 'react-redux'
interface Props {}
interface State {}
class FileName extends |PureComponent,Component|<Props, State> {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
rccprdx⇥
JS
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
class FileName extends PureComponent {
static propTypes = {
}
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
rfcrdx⇥
JS
import React from 'react'
import { connect } from 'react-redux'
function FileName() {
return (
)
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
TS
import React from 'react'
import { connect } from 'react-redux'
interface Props {}
function FileName(props: Props) {
const {} = props
return (
)
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
rfcprdx⇥
JS
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
function FileName(props) {
const {} = props
return (
)
}
FileName.propTypes = {
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(FileName)
rfmcrdx⇥
JS
import React, { memo } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
function FileName() {
return (
)
}
FileName.propTypes = {
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))
TS
import React, { memo } from 'react'
import { connect } from 'react-redux'
interface Props {}
function FileName(props: Props) {
const {} = props
return (
)
}
FileName.propTypes = {
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))
rfmcprdx⇥
JS
import React, { memo } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
function FileName(props) {
const {} = props
return (
)
}
FileName.propTypes = {}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))
