VSCode Snippet for a React Component with styled-components
Create your own VSCode snippet to create a react component with prop-types and 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!