my snippets vscode

snippets.js

/**react js storybook snippet*/
{
  // 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"
  // }
  "Storybook template": {
    "prefix": "sbrfc",
    "body": [
      "import { action } from '@storybook/addon-actions'; \n",
      "import React from 'react';\nimport $TM_FILENAME_BASE $1 from '../../components/$2/$TM_FILENAME_BASE $1';\nexport default {\ntitle: '$2/$TM_FILENAME_BASE $1',\n",
      "component: $TM_FILENAME_BASE $1,parameters: {\nactions: {},\n},\nargTypes: {}};",
      "\n const Template = (args) => <$TM_FILENAME_BASE $1 {...args} />;",
      "\n $TM_FILENAME_BASE $1.defaultProps = {\n",
      "setInitialValue: action('new $TM_FILENAME_BASE $1 logged')};",
      "\nexport const $TM_FILENAME_BASE $1Default = Template.bind({});\n",
      "$TM_FILENAME_BASE $1Default.args = {initialVal:'', \nsetInitialValue: action('new $TM_FILENAME_BASE $1 logged'),};"
    ],
    "description": "Storybook template"
  }
}
/*vue snippets*/
{
	// Place your snippets for vue 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.
	"vue component": {
		"prefix": "vuec",
		"body": [
			"<template>\n<div class=\"$TM_FILENAME_BASE $1\"></div>\n</template>\n\n<style lang=\"scss\" scoped></style>\n\n<script>\n\texport default {\tname: \"$TM_FILENAME_BASE $1\",\tcomponents: {},data(){return{}},i18n:{messages:{he:{}}}};\n</script>"
		],
		"description": "generate vue component"
	},
	"vuetify component": {
		"prefix": "vuet",
		"body": [
			"<template>\n<v-container class=\"pa-6  $TM_FILENAME_BASE $1\"><v-row><v-col></v-col></v-row></v-container>\n</template>\n\n<style lang=\"scss\" scoped></style>\n\n<script>\n\texport default {\tname: \"$TM_FILENAME_BASE $1\",\tcomponents: {},data(){return{}},i18n:{messages:{he:{}}}};\n</script>"
		],
		"description": "generate vue component"
	},
	"vuetify ts component": {
		"prefix": "vuets",
		"body": [
			"<template>\n<div class=\"$TM_FILENAME_BASE $1\">\n<h1>ComponentName</h1>\n</div></template>\n<style lang=\"scss\" scoped>.$TM_FILENAME_BASE $1 {}</style>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { i18nUtil } from '../plugins/i18n/i18n';\nexport default defineComponent({name:'$TM_FILENAME_BASE$1',\nsetup(){ \n const i18nMessages ={he:{ someVal:''}};\n const t = i18nUtil(i18nMessages);\n return { t }; }\n})</script>"
		],
		"description": "generate vue component"
	},
}
/*html*/

{
    // Place your snippets for html 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"
    // }
    "comment HTML": {
        "prefix": "chtml",
        "body": ["<!-- $1 -->"],
        "description": "Comment HTML line"
    },
    "HTML boilerPlate": {
        "prefix": "!!",
        "body": [
            "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>PROJECT</title><link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\"><link rel=\"stylesheet\" href=\"/src/css/style.css\"></head><body>$1<script src=\"src/js/main.js\" type=\"module\"></script></body></html>"
        ],
        "description": "HTML cutom boilerPlate"
    },
    "VUE indexpage": {
        "prefix": "!vui",
        "body": [
            "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>PROJECT</title><link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\"><link rel=\"stylesheet\" href=\"/src/css/style.css\"><script src=\"./src/lib/moment.min.js\"></script><script src=\"./src/lib/vue.js\"></script><script src=\"./src/lib/vuex.js\"></script><script src=\"./src/lib/vue-router.js\"></script></head><body><div id=\"app\"></div><script src=\"src/js/main.js\" type=\"module\"></script></body></html>"
        ],
        "description": "a vue index.html page"
    }
}