Base component snippets

[rickyruiz]

It would be nice to have base component snippets.

As of now vscode-project-snippet extension does not work with vue-html.json snippets.

I do not know if there's any interest in something like this, here is what I got in my current user snippets:

{
  "base button component": {
    "prefix": "basebutton",
    "body": [
      "<BaseButton",
      "\t@click=\"${1:handleClick}\"",
      ">",
      "\t${2:slot}",
      "</BaseButton>"
    ],
    "description": "Base button vue component"
  },
  "base icon component": {
    "prefix": "baseicon",
    "body": ["<BaseIcon", "\tname=\"${1|sync,user|}\"", "/>"],
    "description": "Base icon vue component"
  },
  "base input component": {
    "prefix": "baseinput",
    "body": [
      "<BaseInput",
      "\t${1|v-model,v-model.number,v-model.lazy,v-model.trim|}=\"${2:data}\"",
      "\ttype=\"${3|text,number,password,checkbox,radio,file,email,hidden,range,color,date,datetime,datetime-local,month,reset,search,submit,tel,url,week|}\"",
      "/>"
    ],
    "description": "Base input vue component"
  },
  "base link component": {
    "prefix": "baselink",
    "body": [
      "<BaseLink",
      "\t${1|name,:to,href|}=\"${2:route}\"",
      ">",
      "\t${3:slot}",
      "</BaseLink>"
    ],
    "description": "Base link vue component"
  }
}

[chrisvfritz]

@rickyruiz This is definitely something that's planned! Due to the problem you mentioned with vscode-project-snippet (which I have an open issue for), it's currently blocked. But once it's fixed, I plan on adding many more snippets and I thank you very much for sharing your own. 🙂

[rickyruiz]

Hey @chrisvfritz , project level snippets are now supported in VSCode without an extension! I could only make Vue-html work using a global snippet; generate a *.code-snippets file and use "scope": "vue-html".

ie.

.vscode
--> snippets
----> vue-html.code-snippets

  "base link component": {
    "prefix": "baselink",
    "scope": "vue-html",
    "body": [
      "<BaseLink",
      "\t${1|name,:to,href|}=\"${2:route}\"",
      ">",
      "\t${3:slot}",
      "</BaseLink>"
    ],
    "description": "Base link vue component"
  }

[chrisvfritz]

Excellent! I just updated to use these. 🙂