VScodeのemmetスニペット編集方法

Sublime TextからVScodeに変更しようとしているのですが、
emmetの拡張方法が異なり拡張できていません。
Sublime Textでは下記のように拡張しているのですが、VScodeではどのように変更するのでしょうか？

{
  "snippets": {
    "variables": {
      "lang": "ja",
      "locale": "ja-JP",
      "charset": "UTF-8",
      "indentation": "\t",
      "newline": "\n"
    },
    "html": {
      "profile": "html",
      "snippets": {
        "loremp": "<p>Lorem ipsum dolor sit amet,</p>\n<p>consectetur adipisicing elit,</p>\n<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n<p>Ut enim ad minim veniam,</p>\n<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>\n<p>Excepteur sint occaecat cupidatat non proident,</p>\n<p>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "placehold": "https:\/\/placehold.jp\/ff0000\/ffffff\/150x50.jpg?text=sample横x縦",
      }
    },
    "css": {
      "profile": "css",
      "snippets": {
        "css": "@charset \"UTF-8\";\n\n@import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css);\n@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n\n* {\n\t-webkit-box-sizing: border-box; /* for webkit */\n\t-moz-box-sizing: border-box; /* mozilla */\n\t-o-box-sizing: border-box; /* opera */\n\tbox-sizing: border-box; /* generic */\n}\n*:after,\n*:before,\n*:focus {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\t-o-box-sizing: border-box;\n\tbox-sizing: border-box;\n}\nbody,\nheader,\nfooter,\nmain,\nnav,\nsection,\narticle,\nfigure,\naside {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tword-break: break-all;\n}\n",
        "rwd": "\t/* rwd__スマートフォン (landscape) */\n@media only screen and (orientation : landscape) {}\n\t/* rwd__スマートフォン (portrait) */\n@media only screen and (orientation : portrait) {}\n\t/* rwd__iPhone 4 */\n@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {}\n\n\t/* rwd__iPad (portrait and landscape) */\n@media only screen and (min-device-width : 768px) {}\n\t/* rwd__iPad (landscape) */\n@media only screen and (min-device-width : 768px) and (orientation : landscape) {}\n\t/* rwd__iPad (portrait) */\n@media only screen and (min-device-width : 768px) and (orientation : portrait) {}\n\n\t/* rwd__デスクトップ */\n@media only screen and (min-width : 1281px) {}\n",
      }
    },
    "xml": {
      "profile": "xml",
      "snippets": {
        "browser": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n\t<msapplication>\n\t\t<tile>\n\t\t\t<square70x70logo src=\"/images/small.png?v2\" />\n\t\t\t<square150x150logo src=\"/images/medium.png?v2\" />\n\t\t\t<wide310x150logo src=\"/images/wide.png?v2\" />\n\t\t\t<square310x310logo src=\"/images/large.png?v2\" />\n\t\t\t<TileColor>#e1fffe</TileColor>\n\t\t</tile>\n\t</msapplication>\n</browserconfig>",
      }
    },
    "javascript": {
      "profile": "JSON",
      "snippets": {
        "manifest": "{\n\t\"manifest_version\": 2,\n\t\"name\": \"\",\n\t\"version\": \"1.**\",\n\t\"icons\": [\n\t\t{\n\t\t\t\"src\": \"\\\\\/images\\\\\/favicon-144x144.png?v2\",\n\t\t\t\"sizes\": \"144x144\",\n\t\t\t\"type\": \"image\\\\\/png\"\n\t\t},\n\t\t{\n\t\t\t\"src\": \"\\\\\/images\\\\\/favicon-152x152.png?v2\",\n\t\t\t\"sizes\": \"152x152\",\n\t\t\t\"type\": \"image\\\\\/png\"\n\t\t},\n\t\t{\n\t\t\t\"src\": \"\\\\\/images\\\\\/favicon-256x256.png?v2\",\n\t\t\t\"sizes\": \"256x256\",\n\t\t\t\"type\": \"image\\\\\/png\"\n\t\t}\n\t],\n\t\"theme_color\": \"#00f\",\n\t\"display\": \"browser\"\n}\n",
      }
    }

  }
}

それとVScodeでのクラス名補完ができていません。
クラス名ID名補完のプラグインなどはありませんか？

キャプチャ