Visual Studio Codes での snippets の作り方

職場では atom　を使って snippets を使っているけど、ちょっと visual studio code での snippets も欲しいと思い探し始める。

参考リンク

• Visual Studio Code ソースコードはスニペットと「Ctrl + space」で書いちゃいなよ{発行元: MSeeeen, 発行日時: 2018/06/13}
• Better way to define multi-line code snippets in VS code?{Org: stack overflow, Time: 2017/01/25}

  • 引用

    • 投稿主
      • In Sublime Text you can define multi-line code snippets with whitespaces in a snippet file as you write a regular document, but when it comes to the similar multi-line snippets in Visual Studio Code, as far as I know it has to be a JSON entry where you have to break down each line into a double-quoted string element in a list, or use explicit ASCII linebreak (\n) characters in one string.
      • I wonder if there are better ways for defining code snippets, especially when it's long.
    • 回答者
      • I cannot find a good way to create multi-line snippets either. It's probably one of the features I'd like to see improved the most. As another answer suggested, there are a couple extensions out there to help with Snippet creation (like this and this). However, they don't escape literal dollar signs and indentation isn't great.

  • コメント

    • どうやら Visual Studio Code の Snippets 登録は優しくないらしく現状は一気にコピペで埋めれるようなものはないそうである。atom は snippets を .cson で実装しているがそれが問題か？json と cson の違いなんて分からないが。つまるところ atom でできた以下のような書き方が Visual Studio Code　では不可能であるということだ

        "link テンプレ": {
            "prefix": "link",
            "body": [
                """
                console.log('$1');,
                aaaa
                """
            ],
            "description": "Log output to console"
        }
    

実作業

1. snippets を開く。
   • ファイル → 基本設定 → ユーザースニペット
     • alt f, p, ss, で 行けた。
       • 
2. markdown.jsonを開く
   • 
3. snippets を記述する。
   • Visual Studio Code ではどうやら インデントなども "" で区切らないといけないようなである。
     • 
   • よってやり方は以下のようにやるのがいいだろう。
     1. body 部分を書いたり貼り付けたりする。
     2. 先頭行を ctrl + alt で複数個所同時選択。
     3. 先頭に" をつける
     4. alt + end で最後まで行って ", を最後につける。
     5. 一番最後の行に , はいらないので抜かす

最後に

json と cson の違いとかで snippets の追加の仕方が難しくなっているなどがわかる方がいたら是非教えてください。

2019/11/04 修正

コードブロックがうまくできていなかったので修正しました。