- 1. 概要
- 2. 日付入力
- 3. 保存
- 4. 特殊文字
- 5. 入力箇所
1. 概要
「Visual Studio Code」では、自前のスニペット（ユーザスニペット）を作成する機能があります。
2. 日付入力
まずは、入力可能な状態に・・・。
「ファイル」→「ユーザ設定」→「ユーザスニペット」
（ここ、「バージョン 1.95.2」では、「ユーザスニペット」でなく「スニペットの構成」になっています）
対象とする言語、もしくはグローバルを選択します。
ワークスペースを開いている状態であれば、対象とするディレクトリも選択肢になります。
ここでは、グローバルを選択したものとして
ファイル名を入力します。
デフォルトでは、何も定義されていない状態です。
下記は、本日の日付を入力する例になります。
書式は、簡単には、以下のとおり
{
"今日の日付": {
"prefix": ["date", "current-date", "今日"],
"body": ["$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE($CURRENT_DAY_NAME_SHORT)"],
"description": "今日の日付です。"
}
}
「prefix」へ、コード補完時に入力候補となる接頭辞を入力します。
「body」へ、補完する文字列を入力します。
「description」へ、説明を入力します。
「body」へは、「,（カンマ）」で区切って、複数行を入力することができます。
変数として入力可能なものがあり、例題では、「年」「月」「日」を表示しています。
変数として入力可能なものは、「【VSCode】Snippet 作成時に使える変数一覧まとめ - tk3118’s blog」に一覧があります。
とここまでやって、「月」「日」にゼロサプレスしたものがないことに気づきました。
「M 月」と出力されるものもありますが、わたしにとっては、不要な半角スペースが入ってしまいます。
なので、日付入力に関しては、わたしは、ユーザスニペットをあきらめ、拡張機能を使うことにしました。
日付入力の拡張機能に関しては、「Visual Studio Code - 拡張機能」をご参照ください。
3. 保存
さて、これで、とりあえず、「日付入力」は置いといて、自前のスニペットを作成することができました。
ファイル名をつけて保存します。
で、これを他のマシンへも展開しようと思いましたら、ファイル名はわかっているものの、どこに保存されているかが、わかりませんでした。
調べたら、下記に保存されていました。
c:\Users\ユーザ名\AppData\Roaming\Code\User\snippets\ファイル名.code-snippets
「setting.json」とは、少しネストが、違うところなのね。
4. 特殊文字
特殊文字は、「\」や「$」でエスケープして記述します。
気づいたものをメモしておきます。
| 文字 | 記述 | 備考 |
|---|
| タブ | \t | スニペットが赤く表示されていました |
| " | \" | 文字をこれて囲むのでね |
| $ | $$ | 「$1」で、入力後のカーソル位置になるもので |
5. 入力箇所
入力箇所は、「$1」を記入しておきます。
自動補完後に、「$1」の個所にカーソルが移動して、入力待ちになります。
「$1」に続けて、「$2」「$3」と複数の入力箇所を定義することができます。
複数の入力箇所がある場合、「$1」の個所入力後、TAB キーで次の入力箇所へ移動します。
本サイトで、項の個所は「<h4>」で記述しておりますが、スニペットで
"h4":
{
"prefix": [ "h4" ],
"body":
[
"<h4 id=\"$1.\">$1. $2</h4>"
]
},
と記述してあります。
本項の場合
h4
と入力した時点で、候補が表示されますので、Enter を入力して、下記の状態になります。
<h4 id=".">. </h4>
最初の「.」の後ろに、カーソルが位置していますので、本項の場合、「5」を入力します。
２個所、同じ「$1」で定義してありますので、同時に２つ入力できます。
<h4 id="5.">5. </h4>
入力後、TAB キーを押せば、「</h4>」の前にカーソルが移動しますので、項目のタイトルを入力するわけです。
|
