VSCodeのスニペットが思うように動かない?
- 最近、Bracketsが重いなぁと感じることがあって、Visual Studio Codeに鞍替えしました
- Visual Studio Codeには標準でスニペット機能がついています
- エディタ内で使えるユーザー辞書のようなもので、よく使うコードのまとまりを登録して、サッと使うことができます
- 改行込みで登録できるというのが本当に便利で、Bootstrapのカラム文などがものの数タッチで書けてしまいます
- これは便利だ採用。という機能なのですが、いざ使ってみようしたらあれこれつまずいてしまったのでメモを残しておきたいと思います
どこに書くの?
- いざスニペット用のjsonファイルを開いたものの、スニペットはどこに書けばいいの?というところで二の足
- デフォルトでコメントが用意されており、{}かっこで囲まれています
- スニペットはこの{}の中に書きましょう。外に書くとエラーを吐かれますし、動きません
二つ目以降はどう書くの?
- 一つ目のスニペットの閉じ括弧に「,」をつけて改行、改めて二つ目を書きましょう
フォーマットが間違っている?
- 貼り付けるコードは、所定のフォーマットに合わせた形に整える必要があります
- 一行ずつ""で囲んだり、$マークをエスケープしたりと、手動で行うのは面倒ですし、ミスも起きやすいです
- そんなときはスニペット作成用のツールを活用してみてください。
phpファイルからスニペットが呼び出せない?
- 「php.json」に登録したスニペットをphpファイル内で呼び出そうとしても、登録したスニペットが見当たりません
- どうやら、「php.json」に入れたスニペットは、<?php ~ ?>の中にカーソルがあるときにしか呼び出せないようです。phpファイルだからといって、どこからでも呼べるというわけではありませんでした
- なので、.phpファイルにhtmlタグなどのスニペットを呼びたいときは、「html.json」に登録する必要があるということですね
- 考えてみればhtmlタグのスニペットを「html.json」に入れるのは当たり前と言えば当たり前ですが、きちんとphpの開始タグを判定しているとは
タブでスニペットを呼び出したい
- スニペットを登録したはいいものの、逐一変換候補から呼び出すのは非効率です
- 設定の「editor.tabCompletion」をオンにしましょう。タブでガシガシスニペットが呼び出せます
デフォルトのスニペットよりも上に出したい
- タブで軽快に呼び出せるようになったものの、登録したスニペットの定義名(prefix)と、既存でVSCode側が用意してくれているスニペットの定義名が被っていると、既存の方が上に表示されてしまいます。年功序列の縦社会です
- 設定の「editor.snippetSuggestions」を「top」にしましょう。これで既存のスニペットよりも優先度が上になってくれます
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。