質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,446

makoto-n

score 384

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


キャプチャ
img

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/04 19:57

    なんででしょうね。「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

    キャンセル

  • 2019/03/06 08:35

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

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

    キャンセル

  • 2019/03/07 03:45

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る