snippets

{
  "Console Log": {
    "prefix": "log",
    "body": ["console.log(Date.now(), '${1:text}', ${1:text})"],
    "description": "Console Log"
  },
  "Connect Redux": {
    "prefix": ",con",
    "body": ["import { connect } from 'react-redux'"],
    "description": "Connect Redux"
  },
  "mapStateToProps": {
    "prefix": ",map",
    "body": [
      "const mapStateToProps = state => {",
      "  return {",
      "    appConfig: state.appConfig,",
      "    matchings: state.matchings,",
      "    companyProfile: state.companyProfile",
      "  }",
      "}",
      "",
      "export default connect(mapStateToProps, { reduxActionSetModal })(",
      "  ${1:component}",
      ")"
    ],
    "description": "mapStateToProps"
  },
  "Use Effect": {
    "prefix": ",ue",
    "body": ["useEffect(() => {", "  ${1:code}", "}, [])"],
    "description": "Use Effect"
  },
  "Function Component": {
    "prefix": ",fc",
    "body": [
      "import React, { useEffect } from 'react'",
      "import { useTranslation } from 'react-i18next'",
      "import PropTypes from 'prop-types'",
      "",
      "const ${1:componentName} = props => {",
      "  const { t } = useTranslation()",
      "",
      "  useEffect(() => {",
      "",
      "  }, [])",
      "",
      "  return (",
      "    ${2:cursor}",
      "  )",
      "}",
      " ",
      "${1:componentName}.propTypes = {",
      "  prop: PropTypes.string.isRequired",
      "}",
      " ",
      "export default ${1:componentName}"
    ],
    "description": "Function Component"
  },
  "Simple Function Component": {
    "prefix": ",sfc",
    "body": [
      "import React from 'react'",
      "// import { useTranslation } from 'react-i18next'",
      "// import PropTypes from 'prop-types'",
      "",
      "const ${1:componentName} = props => {",
      "  // const { t } = useTranslation()",
      "",
      "  return (",
      "    ${2:cursor}",
      "  )",
      "}",
      " ",
      "// ${1:componentName}.propTypes = {",
      "//   prop: PropTypes.string.isRequired",
      "// }",
      " ",
      "export default ${1:componentName}"
    ],
    "description": "Function Component"
  },
  "Class Component": {
    "prefix": ",cc",
    "body": [
      "import React, { Component } from 'react'",
      "import { Translation } from 'react-i18next'",
      "import PropTypes from 'prop-types'",
      "",
      "class ${1:componentName} extends Component {",
      "  state = {}",
      "  render() {",
      "    return (",
      "      <Translation>",
      "        {(t, { i18n }) => (",
      "          ${2:cursor}",
      "        )}",
      "      </Translation>",
      "    )",
      "  }",
      "}",
      "",
      "${1:componentName}.propTypes = {",
      "  prop: PropTypes.string.isRequired",
      "}",
      "",
      "export default ${1:componentName}"
    ],
    "description": "Class Component"
  },
  "Media Query": {
    "prefix": ",mq",
    "body": ["@media (${1:type}-width: ${2:value}) {${3:cursor}}"],
    "description": "Media Query"
  },
  "Font generic": {
    "prefix": ",fo",
    "body": [
      "font-size: var(--font-size-$1);",
      "font-weight: var(--font-$2);",
      "line-height: var(--line-height-$3);"
    ],
    "description": "Font"
  },
  "Print to console": {
    "prefix": "jcl",
    "body": ["console.log(Date.now(), '$1', $1);", "$2"],
    "description": "Log output to console"
  },
  "Function component": {
    "prefix": "sfc",
    "body": [
      "const ${1:componentName} = props => {",
      "  return (",
      "    <div className=\"\">${2:code}</div>",
      "  );",
      "}",
      " ",
      "export default ${1:componentName};"
    ],
    "description": "Function component"
  },
  "import React from 'react'": {
    "prefix": "imr",
    "body": ["import React from 'react'"],
    "description": "import React from 'react'"
  },
  "CSS Module Class": {
    "prefix": ",cl",
    "body": ["className={styles.${1:className}}"],
    "description": "CSS Module Class"
  },
  "Div": {
    "prefix": ",div",
    "body": [
      "<div className={styles.${1:className}}>",
      "  ${2:content}",
      "</div>"
    ],
    "description": "Div"
  }
}