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"
}
}