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

Question

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名補完のプラグインなどはありませんか？

---

キャプチャ

Answer 1

時間が経ってしまったのでもう解決されているかもしれないのですが、設定画面からEmmet:Extensions Pathを検索して、そこにsnippets.jsonへのパスを記述します。自分の場合はC:\Users\〇〇〇\emmetというふうにしてました。
次に上記の場所に snippets.json を作って、以下のように書いてみたらできないでしょうか。
※ snippets.json の変更を反映させるには ウィンドウを開きなおす必要があります。

またvscodeのemmet関連はこちらに詳しく書かれています。

{
  "css": {
    "snippets": {
      ここにスニペットを記述
    }
  },
  "html": {
    "snippets": {
      ここにスニペットを記述
    }
  }
}

Comments

[makoto-n]

ありがたいです。
参考にさせてもらい設定しているのですが、
Pathが通りません。
osはOSXです。。。

[takopo]

そうなんですね。私はmacのフォルダの指定方法を詳しく知らないのですが、
上記のパスの設定で、「C:\Users\〇〇〇\emmet」のバックスラッシュ（￥の部分）を普通のスラッシュにしてみても変わりませんか？

[makoto-n]

はい。
macの絶対パスの調べ方で「ターミナル（windowsのコマンドライン）にスニペット用のjsonをドロップ」してパスを調べてみても、
パスが通りません、。
私もwindows歴の方が長いので仕様の違いに戸惑ったりしています。

[takopo]

なんででしょうね。「osx vscode emmet snippets.json」で検索してみても、なかなか情報は見当たらず…
こちら（http://mmorley.hatenablog.com/entry/2016/10/15/221750）のページの下の方に「/Applications/Visual Studio Code/Resources/app/node_modules/emmet/lib/snippets.json」というmacのパスらしきものがあったのですが、2年以上前の記事ですしこれは違いますよねぇ。
誰かmacでvscode使ってsnippets.jsonカスタマイズしてる人いたらいいんですけど…お役に立てずすみませんm(__)m

[makoto-n]

できました！
ありがとうございましたー
https://qiita.com/t_732_twit/items/6e37a6bdfe8ff3f8d76d
こちらを参考にしました。。

一応場所の確認のために、キャプチャを載せておきます

[takopo]

なるほどユーザースニペットの方だったのですね。
無事解決されて良かったです！（ほとんどお役に立ててないような気が…）