react.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript,typescriptreact,javascriptreact",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "method": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "met",
    "body": [
      "${1} = (${2}) => {",
      "\t${0}",
      "};",
      ""
    ],
    "description": "Creates a method inside a class in ES7 syntax"
  },
  "map": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "map",
    "body": [
      "${1}.map((${2}) => ${3})",
    ],
    "description": "Creates a forEach statement in ES7 syntax"
  },
  "anonymousFunction": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "arfl",
    "body": [
      "(${1}) => {",
      "\t${2}",
      "}",
      ""
    ],
    "description": "Creates an anonymous function in ES7 syntax"
  },
  "arrowFunction": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "arf",
    "body": [
      "(${1}) => ${2}"
    ],
    "description": "Creates an anonymous function in ES7 syntax"
  },
  "namedFunction": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "fn",
    "body": [
      "const ${1} = (${2}) => {",
      "\t${3}",
      "}",
      ""
    ],
    "description": "Creates a named function in ES7 syntax"
  },
  "destructingObject": {
    "prefix": "dob",
    "body": "const {${1}} = ${2}",
    "description": "Creates and assigns a local variable using object destructing"
  },
  "destructingArray": {
    "prefix": "dar",
    "body": "const [${1}] = ${2}",
    "description": "Creates and assigns a local variable using array destructing"
  },
  "setInterval": {
    "prefix": "sti",
    "body": [
      "setInterval(() => {",
      "\t${2}",
      "}, ${0});",
      ""
    ],
    "description": "Executes the given function at specified intervals in ES7 syntax"
  },
  "setTimeOut": {
    "prefix": "sto",
    "body": [
      "setTimeout(() => {",
      "\t${2}",
      "}, ${1});",
      ""
    ],
    "description": "Executes the given function after the specified delay in ES7 syntax"
  },
  "promise": {
    "prefix": "prom",
    "body": [
      "return new Promise((resolve, reject) => {",
      "\t${1}",
      "});",
      ""
    ],
    "description": "Creates and returns a new Promise in the standard ES7 syntax"
  },
  "consoleAssert": {
    "prefix": "cas",
    "body": "console.assert(${1}, ${2});",
    "description": "If the specified expression is false, the message is written to the console along with a stack trace"
  },
  "consoleLog": {
    "prefix": "clg",
    "body": "console.log(${1});",
    "description": "Displays a message in the console"
  },
  "consoleTrace": {
    "prefix": "ctr",
    "body": "console.trace(${1});",
    "description": "Prints a stack trace from the point where the method was called"
  },
  "consoleLogObject": {
    "prefix": "clo",
    "body": "console.log('${1}', ${1});",
    "description": "Logs property with name."
  },
  "consoleTime": {
    "prefix": "ctm",
    "body": "console.time('${1}');",
    "description": "Console time wrapper"
  },
  "consoleTimeEnd": {
    "prefix": "cte",
    "body": "console.timeEnd('${1}');",
    "description": "Console time end wrapper"
  },
  "consoleWarn": {
    "prefix": "cwa",
    "body": "console.warn(${1});",
    "description": "Displays a message in the console but also displays a yellow warning icon along with the logged message"
  },
  "consoleInfo": {
    "prefix": "cin",
    "body": "console.info(${1});",
    "description": "Displays a message in the console but also displays a blue information icon along with the logged message"
  },
  "reactArrowFunctionExportComponentTS": {
    "scope": "typescript,typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "export interface ${TM_FILENAME_BASE}Props {",
      "\t${2}",
      "}",
      "",
      "export const ${TM_FILENAME_BASE} = ({${3}}: ${TM_FILENAME_BASE}) => {",
      "\treturn (",
      "\t\t<>",
      "\t\t\t$0",
      "\t\t</>",
      "\t);",
      "}",
      ""
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system"
  },
  "importExportdefault": {
    "prefix": "impexp",
    "body": [
      "import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './${TM_DIRECTORY/^.+\\/(.*)$/$1/}';",
      "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/};",
      ""
    ],
    "description": "Imports and exports"
  },
}