JavaScript Snippets for VS Code

javascript.json

{
  "Starter JS": {
    "prefix": "start_js",
    "body": [
      "jQuery ( function($) {",
      "\tvar $1 = new $2($);",
      "\t$1.init();",
      "});",
      "\n",
      "function $2($) {",
      "\tself.init = function() {",
      "\t\t$3();",
      "\t}",
      "\n",
      "\tfunction $3() {",
      "\t\t$4",
      "\t}",
      "\n",
      "\treturn self;",
      "}",
      "$5"
    ],
    "description": "Starting JS File for WordPress Themes"
  },
  "Console Log": {
    "prefix": "log",
    "body": [
      "console.log(${1});${2}"
    ],
    "description": ""
  },
  "props.theme": {
    "prefix": "props.theme",
    "body": [
      "${props => props.theme.${1}};"
    ],
    "description": ""
  },
  "Import Styled Components": {
    "prefix": "sc",
    "body": [
      "import styled from \"styled-components\";"
    ],
    "description": ""
  },
  "Import Prop Types": {
    "prefix": "ip",
    "body": [
      "import PropTypes from \"prop-types\";"
    ],
    "description": ""
  },
  "Create a Styled Component": {
    "prefix": "styled",
    "body": [
      "const ${1} = styled.${2}`",
      "\t",
      "`;"
    ],
    "description": ""
  },
  "Component Section": {
    "prefix": "sh",
    "body": [
      "/** -------------------------------------------------",
      "* ${1}",
      "---------------------------------------------------- */",
      "\n${2}"
    ],
    "description": "",
  },
  "Establish Component's State": {
    "prefix": "state=",
    "body": [
      "state = {",
      "\t${1}: ${2},",
      "};",
      "\n${3}"
    ],
    "description": ""
  },
  "Props Block": {
    "prefix": "defineprops",
    "body": [
      "${TM_FILENAME_BASE}.propTypes = {",
      "\t${1}: PropTypes.${2}",
      "};",
      "\n",
      "${TM_FILENAME_BASE}.defaultProps = {",
      "\t${1}: ${3}",
      "};"
    ],
    "description": ""
  },
  "Test Block": {
    "prefix": "test",
    "body": [
      "test(\"${1}\", () => {",
      "\t${2}",
      "});"
    ]
  },
  "Expect Block": {
    "prefix": "expect",
    "body": [
      "expect(${1}).toBe(${2});"
    ]
  },
  "import export": {
    "prefix": "imex",
    "body": [
      "import { ${1:file} } from \"./${1:file}\";",
      "export { ${1:file} };"
    ],
    "description": "import export"
  },
  "import groq": {
    "prefix": "ig",
    "body": [
      "import client from \"utils/client\";",
      "import groq from \"groq\";"
    ],
    "description": "import groq"
  },
  "React Arrow Function Component Export with Styled Components": {
    "prefix": "rafcesc",
    "body": [
      "import styled from \"styled-components\";",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return (",
      "    <Styled${1:${TM_FILENAME_BASE}}>",
      "      ${2}",
      "    </Styled${1:${TM_FILENAME_BASE}}>",
      "  )",
      "}",
      "",
      "const Styled${1:${TM_FILENAME_BASE}} = styled.div`",
      "",
      "`;",
      "",
      "export { ${1:${TM_FILENAME_BASE}} }",
      ""
    ],
    "description": "React Arrow Function Component Export with Styled Components"
  },
  "Next.js Page": {
    "prefix": "nextjs",
    "body": [
      "export default function ${1:${TM_FILENAME_BASE}}() {",
      "  return (",
      "    <div>",
      "      ${2}",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "Next.js Page"
  }
}