- 2024.01.18 UP !
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スニペット用コード作成ツール
これに普通にスニペットにしたいコードを入力して変換すれば、
コピペでスニペットを登録できます。
ホームページ制作ならFULL ウェブデザインにお任せ下さい。
開業12年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。
グラフィックデザインは20年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。
お気軽にお問い合わせください。
初回お問い合わせは、メールにてお願いいたします。

1980.11.26生まれ 2児の父 愛娘家 趣味:料理 DIY
2000年、名古屋栄の東京デザイナー学院名古屋校(現名古屋デザイナー・アカデミー)を卒業。
グラフィックデザイン歴25年以上、WEB制作歴20年以上。
30歳で起業。起業前は音楽活動(HIPHOP)、看板屋(看板・店内サイン制作)、デザイン会社(WEB等制作)などを経験