diff --git a/package.json b/package.json
index c254ebec..d15b1c62 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
                 "path": "./snippets/global.json"
             },
             {
-                "language": ["license"],
+                "language": [
+                    "license"
+                ],
                 "path": "./snippets/license.json"
             },
             {
@@ -37,7 +39,10 @@
                 "path": "./snippets/cpp/cppdoc.json"
             },
             {
-                "language": ["csharp", "cs"],
+                "language": [
+                    "csharp",
+                    "cs"
+                ],
                 "path": "./snippets/csharp/csharp.json"
             },
             {
@@ -49,7 +54,10 @@
                 "path": "./snippets/editorconfig.json"
             },
             {
-                "language": ["gitcommit", "NeogitCommitMessage"],
+                "language": [
+                    "gitcommit",
+                    "NeogitCommitMessage"
+                ],
                 "path": "./snippets/gitcommit.json"
             },
             {
@@ -69,7 +77,10 @@
                 "path": "./snippets/elixir.json"
             },
             {
-                "language": ["eelixir", "heex"],
+                "language": [
+                    "eelixir",
+                    "heex"
+                ],
                 "path": "./snippets/eelixir.json"
             },
             {
@@ -193,7 +204,12 @@
                 "path": "./snippets/systemverilog.json"
             },
             {
-                "language": ["shellscript", "shell", "sh", "zsh"],
+                "language": [
+                    "shellscript",
+                    "shell",
+                    "sh",
+                    "zsh"
+                ],
                 "path": "./snippets/shell/shell.json"
             },
             {
@@ -201,11 +217,17 @@
                 "path": "./snippets/shell/shelldoc.json"
             },
             {
-                "language": ["markdown", "rmd"],
+                "language": [
+                    "markdown",
+                    "rmd"
+                ],
                 "path": "./snippets/markdown.json"
             },
             {
-                "language": ["plaintex", "tex"],
+                "language": [
+                    "plaintex",
+                    "tex"
+                ],
                 "path": "./snippets/latex.json"
             },
             {
@@ -235,6 +257,9 @@
                     "pug",
                     "eruby",
                     "javascriptreact",
+                    "javascript",
+                    "typescriptreact",
+                    "typescript",
                     "htmldjango",
                     "astro",
                     "blade"
@@ -242,11 +267,22 @@
                 "path": "./snippets/html.json"
             },
             {
-                "language": ["css", "scss", "sass", "less", "stylus"],
+                "language": [
+                    "css",
+                    "scss",
+                    "sass",
+                    "less",
+                    "stylus"
+                ],
                 "path": "./snippets/css.json"
             },
             {
-                "language": ["javascript", "javascriptreact", "vue", "svelte"],
+                "language": [
+                    "javascript",
+                    "javascriptreact",
+                    "vue",
+                    "svelte"
+                ],
                 "path": "./snippets/javascript/javascript.json"
             },
             {
@@ -258,7 +294,10 @@
                 "path": "./snippets/javascript/tsdoc.json"
             },
             {
-                "language": ["typescript", "typescriptreact"],
+                "language": [
+                    "typescript",
+                    "typescriptreact"
+                ],
                 "path": "./snippets/javascript/typescript.json"
             },
             {
@@ -286,7 +325,10 @@
                 "path": "./snippets/javascript/react-native-ts.json"
             },
             {
-                "language": ["javascriptreact", "typescriptreact"],
+                "language": [
+                    "javascriptreact",
+                    "typescriptreact"
+                ],
                 "path": "./snippets/javascript/react-es7.json"
             },
             {
@@ -382,7 +424,10 @@
                 "path": "./snippets/frameworks/django/views.json"
             },
             {
-                "language": ["djangohtml", "htmldjango"],
+                "language": [
+                    "djangohtml",
+                    "htmldjango"
+                ],
                 "path": "./snippets/frameworks/djangohtml.json"
             },
             {
@@ -426,15 +471,24 @@
                 "path": "./snippets/kotlin/kdoc.json"
             },
             {
-                "language": ["plaintex", "tex"],
+                "language": [
+                    "plaintex",
+                    "tex"
+                ],
                 "path": "./snippets/latex/latex-snippets.json"
             },
             {
-                "language": ["plaintex", "tex"],
+                "language": [
+                    "plaintex",
+                    "tex"
+                ],
                 "path": "./snippets/latex/vscode-latex-snippets.json"
             },
             {
-                "language": ["bibtex", "bib"],
+                "language": [
+                    "bibtex",
+                    "bib"
+                ],
                 "path": "./snippets/latex/bibtex.json"
             },
             {
@@ -458,7 +512,10 @@
                 "path": "./snippets/frameworks/blade/snippets.json"
             },
             {
-                "language": ["r", "rmd"],
+                "language": [
+                    "r",
+                    "rmd"
+                ],
                 "path": "./snippets/r.json"
             },
             {
@@ -534,7 +591,10 @@
                 "path": "./snippets/frameworks/edge.json"
             },
             {
-                "language": ["powershell", "ps1"],
+                "language": [
+                    "powershell",
+                    "ps1"
+                ],
                 "path": "./snippets/PowerShell.json"
             },
             {
@@ -581,22 +641,21 @@
                 "path": "./snippets/beancount.json"
             },
             {
-                 "language": "rst",
-                 "path": "./snippets/rst.json"
+                "language": "rst",
+                "path": "./snippets/rst.json"
+            },
+            {
+                "language": "loremipsum",
+                "path": "./snippets/loremipsum.json"
             },
             {
-                 "language": "loremipsum",
-                 "path": "./snippets/loremipsum.json"
+                "language": "cmake",
+                "path": "./snippets/cmake.json"
             },
-	    {
-		"language": "cmake",
-		"path": "./snippets/cmake.json"
-	    },
             {
-                 "language": "zig",
-                 "path": "./snippets/zig.json"
+                "language": "zig",
+                "path": "./snippets/zig.json"
             }
         ]
     }
 }
-
diff --git a/snippets/html.json b/snippets/html.json
index 02456166..d5752072 100644
--- a/snippets/html.json
+++ b/snippets/html.json
@@ -43,7 +43,7 @@
     },
     "area": {
         "prefix": "area",
-        "body": "<area shape=\"$1\" coords=\"$2\" href=\"$3\" alt=\"$4\">$5",
+        "body": "<area shape=\"$1\" coords=\"$2\" href=\"$3\" alt=\"$4\" />$5",
         "description": "HTML - Defines an area inside an image map",
         "scope": "text.html"
     },
@@ -73,7 +73,7 @@
     },
     "base": {
         "prefix": "base",
-        "body": "<base href=\"$1\" target=\"$2\">$3",
+        "body": "<base href=\"$1\" target=\"$2\" />$3",
         "description": "HTML - Defines a base URL for all the links in a page",
         "scope": "text.html"
     },
@@ -109,7 +109,7 @@
     },
     "br": {
         "prefix": "br",
-        "body": "<br>",
+        "body": "<br />",
         "description": "HTML - Inserts a single line break",
         "scope": "text.html"
     },
@@ -145,7 +145,7 @@
     },
     "col": {
         "prefix": "col",
-        "body": "<col>$2",
+        "body": "<col />$2",
         "description": "HTML - Defines attributes for table columns",
         "scope": "text.html"
     },
@@ -223,7 +223,7 @@
     },
     "embed": {
         "prefix": "embed",
-        "body": "<embed src=\"$1\">$2",
+        "body": "<embed src=\"$1\" />$2",
         "description": "HTML - Defines external interactive content ot plugin",
         "scope": "text.html"
     },
@@ -313,7 +313,7 @@
     },
     "hr": {
         "prefix": "hr",
-        "body": "<hr>",
+        "body": "<hr />",
         "description": "HTML - Defines a horizontal rule",
         "scope": "text.html"
     },
@@ -356,13 +356,13 @@
     },
     "img": {
         "prefix": "img",
-        "body": "<img src=\"$1\" alt=\"$2\">$3",
+        "body": "<img src=\"$1\" alt=\"$2\" />$3",
         "description": "HTML - Defines an image",
         "scope": "text.html"
     },
     "input": {
         "prefix": "input",
-        "body": "<input type=\"$1\" name=\"$2\" value=\"$3\">$4",
+        "body": "<input type=\"$1\" name=\"$2\" value=\"$3\" />$4",
         "description": "HTML - Defines an input field",
         "scope": "text.html"
     },
@@ -374,7 +374,7 @@
     },
     "keygen": {
         "prefix": "keygen",
-        "body": "<keygen name=\"$1\">$2",
+        "body": "<keygen name=\"$1\" />$2",
         "description": "HTML - Defines a generated key in a form",
         "scope": "text.html"
     },
@@ -386,7 +386,7 @@
     },
     "label": {
         "prefix": "label",
-        "body": "<label for=\"$1\">$2</label>$3",
+        "body": "<label>$2</label>$3",
         "description": "HTML - Defines an inline window",
         "scope": "text.html"
     },
@@ -440,7 +440,7 @@
     },
     "meta": {
         "prefix": "meta",
-        "body": "<meta name=\"$1\" content=\"$2\">$3",
+        "body": "<meta name=\"$1\" content=\"$2\" />$3",
         "description": "HTML - Defines meta information",
         "scope": "text.html"
     },
@@ -500,7 +500,7 @@
     },
     "param": {
         "prefix": "param",
-        "body": "<param name=\"$1\" value=\"$2\">$3",
+        "body": "<param name=\"$1\" value=\"$2\" />$3",
         "description": "HTML - Defines a parameter for an object",
         "scope": "text.html"
     },
@@ -680,7 +680,7 @@
     },
     "track": {
         "prefix": "track",
-        "body": "<track src=\"$1\" kind=\"$2\" srclang=\"$3\" label=\"$4\">$5",
+        "body": "<track src=\"$1\" kind=\"$2\" srclang=\"$3\" label=\"$4\" />$5",
         "description": "HTML - Defines a table row",
         "scope": "text.html"
     },
@@ -712,73 +712,73 @@
         "description": "HTML - Defines a video",
         "scope": "text.html"
     },
-"div.": {
+    "div.": {
         "prefix": "div.",
         "body": ["<div class=\"$1\">", "\t$2", "</div>"],
         "description": "HTML - Defines a section in a document",
         "scope": "text.html"
     },
-"div#": {
+    "div#": {
         "prefix": "div#",
         "body": ["<div id=\"$1\">", "\t$2", "</div>"],
         "description": "HTML - Defines a section in a document",
         "scope": "text.html"
     },
-"div.#": {
+    "div.#": {
         "prefix": "div.#",
         "body": ["<div class=\"$1\" id=\"$2\">", "\t$3", "</div>"],
         "description": "HTML - Defines a section in a document",
         "scope": "text.html"
     },
-"p.": {
+    "p.": {
         "prefix": "p.",
         "body": ["<p class=\"$1\">$2</p>"],
         "description": "HTML - Defines a paragraph",
         "scope": "text.html"
     },
-"p#": {
+    "p#": {
         "prefix": "p#",
         "body": ["<p id=\"$1\">$2</p>"],
         "description": "HTML - Defines a paragraph",
         "scope": "text.html"
     },
-"p.#": {
+    "p.#": {
         "prefix": "p.#",
         "body": ["<p class=\"$1\" id=\"$2\">$3</p>"],
         "description": "HTML - Defines a paragraph",
         "scope": "text.html"
     },
-"ul.": {
+    "ul.": {
         "prefix": "ul.",
         "body": ["<ul class=\"$1\">", "\t$2", "</ul>"],
         "description": "HTML - Defines an unordered list",
         "scope": "text.html"
     },
-"ul#": {
+    "ul#": {
         "prefix": "ul#",
         "body": ["<ul id=\"$1\">", "\t$2", "</ul>"],
         "description": "HTML - Defines an unordered list",
         "scope": "text.html"
     },
-"ul.#": {
+    "ul.#": {
         "prefix": "ul.#",
         "body": ["<ul class=\"$1\" id=\"$2\">", "\t$3", "</ul>"],
         "description": "HTML - Defines an unordered list",
         "scope": "text.html"
     },
-"ol.": {
+    "ol.": {
         "prefix": "ol.",
         "body": ["<ol class=\"$1\">", "\t$2", "</ol>"],
         "description": "HTML - Defines an ordered list",
         "scope": "text.html"
     },
-"ol#": {
+    "ol#": {
         "prefix": "ol#",
         "body": ["<ol id=\"$1\">", "\t$2", "</ol>"],
         "description": "HTML - Defines an ordered list",
         "scope": "text.html"
     },
-"ol.#": {
+    "ol.#": {
         "prefix": "ol.#",
         "body": ["<ol class=\"$1\" id=\"$2\">", "\t$3", "</ol>"],
         "description": "HTML - Defines an ordered list",
diff --git a/snippets/javascript/javascript.json b/snippets/javascript/javascript.json
index 5500ecc8..6cb978ec 100644
--- a/snippets/javascript/javascript.json
+++ b/snippets/javascript/javascript.json
@@ -319,6 +319,10 @@
         "prefix": "edf",
         "body": "export default function ${1:name} (${2:arguments}) {\n\t${0}\n}"
     },
+    "module default export async function": {
+        "prefix": "edaf",
+        "body": "export default async function ${1:name} (${2:arguments}) {\n\t${0}\n}"
+    },
     "import module": {
         "prefix": "im",
         "body": "import ${2:*} from '${1:module}'"
diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json
index 372eb6d1..62cb9220 100644
--- a/snippets/javascript/react-ts.json
+++ b/snippets/javascript/react-ts.json
@@ -1,375 +1,181 @@
 {
-  "destructuring of props": {
-    "prefix": "dp",
-    "body": ["const { ${1:name} } = this.props"]
-  },
-  "destructuring of state": {
-    "prefix": "ds",
-    "body": ["const { ${1:name} } = this.state"]
-  },
-  "reactClassComponent": {
-    "prefix": "rcc",
-    "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nexport default ${1}",
-    "description": "Creates a React component class"
-  },
-  "reactJustClassComponent": {
-    "prefix": "rcjc",
-    "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n",
-    "description": "Creates a React component class"
-  },
-  "reactClassComponentPropTypes": {
-    "prefix": "rccp",
-    "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
-    "description": "Creates a React component class with PropTypes"
-  },
-  "reactClassComponentWithMethods": {
-    "prefix": "rcfc",
-    "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
-    "description": "Creates a React component class with PropTypes and all lifecycle methods"
-  },
-  "reactFunctionComponent": {
-    "prefix": "rfc",
-    "body": "export const ${TM_FILENAME_BASE} = (props : {}) => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
-    "description": "Creates a React functional component without PropTypes"
-  },
-  "reactFunctionComponentWithEmotion": {
-    "prefix": "rfce",
-    "body": "import { css } from '@emotion/core'\nexport const ${TM_FILENAME_BASE} = (props: {}) => {\n\treturn (\n\t\t<div css={css``}>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
-    "description": "Creates a React functional component with emotion import"
-  },
-  "classConstructor": {
-    "prefix": "con",
-    "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
-    "description": "Adds a default constructor for the class that contains props as arguments"
-  },
-  "classConstructorContext": {
-    "prefix": "conc",
-    "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
-    "description": "Adds a default constructor for the class that contains props and context as arguments"
-  },
-  "componentWillMount": {
-    "prefix": "cwm",
-    "body": "\ncomponentWillMount () {\n\t$0\n}\n",
-    "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
-  },
-  "componentDidMount": {
-    "prefix": "cdm",
-    "body": "componentDidMount () {\n\t$0\n}\n",
-    "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
-  },
-  "componentWillReceiveProps": {
-    "prefix": "cwr",
-    "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
-    "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
-  },
-  "componentGetDerivedStateFromProps": {
-    "prefix": "cgd",
-    "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
-    "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
-  },
-  "shouldComponentUpdate": {
-    "prefix": "scu",
-    "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
-    "description": "Invoked before rendering when new props or state are being received. "
-  },
-  "componentWillUpdate": {
-    "prefix": "cwup",
-    "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
-    "description": "Invoked immediately before rendering when new props or state are being received."
-  },
-  "componentDidUpdate": {
-    "prefix": "cdup",
-    "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
-    "description": "Invoked immediately after the component's updates are flushed to the DOM."
-  },
-  "componentWillUnmount": {
-    "prefix": "cwun",
-    "body": "componentWillUnmount () {\n\t$0\n}\n",
-    "description": "Invoked immediately before a component is unmounted from the DOM."
-  },
-  "componentRender": {
-    "prefix": "ren",
-    "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
-    "description": "When called, it should examine this.props and this.state and return a single child element."
-  },
-  "componentSetStateObject": {
-    "prefix": "sst",
-    "body": "this.setState($0)",
-    "description": "Performs a shallow merge of nextState into current state"
-  },
-  "componentSetStateFunc": {
-    "prefix": "ssf",
-    "body": "this.setState((state, props) => { return { $0 }})\n",
-    "description": "Performs a shallow merge of nextState into current state"
-  },
-  "componentProps": {
-    "prefix": "tp",
-    "body": "this.props.$0",
-    "description": "Access component's props"
-  },
-  "componentState": {
-    "prefix": "ts",
-    "body": "this.state.$0",
-    "description": "Access component's state"
-  },
-  "propTypes": {
-    "prefix": "rpt",
-    "body": "$1.propTypes = {\n\t$2\n}",
-    "description": "Creates empty propTypes declaration"
-  },
-  "propTypeArray": {
-    "prefix": "pta",
-    "body": "PropTypes.array,",
-    "description": "Array prop type"
-  },
-  "propTypeArrayRequired": {
-    "prefix": "ptar",
-    "body": "PropTypes.array.isRequired,",
-    "description": "Array prop type required"
-  },
-  "propTypeBool": {
-    "prefix": "ptb",
-    "body": "PropTypes.bool,",
-    "description": "Bool prop type"
-  },
-  "propTypeBoolRequired": {
-    "prefix": "ptbr",
-    "body": "PropTypes.bool.isRequired,",
-    "description": "Bool prop type required"
-  },
-  "propTypeFunc": {
-    "prefix": "ptf",
-    "body": "PropTypes.func,",
-    "description": "Func prop type"
-  },
-  "propTypeFuncRequired": {
-    "prefix": "ptfr",
-    "body": "PropTypes.func.isRequired,",
-    "description": "Func prop type required"
-  },
-  "propTypeNumber": {
-    "prefix": "ptn",
-    "body": "PropTypes.number,",
-    "description": "Number prop type"
-  },
-  "propTypeNumberRequired": {
-    "prefix": "ptnr",
-    "body": "PropTypes.number.isRequired,",
-    "description": "Number prop type required"
-  },
-  "propTypeObject": {
-    "prefix": "pto",
-    "body": "PropTypes.object,",
-    "description": "Object prop type"
-  },
-  "propTypeObjectRequired": {
-    "prefix": "ptor",
-    "body": "PropTypes.object.isRequired,",
-    "description": "Object prop type required"
-  },
-  "propTypeString": {
-    "prefix": "pts",
-    "body": "PropTypes.string,",
-    "description": "String prop type"
-  },
-  "propTypeStringRequired": {
-    "prefix": "ptsr",
-    "body": "PropTypes.string.isRequired,",
-    "description": "String prop type required"
-  },
-  "propTypeNode": {
-    "prefix": "ptnd",
-    "body": "PropTypes.node,",
-    "description": "Anything that can be rendered: numbers, strings, elements or an array"
-  },
-  "propTypeNodeRequired": {
-    "prefix": "ptndr",
-    "body": "PropTypes.node.isRequired,",
-    "description": "Anything that can be rendered: numbers, strings, elements or an array required"
-  },
-  "propTypeElement": {
-    "prefix": "ptel",
-    "body": "PropTypes.element,",
-    "description": "React element prop type"
-  },
-  "propTypeElementRequired": {
-    "prefix": "ptelr",
-    "body": "PropTypes.element.isRequired,",
-    "description": "React element prop type required"
-  },
-  "propTypeInstanceOf": {
-    "prefix": "pti",
-    "body": "PropTypes.instanceOf($0),",
-    "description": "Is an instance of a class prop type"
-  },
-  "propTypeInstanceOfRequired": {
-    "prefix": "ptir",
-    "body": "PropTypes.instanceOf($0).isRequired,",
-    "description": "Is an instance of a class prop type required"
-  },
-  "propTypeEnum": {
-    "prefix": "pte",
-    "body": "PropTypes.oneOf(['$0']),",
-    "description": "Prop type limited to specific values by treating it as an enum"
-  },
-  "propTypeEnumRequired": {
-    "prefix": "pter",
-    "body": "PropTypes.oneOf(['$0']).isRequired,",
-    "description": "Prop type limited to specific values by treating it as an enum required"
-  },
-  "propTypeOneOfType": {
-    "prefix": "ptet",
-    "body": "PropTypes.oneOfType([\n\t$0\n]),",
-    "description": "An object that could be one of many types"
-  },
-  "propTypeOneOfTypeRequired": {
-    "prefix": "ptetr",
-    "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
-    "description": "An object that could be one of many types required"
-  },
-  "propTypeArrayOf": {
-    "prefix": "ptao",
-    "body": "PropTypes.arrayOf($0),",
-    "description": "An array of a certain type"
-  },
-  "propTypeArrayOfRequired": {
-    "prefix": "ptaor",
-    "body": "PropTypes.arrayOf($0).isRequired,",
-    "description": "An array of a certain type required"
-  },
-  "propTypeObjectOf": {
-    "prefix": "ptoo",
-    "body": "PropTypes.objectOf($0),",
-    "description": "An object with property values of a certain type"
-  },
-  "propTypeObjectOfRequired": {
-    "prefix": "ptoor",
-    "body": "PropTypes.objectOf($0).isRequired,",
-    "description": "An object with property values of a certain type required"
-  },
-  "propTypeShape": {
-    "prefix": "ptsh",
-    "body": "PropTypes.shape({\n\t$0\n}),",
-    "description": "An object taking on a particular shape"
-  },
-  "propTypeShapeRequired": {
-    "prefix": "ptshr",
-    "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
-    "description": "An object taking on a particular shape required"
-  },
-  "jsx element": {
-    "prefix": "j",
-    "body": "<${1:elementName}>\n\t$0\n</${1}>",
-    "description": "an element"
-  },
-  "jsx element self closed": {
-    "prefix": "jc",
-    "body": "<${1:elementName} />",
-    "description": "an element self closed"
-  },
-  "jsx elements map": {
-    "prefix": "jm",
-    "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
-    "description": "an element self closed"
-  },
-  "jsx elements map with return": {
-    "prefix": "jmr",
-    "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
-    "description": "an element self closed"
-  },
-  "jsx element wrap selection": {
-    "prefix": "jsx wrap selection with element",
-    "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
-    "description": "an element"
-  },
-  "useState": {
-    "prefix": "us",
-    "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
-    "description": "React useState() hook"
-  },
-  "useEffect": {
-    "prefix": "ue",
-    "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
-    "description": "React useEffect() hook"
-  },
-  "useEffect with cleanup": {
-    "prefix": "uec",
-    "body": [
-      "useEffect(() => {",
-      "\t$1",
-      "\n\treturn () => {",
-      "\t\t$2",
-      "\t}",
-      "}, [${3:dependencies}])$0"
-    ],
-    "description": "React useEffect() hook with a cleanup function"
-  },
-  "createContext": {
-    "prefix": "cc",
-    "body": [
-      "export const $1 = createContext<$2>(",
-      "\t(null as any) as $2",
-      ")"
-    ],
-    "description": "creates a react context"
-  },
-  "useContext": {
-    "prefix": "uc",
-    "body": ["const $1 = useContext($2)$0"],
-    "description": "React useContext() hook"
-  },
-  "useRef": {
-    "prefix": "ur",
-    "body": ["const ${1:elName}El = useRef(null)$0"],
-    "description": "React useRef() hook"
-  },
-  "useCallback": {
-    "prefix": "ucb",
-    "body": [
-      "const ${1:memoizedCallback} = useCallback(",
-      "\t() => {",
-      "\t\t${2:doSomething}(${3:a}, ${4:b})",
-      "\t},",
-      "\t[${5:a}, ${6:b}],",
-      ")$0"
-    ],
-    "description": "React useCallback() hook"
-  },
-  "useMemo": {
-    "prefix": "ume",
-    "body": [
-      "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
-    ],
-    "description": "React useMemo() hook"
-  },
-  "createReactHook": {
-    "prefix": "crh",
-    "body": ["export const use$0 = () => {", "", "}"],
-    "description": "Create React Hook"
-  },
-  "createReactHookWithName": {
-    "prefix": "crhn",
-    "body": ["export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"],
-    "description": "Create React Hook using File name"
-  },
-  "describeBlock": {
-    "prefix": "desc",
-    "body": ["describe('$1', () => {", "  $0", "})", ""],
-    "description": "Testing `describe` block"
-  },
-  "testBlock": {
-    "prefix": "test",
-    "body": ["test('should $1', () => {", "  $0", "})", ""],
-    "description": "Testing `test` block"
-  },
-  "itBlock": {
-    "prefix": "tit",
-    "body": ["it('should $1', () => {", "  $0", "})", ""],
-    "description": "Testing `it` block"
-  },
-  "itAsyncBlock": {
-    "prefix": "tita",
-    "body": ["it('should $1', async () => {", "  $0", "})", ""],
-    "description": "Testing async `it` block"
-  }
+    "classConstructor": {
+        "prefix": "con",
+        "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props as arguments"
+    },
+    "classConstructorContext": {
+        "prefix": "conc",
+        "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props and context as arguments"
+    },
+    "componentDidMount": {
+        "prefix": "cdm",
+        "body": "componentDidMount () {\n\t$0\n}\n",
+        "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+    },
+    "componentGetDerivedStateFromProps": {
+        "prefix": "cgd",
+        "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+    },
+    "shouldComponentUpdate": {
+        "prefix": "scu",
+        "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked before rendering when new props or state are being received. "
+    },
+    "componentDidUpdate": {
+        "prefix": "cdup",
+        "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked immediately after the component's updates are flushed to the DOM."
+    },
+    "componentWillUnmount": {
+        "prefix": "cwun",
+        "body": "componentWillUnmount () {\n\t$0\n}\n",
+        "description": "Invoked immediately before a component is unmounted from the DOM."
+    },
+    "componentRender": {
+        "prefix": "ren",
+        "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "When called, it should examine this.props and this.state and return a single child element."
+    },
+    "jsx element": {
+        "prefix": "j",
+        "body": "<${1:elementName}>\n\t$0\n</${1}>",
+        "description": "an element"
+    },
+    "jsx element self closed": {
+        "prefix": "jc",
+        "body": "<${1:elementName} />",
+        "description": "an element self closed"
+    },
+    "jsx elements map": {
+        "prefix": "jm",
+        "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
+        "description": "an element self closed"
+    },
+    "jsx elements map with return": {
+        "prefix": "jmr",
+        "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
+        "description": "an element self closed"
+    },
+    "jsx element wrap selection": {
+        "prefix": "jsx wrap selection with element",
+        "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
+        "description": "an element"
+    },
+    "useState": {
+        "prefix": "us",
+        "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+        "description": "React useState() hook"
+    },
+    "useEffect": {
+        "prefix": "ue",
+        "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+        "description": "React useEffect() hook"
+    },
+    "useEffect with cleanup": {
+        "prefix": "uec",
+        "body": [
+            "useEffect(() => {",
+            "\t$1",
+            "\n\treturn () => {",
+            "\t\t$2",
+            "\t}",
+            "}, [${3:dependencies}])$0"
+        ],
+        "description": "React useEffect() hook with a cleanup function"
+    },
+    "createContext": {
+        "prefix": "cc",
+        "body": [
+            "export const $1 = createContext<$2>(",
+            "\t(null as any) as $2",
+            ")"
+        ],
+        "description": "creates a react context"
+    },
+    "useContext": {
+        "prefix": "uc",
+        "body": ["const $1 = useContext($2)$0"],
+        "description": "React useContext() hook"
+    },
+    "useRef": {
+        "prefix": "ur",
+        "body": ["const ${1:elName}El = useRef(null)$0"],
+        "description": "React useRef() hook"
+    },
+    "useCallback": {
+        "prefix": "ucb",
+        "body": [
+            "const ${1:memoizedCallback} = useCallback(",
+            "\t() => {",
+            "\t\t${2:doSomething}(${3:a}, ${4:b})",
+            "\t},",
+            "\t[${5:a}, ${6:b}],",
+            ")$0"
+        ],
+        "description": "React useCallback() hook"
+    },
+    "useMemo": {
+        "prefix": "ume",
+        "body": [
+            "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+        ],
+        "description": "React useMemo() hook"
+    },
+    "createReactHook": {
+        "prefix": "crh",
+        "body": ["export const use$0 = () => {", "", "}"],
+        "description": "Create React Hook"
+    },
+    "createReactHookWithName": {
+        "prefix": "crhn",
+        "body": ["export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"],
+        "description": "Create React Hook using File name"
+    },
+    "describeBlock": {
+        "prefix": "desc",
+        "body": ["describe('$1', () => {", "  $0", "})", ""],
+        "description": "Testing `describe` block"
+    },
+    "testBlock": {
+        "prefix": "test",
+        "body": ["test('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `test` block"
+    },
+    "itBlock": {
+        "prefix": "tit",
+        "body": ["it('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `it` block"
+    },
+    "itAsyncBlock": {
+        "prefix": "tita",
+        "body": ["it('should $1', async () => {", "  $0", "})", ""],
+        "description": "Testing async `it` block"
+    },
+    "export react component": {
+        "prefix": "erc",
+        "body": "export const ${1:ComponentName} = (${2:props}) => {\n\t${0}\n}"
+    },
+    "export react component typed": {
+        "prefix": "erct",
+        "body": "export const ${1:ComponentName} = (${2:props}: ${3:Props}) => {\n\t${0}\n}"
+    },
+    "export default react component": {
+        "prefix": "edrc",
+        "body": "export default function ${1:ComponentName}(${2:props}) {\n\t${0}\n}"
+    },
+    "export default react component typed": {
+        "prefix": "edrct",
+        "body": "export default function ${1:ComponentName}(${2:props}: ${3:Props}) {\n\t${0}\n}"
+    },
+    "export default async react component": {
+        "prefix": "edrac",
+        "body": "export default async function ${1:ComponentName}(${2:props}) {\n\t${0}\n}"
+    },
+    "export default async react component typed": {
+        "prefix": "edract",
+        "body": "export default async function ${1:ComponentName}(${2:props}: ${3:Props}) {\n\t${0}\n}"
+    }
 }
diff --git a/snippets/javascript/react.json b/snippets/javascript/react.json
index a41e83d9..0c934e83 100644
--- a/snippets/javascript/react.json
+++ b/snippets/javascript/react.json
@@ -1,370 +1,370 @@
 {
-  "destructuring of props": {
-    "prefix": "dp",
-    "body": ["const { ${1:name} } = this.props"]
-  },
-  "destructuring of state": {
-    "prefix": "ds",
-    "body": ["const { ${1:name} } = this.state"]
-  },
-  "if falsy return null": {
-    "prefix": "ifr",
-    "body": "if (!${1:condition}) {\n\treturn null\n}"
-  },
-  "reactClassComponent": {
-    "prefix": "rcc",
-    "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nexport default ${1}",
-    "description": "Creates a React component class"
-  },
-  "reactJustClassComponent": {
-    "prefix": "rcjc",
-    "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n",
-    "description": "Creates a React component class"
-  },
-  "reactClassComponentPropTypes": {
-    "prefix": "rccp",
-    "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
-    "description": "Creates a React component class with PropTypes"
-  },
-  "reactClassComponentWithMethods": {
-    "prefix": "rcfc",
-    "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
-    "description": "Creates a React component class with PropTypes and all lifecycle methods"
-  },
-  "reactFunctionComponent": {
-    "prefix": "rfc",
-    "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}",
-    "description": "Creates a React function component without PropTypes"
-  },
-  "reactFunctionComponentWithCustomName": {
-    "prefix": "rfcn",
-    "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${1:functionname}",
-    "description": "Creates a React function component with custom name"
-  },
-  "reactFunctionComponentWithEmotion": {
-    "prefix": "rfce",
-    "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div css={css``}>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
-    "description": "Creates a React functional component with emotion"
-  },
-  "reactStatelessProps": {
-    "prefix": "rfcp",
-    "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}",
-    "description": "Creates a React function component with PropTypes"
-  },
-  "classConstructor": {
-    "prefix": "con",
-    "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
-    "description": "Adds a default constructor for the class that contains props as arguments"
-  },
-  "classConstructorContext": {
-    "prefix": "conc",
-    "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
-    "description": "Adds a default constructor for the class that contains props and context as arguments"
-  },
-  "componentWillMount": {
-    "prefix": "cwm",
-    "body": "\ncomponentWillMount () {\n\t$0\n}\n",
-    "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
-  },
-  "componentDidMount": {
-    "prefix": "cdm",
-    "body": "componentDidMount () {\n\t$0\n}\n",
-    "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
-  },
-  "componentWillReceiveProps": {
-    "prefix": "cwr",
-    "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
-    "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
-  },
-  "componentGetDerivedStateFromProps": {
-    "prefix": "cgd",
-    "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
-    "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
-  },
-  "shouldComponentUpdate": {
-    "prefix": "scu",
-    "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
-    "description": "Invoked before rendering when new props or state are being received. "
-  },
-  "componentWillUpdate": {
-    "prefix": "cwup",
-    "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
-    "description": "Invoked immediately before rendering when new props or state are being received."
-  },
-  "componentDidUpdate": {
-    "prefix": "cdup",
-    "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
-    "description": "Invoked immediately after the component's updates are flushed to the DOM."
-  },
-  "componentWillUnmount": {
-    "prefix": "cwun",
-    "body": "componentWillUnmount () {\n\t$0\n}\n",
-    "description": "Invoked immediately before a component is unmounted from the DOM."
-  },
-  "componentRender": {
-    "prefix": "ren",
-    "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
-    "description": "When called, it should examine this.props and this.state and return a single child element."
-  },
-  "componentSetStateObject": {
-    "prefix": "sst",
-    "body": "this.setState($0)",
-    "description": "Performs a shallow merge of nextState into current state"
-  },
-  "componentSetStateFunc": {
-    "prefix": "ssf",
-    "body": "this.setState((state, props) => { return { $0 }})\n",
-    "description": "Performs a shallow merge of nextState into current state"
-  },
-  "componentProps": {
-    "prefix": "tp",
-    "body": "this.props.$0",
-    "description": "Access component's props"
-  },
-  "componentState": {
-    "prefix": "ts",
-    "body": "this.state.$0",
-    "description": "Access component's state"
-  },
-  "propTypes": {
-    "prefix": "rpt",
-    "body": "$1.propTypes = {\n\t$2\n}",
-    "description": "Creates empty propTypes declaration"
-  },
-  "propTypeArray": {
-    "prefix": "pta",
-    "body": "PropTypes.array,",
-    "description": "Array prop type"
-  },
-  "propTypeArrayRequired": {
-    "prefix": "ptar",
-    "body": "PropTypes.array.isRequired,",
-    "description": "Array prop type required"
-  },
-  "propTypeBool": {
-    "prefix": "ptb",
-    "body": "PropTypes.bool,",
-    "description": "Bool prop type"
-  },
-  "propTypeBoolRequired": {
-    "prefix": "ptbr",
-    "body": "PropTypes.bool.isRequired,",
-    "description": "Bool prop type required"
-  },
-  "propTypeFunc": {
-    "prefix": "ptf",
-    "body": "PropTypes.func,",
-    "description": "Func prop type"
-  },
-  "propTypeFuncRequired": {
-    "prefix": "ptfr",
-    "body": "PropTypes.func.isRequired,",
-    "description": "Func prop type required"
-  },
-  "propTypeNumber": {
-    "prefix": "ptn",
-    "body": "PropTypes.number,",
-    "description": "Number prop type"
-  },
-  "propTypeNumberRequired": {
-    "prefix": "ptnr",
-    "body": "PropTypes.number.isRequired,",
-    "description": "Number prop type required"
-  },
-  "propTypeObject": {
-    "prefix": "pto",
-    "body": "PropTypes.object,",
-    "description": "Object prop type"
-  },
-  "propTypeObjectRequired": {
-    "prefix": "ptor",
-    "body": "PropTypes.object.isRequired,",
-    "description": "Object prop type required"
-  },
-  "propTypeString": {
-    "prefix": "pts",
-    "body": "PropTypes.string,",
-    "description": "String prop type"
-  },
-  "propTypeStringRequired": {
-    "prefix": "ptsr",
-    "body": "PropTypes.string.isRequired,",
-    "description": "String prop type required"
-  },
-  "propTypeNode": {
-    "prefix": "ptnd",
-    "body": "PropTypes.node,",
-    "description": "Anything that can be rendered: numbers, strings, elements or an array"
-  },
-  "propTypeNodeRequired": {
-    "prefix": "ptndr",
-    "body": "PropTypes.node.isRequired,",
-    "description": "Anything that can be rendered: numbers, strings, elements or an array required"
-  },
-  "propTypeElement": {
-    "prefix": "ptel",
-    "body": "PropTypes.element,",
-    "description": "React element prop type"
-  },
-  "propTypeElementRequired": {
-    "prefix": "ptelr",
-    "body": "PropTypes.element.isRequired,",
-    "description": "React element prop type required"
-  },
-  "propTypeInstanceOf": {
-    "prefix": "pti",
-    "body": "PropTypes.instanceOf($0),",
-    "description": "Is an instance of a class prop type"
-  },
-  "propTypeInstanceOfRequired": {
-    "prefix": "ptir",
-    "body": "PropTypes.instanceOf($0).isRequired,",
-    "description": "Is an instance of a class prop type required"
-  },
-  "propTypeEnum": {
-    "prefix": "pte",
-    "body": "PropTypes.oneOf(['$0']),",
-    "description": "Prop type limited to specific values by treating it as an enum"
-  },
-  "propTypeEnumRequired": {
-    "prefix": "pter",
-    "body": "PropTypes.oneOf(['$0']).isRequired,",
-    "description": "Prop type limited to specific values by treating it as an enum required"
-  },
-  "propTypeOneOfType": {
-    "prefix": "ptet",
-    "body": "PropTypes.oneOfType([\n\t$0\n]),",
-    "description": "An object that could be one of many types"
-  },
-  "propTypeOneOfTypeRequired": {
-    "prefix": "ptetr",
-    "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
-    "description": "An object that could be one of many types required"
-  },
-  "propTypeArrayOf": {
-    "prefix": "ptao",
-    "body": "PropTypes.arrayOf($0),",
-    "description": "An array of a certain type"
-  },
-  "propTypeArrayOfRequired": {
-    "prefix": "ptaor",
-    "body": "PropTypes.arrayOf($0).isRequired,",
-    "description": "An array of a certain type required"
-  },
-  "propTypeObjectOf": {
-    "prefix": "ptoo",
-    "body": "PropTypes.objectOf($0),",
-    "description": "An object with property values of a certain type"
-  },
-  "propTypeObjectOfRequired": {
-    "prefix": "ptoor",
-    "body": "PropTypes.objectOf($0).isRequired,",
-    "description": "An object with property values of a certain type required"
-  },
-  "propTypeShape": {
-    "prefix": "ptsh",
-    "body": "PropTypes.shape({\n\t$0\n}),",
-    "description": "An object taking on a particular shape"
-  },
-  "propTypeShapeRequired": {
-    "prefix": "ptshr",
-    "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
-    "description": "An object taking on a particular shape required"
-  },
-  "jsx element": {
-    "prefix": "j",
-    "body": "<${1:elementName}>\n\t$0\n</${1}>",
-    "description": "an element"
-  },
-  "jsx element self closed": {
-    "prefix": "jc",
-    "body": "<${1:elementName} />",
-    "description": "an element self closed"
-  },
-  "jsx elements map": {
-    "prefix": "jm",
-    "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
-    "description": "an element self closed"
-  },
-  "jsx elements map with return": {
-    "prefix": "jmr",
-    "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
-    "description": "an element self closed"
-  },
-  "jsx element wrap selection": {
-    "prefix": "jsx wrap selection with element",
-    "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
-    "description": "an element"
-  },
-  "useState": {
-    "prefix": "us",
-    "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
-    "description": "React useState() hook"
-  },
-  "useEffect": {
-    "prefix": "ue",
-    "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
-    "description": "React useEffect() hook"
-  },
-  "useEffect with return": {
-    "prefix": "uer",
-    "body": [
-      "useEffect(() => {",
-      "\t$1",
-      "\n\treturn () => {",
-      "\t\t$2",
-      "\t}",
-      "}, [${3:dependencies}])$0"
-    ],
-    "description": "React useEffect() hook with return statement"
-  },
-  "useContext": {
-    "prefix": "uc",
-    "body": ["const $1 = useContext($2)$0"],
-    "description": "React useContext() hook"
-  },
-  "useRef": {
-    "prefix": "ur",
-    "body": ["const ${1:elName}El = useRef(null)$0"],
-    "description": "React useContext() hook"
-  },
-  "useCallback": {
-    "prefix": "ucb",
-    "body": [
-      "const ${1:memoizedCallback} = useCallback(",
-      "\t() => {",
-      "\t\t${2:doSomething}(${3:a}, ${4:b})",
-      "\t},",
-      "\t[${5:a}, ${6:b}],",
-      ")$0"
-    ],
-    "description": "React useCallback() hook"
-  },
-  "useMemo": {
-    "prefix": "ume",
-    "body": [
-      "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
-    ],
-    "description": "React useMemo() hook"
-  },
-  "describeBlock": {
-    "prefix": "desc",
-    "body": ["describe('$1', () => {", "  $0", "})", ""],
-    "description": "Testing `describe` block"
-  },
-  "testBlock": {
-    "prefix": "test",
-    "body": ["test('should $1', () => {", "  $0", "})", ""],
-    "description": "Testing `test` block"
-  },
-  "itBlock": {
-    "prefix": "tit",
-    "body": ["it('should $1', () => {", "  $0", "})", ""],
-    "description": "Testing `it` block"
-  },
-  "itAsyncBlock": {
-    "prefix": "tita",
-    "body": ["it('should $1', async () => {", "  $0", "})", ""],
-    "description": "Testing async `it` block"
-  }
+    "destructuring of props": {
+        "prefix": "dp",
+        "body": ["const { ${1:name} } = this.props"]
+    },
+    "destructuring of state": {
+        "prefix": "ds",
+        "body": ["const { ${1:name} } = this.state"]
+    },
+    "if falsy return null": {
+        "prefix": "ifr",
+        "body": "if (!${1:condition}) {\n\treturn null\n}"
+    },
+    "reactClassComponent": {
+        "prefix": "rcc",
+        "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nexport default ${1}",
+        "description": "Creates a React component class"
+    },
+    "reactJustClassComponent": {
+        "prefix": "rcjc",
+        "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n",
+        "description": "Creates a React component class"
+    },
+    "reactClassComponentPropTypes": {
+        "prefix": "rccp",
+        "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes"
+    },
+    "reactClassComponentWithMethods": {
+        "prefix": "rcfc",
+        "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t<div>\n\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+        "description": "Creates a React component class with PropTypes and all lifecycle methods"
+    },
+    "reactFunctionComponent": {
+        "prefix": "rfc",
+        "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}",
+        "description": "Creates a React function component without PropTypes"
+    },
+    "reactFunctionComponentWithCustomName": {
+        "prefix": "rfcn",
+        "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}\n\nexport default ${1:functionname}",
+        "description": "Creates a React function component with custom name"
+    },
+    "reactFunctionComponentWithEmotion": {
+        "prefix": "rfce",
+        "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t<div css={css``}>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "Creates a React functional component with emotion"
+    },
+    "reactStatelessProps": {
+        "prefix": "rfcp",
+        "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}",
+        "description": "Creates a React function component with PropTypes"
+    },
+    "classConstructor": {
+        "prefix": "con",
+        "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props as arguments"
+    },
+    "classConstructorContext": {
+        "prefix": "conc",
+        "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+        "description": "Adds a default constructor for the class that contains props and context as arguments"
+    },
+    "componentWillMount": {
+        "prefix": "cwm",
+        "body": "\ncomponentWillMount () {\n\t$0\n}\n",
+        "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
+    },
+    "componentDidMount": {
+        "prefix": "cdm",
+        "body": "componentDidMount () {\n\t$0\n}\n",
+        "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+    },
+    "componentWillReceiveProps": {
+        "prefix": "cwr",
+        "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
+        "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
+    },
+    "componentGetDerivedStateFromProps": {
+        "prefix": "cgd",
+        "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+    },
+    "shouldComponentUpdate": {
+        "prefix": "scu",
+        "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked before rendering when new props or state are being received. "
+    },
+    "componentWillUpdate": {
+        "prefix": "cwup",
+        "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
+        "description": "Invoked immediately before rendering when new props or state are being received."
+    },
+    "componentDidUpdate": {
+        "prefix": "cdup",
+        "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+        "description": "Invoked immediately after the component's updates are flushed to the DOM."
+    },
+    "componentWillUnmount": {
+        "prefix": "cwun",
+        "body": "componentWillUnmount () {\n\t$0\n}\n",
+        "description": "Invoked immediately before a component is unmounted from the DOM."
+    },
+    "componentRender": {
+        "prefix": "ren",
+        "body": "render () {\n\treturn (\n\t\t<div>\n\t\t\t$0\n\t\t</div>\n\t)\n}",
+        "description": "When called, it should examine this.props and this.state and return a single child element."
+    },
+    "componentSetStateObject": {
+        "prefix": "sst",
+        "body": "this.setState($0)",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentSetStateFunc": {
+        "prefix": "ssf",
+        "body": "this.setState((state, props) => { return { $0 }})\n",
+        "description": "Performs a shallow merge of nextState into current state"
+    },
+    "componentProps": {
+        "prefix": "tp",
+        "body": "this.props.$0",
+        "description": "Access component's props"
+    },
+    "componentState": {
+        "prefix": "ts",
+        "body": "this.state.$0",
+        "description": "Access component's state"
+    },
+    "propTypes": {
+        "prefix": "rpt",
+        "body": "$1.propTypes = {\n\t$2\n}",
+        "description": "Creates empty propTypes declaration"
+    },
+    "propTypeArray": {
+        "prefix": "pta",
+        "body": "PropTypes.array,",
+        "description": "Array prop type"
+    },
+    "propTypeArrayRequired": {
+        "prefix": "ptar",
+        "body": "PropTypes.array.isRequired,",
+        "description": "Array prop type required"
+    },
+    "propTypeBool": {
+        "prefix": "ptb",
+        "body": "PropTypes.bool,",
+        "description": "Bool prop type"
+    },
+    "propTypeBoolRequired": {
+        "prefix": "ptbr",
+        "body": "PropTypes.bool.isRequired,",
+        "description": "Bool prop type required"
+    },
+    "propTypeFunc": {
+        "prefix": "ptf",
+        "body": "PropTypes.func,",
+        "description": "Func prop type"
+    },
+    "propTypeFuncRequired": {
+        "prefix": "ptfr",
+        "body": "PropTypes.func.isRequired,",
+        "description": "Func prop type required"
+    },
+    "propTypeNumber": {
+        "prefix": "ptn",
+        "body": "PropTypes.number,",
+        "description": "Number prop type"
+    },
+    "propTypeNumberRequired": {
+        "prefix": "ptnr",
+        "body": "PropTypes.number.isRequired,",
+        "description": "Number prop type required"
+    },
+    "propTypeObject": {
+        "prefix": "pto",
+        "body": "PropTypes.object,",
+        "description": "Object prop type"
+    },
+    "propTypeObjectRequired": {
+        "prefix": "ptor",
+        "body": "PropTypes.object.isRequired,",
+        "description": "Object prop type required"
+    },
+    "propTypeString": {
+        "prefix": "pts",
+        "body": "PropTypes.string,",
+        "description": "String prop type"
+    },
+    "propTypeStringRequired": {
+        "prefix": "ptsr",
+        "body": "PropTypes.string.isRequired,",
+        "description": "String prop type required"
+    },
+    "propTypeNode": {
+        "prefix": "ptnd",
+        "body": "PropTypes.node,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array"
+    },
+    "propTypeNodeRequired": {
+        "prefix": "ptndr",
+        "body": "PropTypes.node.isRequired,",
+        "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+    },
+    "propTypeElement": {
+        "prefix": "ptel",
+        "body": "PropTypes.element,",
+        "description": "React element prop type"
+    },
+    "propTypeElementRequired": {
+        "prefix": "ptelr",
+        "body": "PropTypes.element.isRequired,",
+        "description": "React element prop type required"
+    },
+    "propTypeInstanceOf": {
+        "prefix": "pti",
+        "body": "PropTypes.instanceOf($0),",
+        "description": "Is an instance of a class prop type"
+    },
+    "propTypeInstanceOfRequired": {
+        "prefix": "ptir",
+        "body": "PropTypes.instanceOf($0).isRequired,",
+        "description": "Is an instance of a class prop type required"
+    },
+    "propTypeEnum": {
+        "prefix": "pte",
+        "body": "PropTypes.oneOf(['$0']),",
+        "description": "Prop type limited to specific values by treating it as an enum"
+    },
+    "propTypeEnumRequired": {
+        "prefix": "pter",
+        "body": "PropTypes.oneOf(['$0']).isRequired,",
+        "description": "Prop type limited to specific values by treating it as an enum required"
+    },
+    "propTypeOneOfType": {
+        "prefix": "ptet",
+        "body": "PropTypes.oneOfType([\n\t$0\n]),",
+        "description": "An object that could be one of many types"
+    },
+    "propTypeOneOfTypeRequired": {
+        "prefix": "ptetr",
+        "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
+        "description": "An object that could be one of many types required"
+    },
+    "propTypeArrayOf": {
+        "prefix": "ptao",
+        "body": "PropTypes.arrayOf($0),",
+        "description": "An array of a certain type"
+    },
+    "propTypeArrayOfRequired": {
+        "prefix": "ptaor",
+        "body": "PropTypes.arrayOf($0).isRequired,",
+        "description": "An array of a certain type required"
+    },
+    "propTypeObjectOf": {
+        "prefix": "ptoo",
+        "body": "PropTypes.objectOf($0),",
+        "description": "An object with property values of a certain type"
+    },
+    "propTypeObjectOfRequired": {
+        "prefix": "ptoor",
+        "body": "PropTypes.objectOf($0).isRequired,",
+        "description": "An object with property values of a certain type required"
+    },
+    "propTypeShape": {
+        "prefix": "ptsh",
+        "body": "PropTypes.shape({\n\t$0\n}),",
+        "description": "An object taking on a particular shape"
+    },
+    "propTypeShapeRequired": {
+        "prefix": "ptshr",
+        "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
+        "description": "An object taking on a particular shape required"
+    },
+    "jsx element": {
+        "prefix": "j",
+        "body": "<${1:elementName}>\n\t$0\n</${1}>",
+        "description": "an element"
+    },
+    "jsx element self closed": {
+        "prefix": "jc",
+        "body": "<${1:elementName} />",
+        "description": "an element self closed"
+    },
+    "jsx elements map": {
+        "prefix": "jm",
+        "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n</${2}>)}",
+        "description": "an element self closed"
+    },
+    "jsx elements map with return": {
+        "prefix": "jmr",
+        "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n</${2}>\n})}",
+        "description": "an element self closed"
+    },
+    "jsx element wrap selection": {
+        "prefix": "jsx wrap selection with element",
+        "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n</${1}>",
+        "description": "an element"
+    },
+    "useState": {
+        "prefix": "us",
+        "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+        "description": "React useState() hook"
+    },
+    "useEffect": {
+        "prefix": "ue",
+        "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+        "description": "React useEffect() hook"
+    },
+    "useEffect with return": {
+        "prefix": "uer",
+        "body": [
+            "useEffect(() => {",
+            "\t$1",
+            "\n\treturn () => {",
+            "\t\t$2",
+            "\t}",
+            "}, [${3:dependencies}])$0"
+        ],
+        "description": "React useEffect() hook with return statement"
+    },
+    "useContext": {
+        "prefix": "uc",
+        "body": ["const $1 = useContext($2)$0"],
+        "description": "React useContext() hook"
+    },
+    "useRef": {
+        "prefix": "ur",
+        "body": ["const ${1:elName}El = useRef(null)$0"],
+        "description": "React useContext() hook"
+    },
+    "useCallback": {
+        "prefix": "ucb",
+        "body": [
+            "const ${1:memoizedCallback} = useCallback(",
+            "\t() => {",
+            "\t\t${2:doSomething}(${3:a}, ${4:b})",
+            "\t},",
+            "\t[${5:a}, ${6:b}],",
+            ")$0"
+        ],
+        "description": "React useCallback() hook"
+    },
+    "useMemo": {
+        "prefix": "ume",
+        "body": [
+            "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+        ],
+        "description": "React useMemo() hook"
+    },
+    "describeBlock": {
+        "prefix": "desc",
+        "body": ["describe('$1', () => {", "  $0", "})", ""],
+        "description": "Testing `describe` block"
+    },
+    "testBlock": {
+        "prefix": "test",
+        "body": ["test('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `test` block"
+    },
+    "itBlock": {
+        "prefix": "tit",
+        "body": ["it('should $1', () => {", "  $0", "})", ""],
+        "description": "Testing `it` block"
+    },
+    "itAsyncBlock": {
+        "prefix": "tita",
+        "body": ["it('should $1', async () => {", "  $0", "})", ""],
+        "description": "Testing async `it` block"
+    }
 }
diff --git a/snippets/javascript/typescript.json b/snippets/javascript/typescript.json
index 29b447a8..04fbe16b 100644
--- a/snippets/javascript/typescript.json
+++ b/snippets/javascript/typescript.json
@@ -168,6 +168,30 @@
         "body": ["if (${1:condition}) {", "\t$2", "} else {", "\t$0", "}"],
         "description": "If-Else Statement"
     },
+    "module export": {
+        "prefix": "e",
+        "body": "export ${1:member}"
+    },
+    "module export const": {
+        "prefix": "ec",
+        "body": "export const ${1:member}: ${2:Type} = ${3:value}"
+    },
+    "export named function": {
+        "prefix": "ef",
+        "body": "export function ${1:member}(${2:arguments}): ${3:ReturnType} {\n\t${0}\n}"
+    },
+    "module default export": {
+        "prefix": "ed",
+        "body": "export default ${1:member}"
+    },
+    "module default export function": {
+        "prefix": "edf",
+        "body": "export default function ${1:name}(${2:arguments}): ${3:ReturnType} {\n\t${0}\n}"
+    },
+    "module default export async function": {
+        "prefix": "edaf",
+        "body": "export default async function ${1:name}(${2:arguments}): Promise<${3:ReturnType}> {\n\t${0}\n}"
+    },
     "New Statement": {
         "prefix": "new",
         "body": ["const ${1:name} = new ${2:type}(${3:arguments});$0"],