Ashiras, inc. blog

若手による日々奮闘記

VSCodeの独自スペニットの作り方を調べてみた

スペニットとは?

スニペット
開発を楽で、確実に行うための要約文と解釈してもらうと良いかもしれません。
デフォルトのVSCodeの環境では、こんな感じです。

f:id:ic_lifewood:20171121202726p:plain f:id:ic_lifewood:20171121202745p:plain


独自のスニペットを作成

  • 公式サイト
  • 上記サイトでは、JavaScriptの For Loop スニペットを例としてあげています

実現方法

  • JSON形式で定義します。
  • ユーザー毎の(languageId).jsonに保存します。
  • 保存場所は、 OS 毎に下記の場所に保存されます。
    • Windows %APPDATA%\Code\User\snippets\(language).json
    • Mac $HOME/Library/Application Support/Code/User/snippets/(language).json
    • Linux $HOME/.config/Code/User/snippets/(language).json

実際のスペニット

  • 下図は、 Mikael.angular-beastcode-5.0.16 の定義です。 f:id:ic_lifewood:20171121204340p:plain

参考情報

所感

下記の場面で、活躍が期待できます。

  • JS / CSS の linter 用 スペニット
  • 会社/業務独自のスペニット
  • 各種コメントのスペニット