Code snippets are shorthand keystrokes that help you type frequently used code sections quickly. We have plenty of such plugins/extensions available for various IDE(s). You simply type in a short string (usually 2-3 characters) and it expands into code section. For example, in VSCode, typing foreach
followed by →Tab would expand into Array.prototype.forEach snippet as shown below.
on hitting tab foreach
would expand into following in VSCode,
Similarly, for react/redux there is VSCode extension to bring snippets for React/Redux on VSCode. It is not available by default and third party extension help you gain such functionalities.
For React/Redux, the best such extension is ES7 React/Redux/GraphQL/React-Native snippets
by dsznajder. It can be installed using Extension
tab in VSCode (key shortcut in mac, Command+Shift+X ) and type ES7 React
followed by enter.
It has plenty of snippets for React, Redux and Graphql in JS/TS with ES7 syntax.
For example, in *.js file (or supported files), typing imr
followed by →Tab would expand into import React from 'react'
or typing imrc
followed by →Tab would expand into import React, { Component } from 'react'
.
You can search through snippets with ES7 snippet search command which can be run with CMD + Shift + P
or just use CMD + Shift + R
keybinding.
I end up with a lot of frequent component creation and below snippets are my fav,
-
rce - React Class Component with Filename as Component name
import React, { Component } from 'react' export class <FileName> extends Component { render() { return <div></div> } } export default <FileName>
-
rcep - React Class Component including Proptype with Filename as Component name
import React, { Component } from 'react' import PropTypes from 'prop-types' export class <FileName> extends Component { static propTypes = {} render() { return <div></div> } } export default <FileName>
-
rfce - React functional component
import React from 'react' function $1() { return <div></div> } export default $1
-
rafcp - React functional component including Proptype
import React from 'react' import PropTypes from 'prop-types' const $1 = props => { return <div>$0</div> } $1.propTypes = {} export default $1
You can check entire list on Extension main page
Official Site: VSCode Marketplace for Extension