vscode-materialdesignicons-intellisense icon indicating copy to clipboard operation
vscode-materialdesignicons-intellisense copied to clipboard

use the insert value between prefixes

Open MrWeezle opened this issue 3 years ago • 1 comments

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 <mat-icon svgIcon="alarm">

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

MrWeezle avatar Jan 12 '22 15:01 MrWeezle

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.

lukas-tr avatar Jan 16 '22 10:01 lukas-tr