Figured I should start walking the walk with this whole "giving back to the dev community thing" so I made a gist of the react Visual Studio Code snippets that I use regularly.

To install them in your VS Code, go to File > Preferences > User Snippets (or Code > Preferences for Mac) then select New Global Snippets File. You can then name it and copy-paste these snippets into that file.

{
"Component Boilerplate - State": {
"scope": "javascript",
"prefix": "import state component",
"body": [
"import React, { Component, Fragment } from 'react'",
"import PropTypes from 'prop-types'",
"",
"export class ${1:$TM_FILENAME_BASE} extends Component {",
"\tstate = {}",
"\trender() {",
"\t\treturn (",
"\t\t\t<Fragment>$0</Fragment>",
"\t\t)",
"\t}",
"}",
"",
"${1:$TM_FILENAME_BASE}.propTypes = {",
"\t${2:hasProp}: PropTypes.bool,",
"}",
"",
"${1:$TM_FILENAME_BASE}.defaultProps = {",
"\t${2:hasProp}: false,",
"}",
"",
"export default ${1:$TM_FILENAME_BASE}"
],
"description": "Create a boilerplate react component"
},
"Stateless Component Boilerplate - React": {
"scope": "javascript",
"prefix": "import stateless component",
"body": [
"import React, { Fragment } from 'react'",
"import PropTypes from 'prop-types'",
"",
"export const ${1:$TM_FILENAME_BASE} = ({ ${2:hasProp} }) => (",
"\t<Fragment>$0</Fragment>",
")",
"",
"${1:$TM_FILENAME_BASE}.propTypes = {",
"\t${2:hasProp}: PropTypes.bool,",
"}",
"",
"${1:$TM_FILENAME_BASE}.defaultProps = {",
"\t${2:hasProp}: false,",
"}",
"",
"export default ${1:$TM_FILENAME_BASE}"
],
"description": "Create a boilerplate react stateless component"
},
"classNames setup - React": {
"scope": "javascript",
"prefix": "classNames",
"body": [
"import classNames from 'classnames/bind'",
"",
"import styles from './${1:$TM_FILENAME_BASE}.scss'",
"",
"const cx = classNames.bind(styles)"
],
"description": "classNames setup"
},
"proptypes setup - React": {
"scope": "javascript",
"prefix": "propTypes",
"body": [
"import PropTypes from 'prop-types'",
"",
"${1:$TM_FILENAME_BASE}.propTypes = {",
"\t${2:hasProp}: PropTypes.bool,",
"}",
"",
"${1:$TM_FILENAME_BASE}.defaultProps = {",
"\t${2:hasProp}: false,",
"}",
],
"description": "propTypes setup"
},
"jest test setup - React": {
"scope": "javascript",
"prefix": "jest",
"body": [
"import React from 'react'",
"import { shallow } from 'enzyme'",
"",
"import ${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} from './${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}'",
"",
"const defaultProps = {",
"\t${2:hasProp}: true,",
"}",
"",
"describe('Tests for <${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} /> Component', () => {",
"\tdescribe('Initial rendering', () => {",
"\t\tconst wrapper = shallow(",
"\t\t\t<${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} {...defaultProps} />",
"\t\t)",
"\t\tit('${0:does something}', () => {",
"\t\t})",
"\t})",
"})"
]
},
"jest describe": {
"scope": "javascript",
"prefix": "describe",
"body": [
"describe('$1', () => {$0})"
]
},
"jest it": {
"scope": "javascript",
"prefix": "it",
"body": [
"it('$1', () => {$0})"
]
},
"jest wrapper mount": {
"scope": "javascript",
"prefix": "wrapper",
"body": [
"const wrapper = mount(",
"\t<${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} {...defaultProps} />",
")"
]
},
"jest wrapper shallow": {
"scope": "javascript",
"prefix": "wrapper",
"body": [
"const wrapper = shallow(",
"\t<${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} {...defaultProps} />",
")"
]
}
}
view raw react-boilerplate.code-snippets hosted with ❤ by GitHub

To create your own code snippets you can follow the instructions here