VSCode Snippet for a React Component with styled-components

Quite often I create function components using React that include prop-types and styled-components. In Visual Studio Code is it really easy to create a snippet to do this.

Go to Preferences > User Snippets, create one with a filename of your choosing, and enter the following contents:

{
    "Styled Component": {
        "scope": "javascript",
        "prefix": [
            "styled",
            "styled-component"
        ],
        "body": [
            "import React from \"react\"",
            "import PropTypes from \"prop-types\"",
            "import styled, { css } from \"styled-components\"",
            "",
            "${1:name}.propTypes = {",
            "\tclassName: PropTypes.string.isRequired,",
            "}",
            "",
            "function ${1:name}({ className }) {",
            "\treturn <div className={className} />",
            "}",
            "",
            "export default styled(${1:name})`",
            "\t${props => css``}",
            "`"
        ],
        "description": "Creates a quick styled component"
    }
}

Now when you create a new component file, you can type styled and then have the option to insert the snippet and type the component name. Super slick!