VSCodeのスニペットを登録する

こんにちは　FULL Web Designの渡邊です。

コーダーさんとのやり取りで、コーディングソフトに何を使っているか？

という話で、VS CODEを使っているという話を聞きました。

私は、根っからのAdobeっ子なので、Dreamweaver 一択で生きてきたんですが、

なんとなく、もっと効率のよいソフトあるだろうなと思っていました。

Dreamweaverはどちらかというと初心者に優しい作りで、

自分は、長年やってるので、コーディングする画面ばかり見て、

クロームでプレビューするというやり方なので、

Dreamweaverのライブプレビューなどの機能は使っていなかったのです。

また、Dreamweaverのスニペットをずっと使ってたんですが、

どこかのバージョンでバグが発見されて、

それをフォーラムに投稿して色々やったのに解決せず、

結局スニペットを使うのをやめて、

パソコン自体にスニペットを登録する方法に変更していました。

お気に入りはClipyです。

さて、少し前から僕もコーディングでVSCodeを使用しています。

色々初期設定を済まし、少し使いやすくなりました。

そろそろ、スニペットも使うか、というお話。

まずはスニペットを登録する画面

ここから、

html.json

php.json

に追加していきます。

やり方はこちらを参照

https://zenn.dev/miz_dev/articles/157a7aaad0bdcf

具体的には

{
  //ここから
  "スニペット名": {
    "prefix": "呼び出すためのショートカット",
    "body": [
      "出力コードの1行目",
      "出力コードの2行目",
      "..."
    ],
    "description": "スニペットの説明文" //任意
  }
  //ここまでが1つのスニペット
}

こういう記載です。

出力する

登録すると、

htmlコードのコーディング中に　スニペット名　と入力しようとすると、選択肢が出てきて選べるようになり、選ぶと

出力コードが出るという感じ。W100が自分で作ったやつ。

phpの中でのコードは　php.jsonに書いていけば出ます。

簡単に登録する方法

登録する際の出力コードが少しむずかしいです。

普通のHTMLではなく、

\tがタブとか

“を入れたかったら\” とかにしなければならず大変です。

そこであるかなと調べてみたらありました。

どこかの勇姿が公開していました。

VSCodeスニペット用コード作成ツール

https://migi.me/vsc_snippet/

これに普通にスニペットにしたいコードを入力して変換すれば、

コピペでスニペットを登録できます。

ホームページ制作ならFULL ウェブデザインにお任せ下さい。

開業１２年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム