vs-code-snippets.js

{
    "Stateless Functional Component": {
        "prefix": "stateless",
        "body": [
            "import React from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "const ${TM_FILENAME_BASE/(.*)\\..+$/$1/} = () => {",
            "    return <div className=\"\"></div>;",
            "}",
            "",
            "${TM_FILENAME_BASE/(.*)\\..+$/$1/}.propTypes = {};",
            "",
            "${TM_FILENAME_BASE/(.*)\\..+$/$1/}.defaultProps = {};",
            "",
            "export default ${TM_FILENAME_BASE/(.*)\\..+$/$1/};"
        ],
        "description": "A stateless functional component"
    },
    "Class Component": {
        "prefix": "classComp",
        "body": [
            "import React, { Component } from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "class ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/} extends Component {",
            "    constructor(props) {",
            "        super(props);",
            "    }",
            "",
            "    render() {",
            "        return <div className=\"\"></div>;",
            "    }",
            "}",
            "",
            "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.propTypes = {};",
            "",
            "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.defaultProps = {};",
            "",
            "export default ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/};"
        ],
        "description": "A class component"
    },
    "Connected Class Component": {
        "prefix": "classCompConnected",
        "body": [
            "import React, { Component } from 'react';",
            "import PropTypes from 'prop-types';",
            "import { connect } from 'react-redux';",
            "",
            "class ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/} extends Component {",
            "    constructor(props) {",
            "        super(props);",
            "    }",
            "",
            "    render() {",
            "        return <div className=\"\"></div>;",
            "    }",
            "}",
            "",
            "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.propTypes = {};",
            "",
            "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.defaultProps = {};",
            "",
            "function mapStateToProps(state) {",
            "    return {};",
            "}",
            "",
            "function mapDispatchToProps(dispatch) {",
            "    return {};",
            "}",
            "",
            "export default connect(mapStateToProps, mapDispatchToProps)(${TM_FILENAME_BASE/(.*)\\\\..+$/$1/});"
        ],
        "description": "A connected class component"
    },
    "Unit test": {
        "prefix": "jest",
        "description": "Setup for a jest unit test",
        "body": [
            "import React from 'react';",
            "import { shallow } from 'enzyme';",
            "import ${TM_FILENAME_BASE/(.*)\\..+$/$1/} from './${TM_FILENAME_BASE/(.*)\\..+$/$1/}';",
            "",
            "describe('${TM_FILENAME_BASE/(.*)\\..+$/$1/}', () => {",
            "    const defaultProps = {};",
            "",
            "    function renderComponent(props) {",
            "        return shallow(<${TM_FILENAME_BASE/(.*)\\..+$/$1/} {...defaultProps} {...props} />);",
            "    }",
            "",
            "    it('should render', () => {",
            "        const wrapper = renderComponent();",
            "    });",
            "});"
        ]
    },
    "Unit test w/ Store": {
        "prefix": "jestStore",
        "description": "Setup for a jest unit test with redux",
        "body": [
            "import React from 'react';",
            "import { shallow } from 'enzyme';",
            "import configureMockStore from 'redux-mock-store';",
            "import thunk from 'redux-thunk';",
            "import ${TM_FILENAME_BASE/(.*)\\..+$/$1/} from './${TM_FILENAME_BASE/(.*)\\..+$/$1/}';",
            "",
            "describe('${TM_FILENAME_BASE/(.*)\\..+$/$1/}', () => {",
            "    const defaultProps = {};",
            "    const initialStoreState = {};",
            "",
            "    const middleware = [thunk];",
            "    const mockStore = configureMockStore(middleware);",
            "",
            "    function renderComponent(props, storeState) {",
            "        const store = mockStore({ ...initialStoreState, ...storeState });",
            "        return shallow(<${TM_FILENAME_BASE/(.*)\\..+$/$1/} {...defaultProps} {...props} store={store} />).dive();",
            "    }",
            "",
            "    it('should render', () => {",
            "        const wrapper = renderComponent();",
            "    });",
            "});"
        ]
    },
    "Reducer Template": {
        "prefix": "reducer",
        "description": "Its a reducer template",
        "body": [
            "import { $1 } from '$2'",
            "",
            "const initialState = {}",
            "",
            "export default function(state = initialState, action) {",
            "    const { payload, type } = action",
            "",
            "    switch (type) {",
            "        case $1:",
            "            return { ...payload }",
            "",
            "        default:",
            "            return state",
            "    }",
            "}"
        ]
    },
    "Reduce Function": {
        "prefix": "reduceFunc",
        "description": "Its a reduce function",
        "body": ["reduce((acc, curr) => {", "    return acc;", "}, []);"]
    }
}