I used snippet generator alot to create snippets for my visual code these are my backups..
I have added three:
Scroll down for each
{
// 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",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// https://snippet-generator.app/
"Template for New Component": {
"prefix": "vueTemplate",
"body": [
"<template>",
" <h1>$2PageButton</h1>",
"</template>",
"",
"<script>",
"export default {",
" name: 'PageButton',",
" props:",
" {",
"",
" }",
"}",
"</script>",
"",
"<style>",
"",
"</style>"
],
"description": "Template for New Component"
},
"php start": {
"prefix": "<php",
"body": [
"<?php",
"$1",
"",
"?>"
],
"description": "php start"
},
"jquery simple": {
"prefix": "$(",
"body": [
"$($1).$2($3);"
],
"description": "jquery simple"
},"jquery function": {
"prefix": "$(",
"body": [
"$($1).$2($3,function(){",
" ",
"}););"
],
"description": "jquery function"
},
"alert": {
"prefix": "alert",
"body": [
"alert('$1');"
],
"description": "alert"
},
"Myconsole": {
"prefix": "con",
"body": [
"console.log(`LINE $1 $2=`, $2);"
],
"description": "Log output to console"
},
"select with options": {
"prefix": "select",
"body": [
"<select name=\"$1\" id=\"$1\">",
" <option value=\"$2\">$2</option>",
" <option value=\"$3\">$3</option>",
" <option value=\"$4\">$4</option>",
" <option value=\"$5\">$5</option>",
" <option value=\"$6\">$6</option>",
"</select>"
],
"description": "select with options"
},
"table with th and tr": {
"prefix": "table",
"body": [
" <table class=\"table table-bordered\">",
" <thead>",
" <tr>",
" <th>Header</th>",
" </tr>",
" </thead>",
" <tbody>",
" <tr>",
" <td>Content</td>",
" </tr>",
" </tbody>",
" </table>"
],
"description": "table with th and tr"
},
"dbx to mysqli": {
"prefix": "dbx",
"body": [
"$$Debug=1;",
"if ($$_SERVER['HTTP_HOST'] == 'localhost' || strstr($$_SERVER['HTTP_HOST'], '192.168.1.')) $$localhost = 1;",
"if ($$localhost) {",
" //echo \"localhost\";",
" $$Cfg['SiteHostname'] = 'localhost';",
" $$Cfg['SiteHostUser'] = 'root';",
" $$Cfg['SiteHostPass'] = 'ooo000';",
" $$Cfg['SiteHostDb'] = 'embed_call';",
" ini_set('register_globals', 0);",
" ini_set('display_errors', 'On');",
"} else {",
" $$Cfg['SiteHostname'] = 'localhost';",
" $$Cfg['SiteHostUser'] = '******';",
" $$Cfg['SiteHostPass'] = '*******';",
" $$Cfg['SiteHostDb'] = '******';",
" ini_set('register_globals', 0);",
" //ini_set('display_errors', 1); // IS DEFINED IN index.php",
"}",
"if (!$$mysqli = new mysqli($$Cfg['SiteHostname'], $$Cfg['SiteHostUser'], $$Cfg['SiteHostPass'], $$Cfg['SiteHostDb'])) {",
" if ($$Debug) {",
" echo '<brSQL ERROR <br>' . __FILE__ . ' ---- LINE: ' . __LINE__ . '<br><span style=\"color:red\">ERROR= ' . mysqli_connect_error() . '</span><hr><pre>';",
" print_r($$Cfg);",
" echo '</pre>';",
" exit;",
" } else {",
" die('Fatal Error #6 LINE:' . __LINE__);",
" }",
"}",
"",
"$$sql=\"SELECT * FROM scripts \";",
"if ($$result = $$mysqli->query($$sql)) {",
" while($$obj = $$result->fetch_object()){",
" echo '<PRE>LINE '.__LINE__.' - ';print_r($$obj);echo '</pre>';",
" }",
"}"
],
"description": "dbx to mysqli"
},
"usestate": {
"prefix": "use",
"body": [
"const [${1:VarName}, set$1] = useState();"
],
"description": "usestate"
},
"MY useEffect function": {
"prefix": "useEffect",
"body": [
" useEffect(() => {",
" console.log(`LINE 676 =`);",
" playAudio(words[ActiveWordId].word);",
"",
" return;",
" },[ActiveWordId]) "
],
"description": "edwin - useEffect"
},
//https://stackoverflow.com/a/70792749
"React New Component": {
"prefix": "edwrc",
"body": [
"import React from 'react';",
"function ${1:$TM_FILENAME_BASE}() {",
"",
" return (",
" <div>",
" <h1>${1:$TM_FILENAME_BASE} Component</h1>",
" </div>",
" )",
"}",
"",
"export default ${1:$TM_FILENAME_BASE}"
],
"description": "Edwin - React New Component"
},
"React Map": {
"prefix": "map",
"body": [
" {${1:array}.map((${2:value}, ${3:index}) => {",
" return (",
" <div key={${3:example}}>",
" </div>",
" )",
" })}"
],
"description": "React Map"
},
"JSX Pre JSON": {
"prefix": "pre",
"body": [
"<pre>{JSON.stringify(checked, null, 2)}</pre>"
],
"description": "<PRE> JSON jsx"
},
"Const Function": {
"prefix": "const",
"body": [
"const ${1} = (${2}) =>{",
" ${3}",
"}"
],
"description": "Const Function"
},
"Sharepoint Object Loop": {
"prefix": "for",
"body": [
"for (let [property, value] of Object.entries(${1})){",
"${2}",
"}"
],
"description": "Sharepoint Object Loop"
}
}
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"javascript class": {
"prefix": "class",
"body": [
"class Name{",
" constructor(parameter){",
" this.parameter = parameter;",
"",
" }",
" method(){",
"",
" }",
" ",
" // GETTER ",
" /*",
" get varname (){",
"",
" }",
" */",
" // SETTER ",
" /*",
" set varname (){",
"",
" }",
" */ ",
"}"
],
"description": "javascript class"
},
"react map loop": {
"prefix": "map",
"body": [
" {${1:Array}.map((object, index) => {",
" return (",
" <><div key={index}>{object.value}</div></>",
" )",
" })}"
],
"description": "react map loop"
}
}
{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"JSON in HTML": {
"prefix": "json",
"body": [
"{JSON.stringify(${1:Object}, null, 2)}"
],
"description": "REACT: JSON in HTML"
}
}
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"My component IONIC starter": {
"prefix": "component",
"body": [
"const ${1:ComponentName}: React.FC = () => {",
"",
" return (",
" <>${1:ComponentName}</>",
" );",
"",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "my ionic component starter"
},
"IONIC Basic Component": {
"prefix": "edwIoniCComponent",
"body": [
"import React, { useCallback, useState, useEffect, useRef } from \"react\";",
"",
"import {",
" IonContent,",
" IonHeader,",
" IonPage,",
" IonTitle,",
" IonToolbar,",
" IonIcon,",
" IonGrid,",
" IonRow,",
" IonCardHeader,",
" IonCard,",
" IonCardContent,",
" IonCardSubtitle,",
" IonCardTitle,",
" IonButton,",
" IonItem,",
" IonLabel,",
" IonList,",
" IonItemSliding,",
" IonItemOption,",
" IonItemOptions,",
" IonSearchbar,",
" IonInput,",
" IonAlert,",
" IonButtons,",
" IonModal,",
" IonText,",
" IonNavLink,",
" IonNav,",
"} from \"@ionic/react\";",
"import {",
" chevronBack,",
" cloud,",
" cloudCircle,",
" cloudCircleOutline,",
" cloudDownload,",
" cloudDownloadOutline,",
" cloudOutline,",
" cloudUploadOutline,",
" gitCompare,",
" image,",
" imageOutline,",
" informationCircle,",
" star,",
" documentTextOutline,",
" trashOutline,",
" closeCircleOutline,",
"} from \"ionicons/icons\";",
"",
"const ${1:$TM_FILENAME_BASE}: React.FC = () => {",
" return (",
" <IonPage className=\"uploadTabMainWrapers\">",
" <IonHeader>",
" <IonToolbar color=\"primary\">",
" <IonTitle>${1:$TM_FILENAME_BASE} IONIC Component</IonTitle>",
" </IonToolbar>",
" </IonHeader>",
"",
" <IonContent fullscreen></IonContent>",
" </IonPage>",
" );",
"};",
"",
"export default ${1:$TM_FILENAME_BASE};"
],
"description": "IONIC Basic Component"
},
"ts Function": {
"prefix": "edw_ts_func_PROPS",
"body": [
"const ${1:$TM_FILENAME_BASE}(): React.FC<ContainerProps> = ({ name }) => {",
" return (",
" <div>",
" <h1>${1:$TM_FILENAME_BASE} Component</h1>",
" </div>",
" );",
"};",
"",
"export default ${1:$TM_FILENAME_BASE}();"
],
"description": "ts Function w/PROPS"
},
"TS Function SIMPLE": {
"prefix": "edw_ts_func__SIMPLE",
"body": [
"const ${1:$TM_FILENAME_BASE}: React.FC = () => {",
" return (",
" <div>",
" <h1>${1:$TM_FILENAME_BASE} Component</h1>",
" </div>",
" );",
"};",
"",
"export default ${1:$TM_FILENAME_BASE};"
],
"description": "TS Function SIMPLE"
},
"Ionic Typescript New Component": {
"prefix": "edwionic_new_component",
"body": [
"import{",
" IonPage,",
" IonHeader,",
" IonToolbar,",
" IonTitle,",
" IonContent",
"} from '@ionic/react'",
"",
"const ${1:$TM_FILENAME_BASE}: React.FC = () => {",
" return (",
" <IonPage>",
" <IonHeader>",
" <IonToolbar>",
" <IonTitle>",
" ${1:$TM_FILENAME_BASE} Title",
" </IonTitle>",
" </IonToolbar>",
" </IonHeader>",
" <IonContent className=\"ion-padding\">",
" ${1:$TM_FILENAME_BASE} Content",
" </IonContent>",
" </IonPage>",
" );",
"};",
"",
"export default ${1:$TM_FILENAME_BASE};"
],
"description": "Ionic Typescript New Component"
}
}