How to set up a complex vscode snippet?

Question

Visual Studio Code

Hello, if you write
div.mydivand press tab you will get But I want to add a snippet so that typing will work How to do this You can make a snippet for one word<div class="mydiv"></div>
div:mydiv<div :class="$style['mydiv']"></div>

{
  "i18n": {
    "prefix": "i18n",
    "body": [
      "<i18n>"
      "{"
        "	\"$0\": {"
        "		\"$1\": \"$2\","
        "	},"
      "}"
      "</i18n>"
    ],
    "description": "i18n"
  }
}

, but as for two