VSCode Snippets for React

javascript.json

{
  "Insert a function": {
    "prefix": "f",
    "body": [
      "function $1($2) {\n  $0\n}\n"
    ],
    "description": "Insert a function"
  },
  "const arrow": {
    "prefix": "c>",
    "body": [
      "const $1 = ($2) => {\n  $3\n}\n"
    ],
    "description": "named arrow function"
  },
  "const arrow implicit return": {
    "prefix": "c>(",
    "body": [
      "const $1 = ($2) => (\n  $3\n)\n"
    ],
    "description": "named arrow function"
  },
  "arrow with body (type name first)": {
    "prefix": "=>",
    "body": [
      "= ($1) => {",
      "  $0",
      "}"
    ],
    "description": "arrow function with body"
  },
  "import named": {
    "prefix": "i",
    "body": [
      "import { $1 } from '$2';"
    ],
    "description": "import named item(s)"
  },
  "import default": {
    "prefix": "I",
    "body": [
      "import $1 from '$2';"
    ],
    "description": "import default"
  },
  "import default from file": {
    "prefix": "Id",
    "body": [
      "import $1 from './$1';"
    ],
    "description": "import default from file with same name"
  },
  "import React": {
    "prefix": "ir",
    "body": [
      "import React from 'react';"
    ],
    "description": "import React"
  },
  "import connect": {
    "prefix": "ic",
    "body": [
      "import { connect } from 'react-redux';"
    ],
    "description": "import connect"
  },
  "import PropTypes": {
    "prefix": "ipt",
    "body": [
      "import PropTypes from 'prop-types';"
    ],
    "description": "import PropTypes"
  },
  "import ReactDOM": {
    "prefix": "ird",
    "body": [
      "import ReactDOM from 'react-dom';"
    ],
    "description": "import ReactDOM"
  },
  "import index.css": {
    "prefix": "ics",
    "body": [
      "import './index.css';"
    ],
    "description": "import index.css"
  },
  "export default": {
    "prefix": "E",
    "body": [
      "export default $1"
    ],
    "description": "export default"
  },
  "export redux action": {
    "prefix": "ea",
    "body": [
      "export const $1 = '$1';"
    ],
    "description": "export redux action"
  },
  "export const": {
    "prefix": "ec",
    "body": [
      "export const $1"
    ],
    "description": "export const"
  },
  "className": {
    "prefix": "cn",
    "body": [
      "className='$1'"
    ],
    "description": "className"
  },
  "dispatch action object": {
    "prefix": "dao",
    "body": [
      "dispatch({ type: $1 });"
    ],
    "description": "dispatch action object"
  },
  "begin success error": {
    "prefix": "bse",
    "body": [
      "export const $1_BEGIN = '$1_BEGIN';",
      "export const $1_SUCCESS = '$1_SUCCESS';",
      "export const $1_ERROR = '$1_ERROR';"
    ],
    "description": "begin success error"
  },
  "console.log": {
    "prefix": "cl",
    "body": [
      "console.log($1)"
    ],
    "description": "console.log"
  },
  "PropTypes.object": {
    "prefix": "pto",
    "body": [
      "PropTypes.object"
    ],
    "description": "PropTypes.object"
  },
  "PropTypes.string": {
    "prefix": "pts",
    "body": [
      "PropTypes.string"
    ],
    "description": "PropTypes.string"
  },
  "PropTypes.array": {
    "prefix": "pta",
    "body": [
      "PropTypes.array"
    ],
    "description": "PropTypes.array"
  },
  "PropTypes.func": {
    "prefix": "ptf",
    "body": [
      "PropTypes.func"
    ],
    "description": "PropTypes.func"
  },
  "PropTypes.number": {
    "prefix": "ptn",
    "body": [
      "PropTypes.number"
    ],
    "description": "PropTypes.number"
  },
  "React class component file": {
    "prefix": "rcc",
    "body": [
      "import React from 'react';",
      "",
      "class $1 extends React.Component {",
      "  render() {",
      "    return (",
      "      $0",
      "    );",
      "  }",
      "}",
      "",
      "export default $1;"
    ],
    "description": "React class component"
  },
  "ReactDOM.render": {
    "prefix": "rdr",
    "body": [
      "ReactDOM.render($1, $2)"
    ],
    "description": "ReactDOM.render"
  },
  "document.querySelector": {
    "prefix": "dq",
    "body": [
      "document.querySelector($1)"
    ],
    "description": "querySelector"
  },
  "React function component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => (",
      "  <div />",
      ");",
      "",
      "export default $1;"
    ]
  },
  "React class boilerplate": {
    "prefix": "rbc",
    "body": [
      "import React from 'react';",
      "import ReactDOM from 'react-dom';",
      "",
      "class $1 extends React.Component {",
      "  render() {",
      "    return (",
      "      $0",
      "    );",
      "  }",
      "}",
      "",
      "ReactDOM.render(",
      "  <$1 />,",
      "  document.querySelector('#root')",
      ");"
    ]
  },
  "React boilerplate": {
    "prefix": "rb",
    "body": [
      "import React from 'react';",
      "import ReactDOM from 'react-dom';",
      "",
      "const $1 = () => (",
      "  <div />",
      ");",
      "",
      "ReactDOM.render(",
      "  <$1 />,",
      "  document.querySelector('#root')",
      ");"
    ]
  }
}