前提

環境

VS Code
MacOs 12.3.1
初心者

はじめに

調べたところ、ほとんどのサイトでこのように辿る方法が紹介されていました。中にはこれを使って "スニペットを作るスニペット" を作っている方もいらっしゃいました。それはそれでとても素晴らしいと感じたのですが、正直私はこのファイルを弄っていくには少し辛いものがあると感じました。そこで、Easy Snippetという拡張機能を見つけました。

後述で詳しく説明しますが、以下のような流れでスニペットが完成します。

サイドバーのアイコンをクリック
　　　　　▼
画面上部に出てくる入力画面に、
スニペットキー(呼び出す際の文字列)を入力
　　　　　▼
別タブでエディタが開くので、
普段通りにコードを書く(自動保存)

if (score >= 点数 && name == '名前') {
  console.log('メッセージ');
}

例えば、上記のような条件分岐をスニペットにしようとすると、

// @prefix if
// @description 
/* eslint-disable */

if (${1:condition} ${2|<,>,<=,>=,==,!=|} $3 ${5|&&,\|\|,!|} ${6:condition} ${7|<,>,<=,>=,==,!=|} $8) {
  $0
}

このようになります。それぞれの記号の働きなどは追って詳しく説明していきます。

スニペット登録手順

STEP 1

まずは、言語ごとのグループを作っていきます。ディレクトリを作って、そこへスニペットというファイルを格納していくイメージですね。

1-1. アイコンをクリック

上記のリンクあるいはこちらからEasy SnippetをVS Codeにインストールできたら、この辺り(1 : サイドバー)にアイコンが表示されているはずなのでこれをクリックしましょう。

1-2. `+`ボタンでグループを作成

1-3. 登録したい言語を検索

+ボタンをクリックすると検索ウィンドウが表示されるので、登録したい言語を入力しEnterを押します。すると新しく言語グループが追加されているはずなので、次のステップへ移りましょう。

STEP 2

赤枠にグループが追加されていることが確認できたら、実際にその言語のスニペットを作成していきましょう。

2-1. `+`ボタンでスニペットを作成

新しく作成されたグループは画像の赤枠に表示されていると思います。>の付いた言語グループにマウスホバーすると、+ボタンが表示されるので、これをクリックします。

2-2. スニペットキーを登録

+ボタンをクリックすると画面上部に検索ウィンドウが表示されるので、スニペットキー(prefix)を登録します。次のステップで登録するスニペットが、これを起点に展開されます。

STEP 3. 展開される構文を記述する

上記の工程でスニペットキーを入力しEnterを押したら、画像のようなファイルが新規に作成されます。画像の青線・矢印辺りから下に記述したものが全て、登録されたスニペットキーを起点に展開されます。

VS Codeであればファイルの自動保存がデフォルトで設定されているはずなので、展開させたい構文を記述できたら閉じてしまって構いません。

スニペットの記述ルール

記号の役割

記号	用途
$	数字と組み合わせることで、カーソルが止まる場所を指定できる 0(ゼロ)は最終地点を表す
:	文字と組み合わせることでplace-holderを表示できる
\| パイプライン	配列を設定する `tab`で移動したときに、セレクトメニューから設定した配列要素を選べる
\ バックスラッシュ	エスケープさせるコンピュータにとって意味のある文字(`$`, `\|`...)を、意味のないものにする

それでは、この記事の冒頭で紹介した例を使って解説していきたいと思います。

//スニペット
if (${1:condition} ${2|<,>,<=,>=,==,!=|} $3 ${4|&&,\|\|,!|} ${5:condition} ${6|<,>,<=,>=,==,!=|} $7) {
  $0
}
　　　　　▼
//入力結果
if (score >= 点数 && name == '名前') {
  console.log('メッセージ');
}

placeholderの設定

//スニペット
if (${1:condition} ${2|<,>,<=,>=,==,!=|} $3 ${4|&&,\|\|,!|} ${5:condition} ${6|<,>,<=,>=,==,!=|} $7) {
  $0
}

${1:condition}とすることで、1番目にカーソルの当たるところがconditionと表示されるようになります。右に行ったところへ${5:condition}とありますが、この数字を1に変えると、2か所を同時に入力させられます。

配列の設定

//スニペット
if (${1:condition} ${2|<,>,<=,>=,==,!=|} $3 ${4|&&,\|\|,!|} ${5:condition} ${6|<,>,<=,>=,==,!=|} $7) {
  $0
}

次に配列すなわちセレクトメニューですが、

${2|<,>,<=,>=,==,!=|}

このように、選択できるようにしたい要素の前後を|(パイプライン)で囲うことによって作ることができます。この例では、4番目にカーソルが来たときにも同じように選択できるようになっていますが、ここで注意が必要です。4番目の要素では、

&&(なおかつ) ||(もしくは) !(ではない)

という条件分岐に必要な記号を並べています。注意すべきはこの||(もしくは)です。ここでは\(バックスラッシュ)を入れてあげないと、うまく表示させられません。

さいごに

もっと色々と書こうと思ったのですが、これで一応はある程度のスニペットを作成できると思いますので一旦締めさせていただきます。