Steve Kinney

Visual Studio Code Snippet Exercise Solutions

Below are some possible solutions to these exercises around create snippets in Visual Studio Code.

Basic Function

{
  "Basic Function": {
    "prefix": "func",
    "body": ["function ${1:functionName}(${2:parameters}): ${3:returnType} {", "\t${4}", "}"],
    "description": "Basic function declaration"
  }
}

Arrow Function

{
  "Arrow Function": {
    "prefix": "arrfunc",
    "body": ["const ${1:variableName} = (${2:parameters}): ${3:returnType} => {", "\t${4}", "};"],
    "description": "Basic arrow function declaration"
  }
}

Async Function

{
  "Async Function": {
    "prefix": "asyncfunc",
    "body": [
      "async function ${1:functionName}(${2:parameters}): Promise<${3:returnType}> {",
      "\t${4}",
      "}"
    ],
    "description": "Asynchronous function declaration"
  }
}

Basic Class

{
  "Basic Class": {
    "prefix": "class",
    "body": ["class ${1:ClassName} {", "\tconstructor(${2:parameters}) {", "\t\t${3}", "\t}", "}"],
    "description": "Basic class declaration"
  }
}

Class Method

{
  "Class Method": {
    "prefix": "classmethod",
    "body": ["public ${1:methodName}(${2:parameters}): ${3:returnType} {", "\t${4}", "}"],
    "description": "Public method within a class"
  }
}

Private Property

{
  "Private Property": {
    "prefix": "privateprop",
    "body": ["private ${1:propertyName}: ${2:propertyType};"],
    "description": "Private property declaration in a class"
  }
}

Basic Import

{
  "Basic Import": {
    "prefix": "import",
    "body": ["import { ${1:module} } from '${2:path}';"],
    "description": "Basic import statement"
  }
}

Import All

{
  "Import All": {
    "prefix": "importall",
    "body": ["import * as ${1:alias} from '${2:path}';"],
    "description": "Import all modules with an alias"
  }
}

Type Alias

{
  "Type Alias": {
    "prefix": "typealias",
    "body": ["type ${1:TypeName} = ${2:Type};"],
    "description": "Type alias declaration"
  }
}

Promise

{
  "Promise": {
    "prefix": "promise",
    "body": ["new Promise<${1:Type}>((resolve, reject) => {", "\t${2}", "});"],
    "description": "Basic Promise structure"
  }
}

Basic Workspace Request

{
  "Basic fetch Request": {
    "prefix": "ffetch",
    "body": [
      "try {",
      "\tconst response = await fetch('${1:url}', {",
      "\t\tmethod: '${2|POST,PUT,PATCH,DELETE,GET|}',",
      "\t\tbody: ${3:JSON.stringify(data)}",
      "\t});",
      "\tconst data = await response.json();",
      "\tconsole.log(data);",
      "} catch (error) {",
      "\tconsole.error('Error fetching data:', error);",
      "}"
    ],
    "description": "Basic fetch request with error handling"
  }
}

Import Default Export

{
  "Import Default Export": {
    "prefix": "importdef",
    "body": ["import ${1:defaultExport} from '${2:modulePath}';"],
    "description": "Import default export"
  }
}

Basic Express Route

{
  "Basic Express Route": {
    "prefix": "expressroute",
    "body": [
      "app.${1|get,post,put,patch,delete|}('${2:path}', (req: Request, res: Response, next: NextFunction) => {",
      "\t${3}",
      "\tres.send('${4:Hello World!}');",
      "});"
    ],
    "description": "Basic Express route handler"
  }
}

Basic React Component

{
  "Basic React Component": {
    "prefix": "rc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:Props} {}",
      "",
      "const ${2:ComponentName}: React.FC<${1:Props}> = ({}) => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t${3}",
      "\t\t</div>",
      "\t);",
      "};",
      "",
      "export default ${2:ComponentName};"
    ],
    "description": "Basic functional React component"
  }
}

File Header Snippet

{
  "File Header Snippet": {
    "prefix": "fileheader",
    "body": [
      "/**",
      " * File: $TM_FILENAME",
      " * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " */"
    ],
    "description": "Standard file header comment"
  }
}

Transform to Uppercase

{
  "Transform to Uppercase": {
    "prefix": "toupper",
    "body": [
      "const originalWord = "${1:word}";",
      "const upperCaseWord = "${1/(.*)/${1:/upcase}/}";"
    ],
    "description": "Transform placeholder text to uppercase"
  }
}

Surround with try…catch

{
  "Surround with try/catch": {
    "prefix": "trycatch",
    "body": ["try {", "\t$TM_SELECTED_TEXT", "} catch (error) {", "\tconsole.error(error);", "}"],
    "description": "Wrap selected code with try/catch"
  }
}

Last modified on .