lukas-tr / vscode-materialdesignicons-intellisense

Provides intellisense, search and hover preview for Material Design Icons
https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense
MIT License
35 stars 7 forks source link

use the insert value between prefixes #25

Open MrWeezle opened 2 years ago

MrWeezle commented 2 years ago

I have a small problem while creating an own matcher for usage with angular material.

The following matcher works almost perfectly, but the mat-icon element can't use the mdi-prefix for the icon and needs it without it.

{
    "match": "\\bmdi-{param}\\b",
    "insert": "{param}",
    "displayName": "kebab-case (web font)",
    "name": "kebabCase",
    "insertPrefix": "<mat-icon svgIcon=\"", 
    "insertSuffix": "\"></mat-icon>"
}

What my perferred way of working would be is to use the value from "insert" between the prefix and the suffix.

That way I can use a shortcut like "mdi-alarm" with intellisense to insert

Could there be a way to add such an option? That would really make it easy creating custom shortcuts.

lukas-tr commented 2 years ago

That's currently not possible. I'll probably take a look at supporting it when I have more time, but this is the best I could come up with without modifying this extension:

Create a new global snippets file:

{
    "material icon prefix": {
        "prefix": "mat",
        "body": "<mat-icon svgIcon=\"$0"
    }
}

settings:

  "materialdesigniconsIntellisense.insertStyle": "angular-material",
  "materialdesigniconsIntellisense.matchers": [
    {
      "match": "<mat-icon svgIcon=\"{param}\\b",
      "insert": "<mat-icon svgIcon=\"{param}\"></mat-icon>",
      "displayName": "angular material",
      "name": "angular-material",
      "insertPrefix": "",
      "insertSuffix": "\"></mat-icon>"
    }
  ],

You then insert icons by typing mat<tab><icon name>

And the insert value is for inserting from the list in the sidebar.