My VS code snippets for reference

VS Code snippets

{
  // logging
  "Console log": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": ["console.log($1);", "$2"]
  },
  "Console table": {
    "scope": "javascript,typescript",
    "prefix": "ct",
    "body": ["console.table($1);", "$2"]
  },
  // react
  "Import react": {
    "scope": "javascript,typescript",
    "prefix": "imr",
    "body": ["import React from 'react';"]
  },
  "import reactDOM": {
    "scope": "javascript,typescript",
    "prefix": "imrd",
    "body": ["import ReactDOM from 'react-dom';", ""]
  },
  "React functional component": {
    "scope": "javascript,typescript",
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "\treturn (",
      "\t\t$0",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}};",
      ""
    ]
  },
  "Use state": {
    "prefix": "useState",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})"
    ]
  },
  "Use effect": {
    "prefix": "useEffect",
    "body": [
      "useEffect(() => {",
      "\t${1:effect}",
      "\treturn () => {",
      "\t\t${2:cleanup}",
      "\t}",
      "}, [${3:input}])"
    ]
  },
  "Use context": {
    "prefix": "useContext",
    "body": ["const ${1:context} = useContext(${2:contextValue})"]
  },
  // Typescript
  "React functional component with Typescript": {
    "prefix": "rfct",
    "body": [
      "import React from 'react'",
      "",
      "interface Props {",
      "\t",
      "}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}",
      ""
    ]
  },
  // vanilla js
  "For each": {
    "scope": "javascript,typescript",
    "prefix": "fre",
    "body": ["${1:array}.forEach(${2:currentItem} => {", "\t${0}", "})", ""]
  },
  "For of": {
    "prefix": "fof",
    "body": ["for(let ${1:item} of ${2:object}) {", "\t${0}", "}", ""]
  },
  "For in": {
    "prefix": "fin",
    "body": ["for(let ${1:item} in ${2:object}) {", "\t${0}", "}", ""]
  },
  "Array Map": {
    "prefix": "map",
    "body": ["${1:array}.map( ($2) => {", "\t${3}", "}", ""]
  },
  "JSON stringify": {
    "scope": "javascript,typescript",
    "prefix": "stringy",
    "body": ["JSON.stringify($1)"]
  },
  "Promise": {
    "scope": "javascript,typescript",
    "prefix": "prom",
    "body": ["return new Promise((resolve, reject) => {", "\t$1", "});"]
  },
  // Testing
  "Jest basic test": {
    "scope": "javascript,typescript",
    "prefix": "jb",
    "body": ["test('$1', () => {", "\texpect($2).toBe('$3');", "});"]
  },
  "Jest describe test": {
    "scope": "javascript,typescript",
    "prefix": "jd",
    "body": [
      "describe('$1', () => {",
      "\tit('should...', ()=> {",
      "\t$2",
      "\t});",
      "});"
    ]
  },
  "Setup React Jest Test": {
    "scope": "javascript,typescript",
    "prefix": "test",
    "body": [
      "import React from 'react'",
      "import renderer from 'react-test-renderer'",
      "",
      "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'",
      "",
      "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
      "\tconst defaultProps = {}",
      "\tconst wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)",
      "",
      "\ttest('render', () => {",
      "\t\texpect(wrapper).toMatchSnapshot()",
      "\t})",
      "})",
      ""
    ]
  },
  // markdown
  "Blog post front-matter": {
    "scope": "markdown",
    "prefix": "blog",
    "body": [
      "---",
	  "title: ${1:${TM_FILENAME_BASE}} ",
 	  "# subtitle: "
      "date: ${2:2021-12-12}",
      "meta: $3",
      "excerpt: $4",
      "# tags: post, life, dev, accessibility, funstuff, exercises",
      "# img: https://jessbudd.com/images/featured/---.png",
      "draft: true",
	  "---",
	  "",
	  "<h1>{{ title }}</h1>",
	  "",
	  "{%- if subtitle %}<p class='subtitle'>{{ subtitle | safe }}</p>{% endif %}",
	  "",
    ]
  },
  "Page front-matter": {
    "scope": "markdown",
    "prefix": "page",
    "body": [
      "---",
	  "title: ${1:${TM_FILENAME_BASE}} ",
	  "# subtitle: "
      "layout: ${2|layouts/blank.njk, layouts/base.njk|}",
      "date: ${3:2021-12-12}",
      "meta: $4",
      "excerpt: $5",
      "# tags: funstuff, exercises",
      "# img: https://jessbudd.com/images/featured/---.png",
      "draft: true",
	  "---",
	  "",
	  "<h1>{{ title }}</h1>",
	  "",
	  "{%- if subtitle %}<p class='subtitle'>{{ subtitle | safe }}</p>{% endif %}",
	  "",
    ]
  },
  "CSS Primary Color": {
    "prefix": "col1",
    "body": [
      "#583ca0;",
    ]
  },
  "CSS Secondary Color": {
    "prefix": "col2",
    "body": [
      "#00ffd2;",
    ]
  },
  "CSS Tertiary Color": {
    "prefix": "col3",
    "body": [
      "#cec2ef;",
    ]
  },
}