• ホーム
  • PC
  • Visual Studio Codeで定型文（スニペット）を入力する

Visual Studio Codeで定型文（スニペット）を入力する

目次

  1. スニペット（Snippet）とは
  2. 自分のスニペット（定型文）を作る
  3. ユーザースニペットの書式
  4. prefix（トリガー）を設定する
  5. body（スニペットの本文）を設定する
  6. タブストップを設定する
  7. タブストップの既定値を設定する
  8. タブストップの選択肢を設定する
  9. 組み込み変数をスニペット内で使う
  10. 実際の設定例

スニペット（Snippet）とは

スニペット（snippet）というのは、短いテンプレートのようなものです。定型文と言っても良いです。

Visual Studio Code（VSCode）では、Ctrl+Spaceでスニペットの一覧が表示され、Tabで選択して入力できます。Ctrl+Spaceを押すまでもなく、何らかの文字を入力した時点でIntelliSenseが候補を表示してくれる場合もあります。

VSCodeのスニペットは、単純な定型文を入力するだけではありません。入力後のカーソルの位置を指定できたり、選択肢を表示できたりと、上手に設定すれば非常に便利なしろものです。

自分のスニペット（定型文）を作る

VSCodeでは、スニペットはあらかじめ決められているものだけではなく、自分でスニペットを作ることができます。

しかも、プログラミング言語ごと（ファイルの拡張子ごと）に別々のスニペットを設定できます。

まず、メニューを「ファイル」→「ユーザー設定」→「ユーザースニペット」と選択していくと、プログラミング言語の一覧が表示されます。

言語の選択

ここでプログラミング言語を選択すると、新しい設定用ファイルが開いてその言語用のスニペットを設定できるようになります。

ユーザースニペットはスニペットを定義するファイルに記載するのですが、このファイルの管理はVSCodeが管理します。Windows10の場合、具体的には「言語名.json」という名前のファイルが作られて、ユーザーのアプリの個々の設定を保存するフォルダ（c:\users\user_name\AppData\Roaming\Codeなど）に保存されます。

スニペットの設定を記述するファイルはJSON形式です。コメントはC言語と同様に書けます。スニペットを設定できる数には、一応限りがないことになっています。

スニペットの書式は、下記のような形になります。

"code-block": {
    "prefix": ["code", "code-block"],
    "body": [".. code-block:: $1",
    "$2"],
    "description": "Code Block"
    }

基本的には、スニペットの名前と、prefixと、bodyを設定すれば使えます。

ユーザースニペットの書式

ユーザースニペットの設定ファイルの書式について解説します。

prefix（トリガー）を設定する

スニペットを入力するときのトリガーになる文字列です。prefixに設定した文字列の入力を開始すると、intellisenseがスニペットの候補を表示します。

body（スニペットの本文）を設定する

bodyにはスニペット選択時に挿入される定型文を記載します。タブストップなどを設定すると、カーソルの位置をコントロールできます。

Pythonのリストのように、角括弧でくくって、1行毎の文字列をカンマ区切りで入力します。文字列はダブルクォーテーションでくくります。

"body": [
    "1行目",
    "2行目",
]

ダブルクォーテーションのくくりの中ではダブルクォーテーションが使えませんので、スニペットとしてダブルクォーテーションを出力したい場合は、バックスラッシュ（￥）でエスケープします。バックスラッシュ自身を出力する場合も、バックスラッシュでエスケープします。

タブや改行などのエスケープ文字も使えます。

例えば、下記のスニペットを設定します。

"test":{
    "prefix": "test",
    "body": [
        "double quote \" \n \t backslash \\",
    ]
}

そうしてtestとキー入力すると、下記のスニペットが入力されます。

double quote "
      backslash \

タブストップを設定する

スニペット内で$1や$2といった文字を記述すると、タブストップの設定ができます。タブストップを設定すると、Tabキーを押すことで設定した場所にカーソルを移動できます。

$1→$2→$3というように、Tabキーを押すと数字の順番にカーソルの位置が移動します。

例えば下記のようにコードスニペットを設定します。

"csv table": {
    "prefix": "table",
    "body": [
        ".. csv-table:: $1",
        "   :width: $2",
        "   :header-rows: $3",
        "   :stub-columns: $4",
    ]
},

そうすると、tableと入力するとスニペットの候補が表示され、その中からcsv tableを選択するとbodyの中の文字列が入力されます。

.. csv-table:: ①
   :width: ②
   :header-rows: ③
   :stub-columns: ④

このときカーソルは①の位置に移動します。①の部分を入力してTabを押すと、カーソルは②の位置に移動します。②の入力をしてTabを押すと、カーソルは③の位置に移動します。

このように、ユーザー自身が入力しなければならない箇所にタブストップを設定することで、カーソルの移動が楽になります。

$0は、最後にカーソルが到達する位置です。

1つのスニペット内に同一のタブストップ（例えば$1と$1）を複数設定すると、両方の位置でカーソルが有効になり、2箇所同時に入力できるようになります。

タブストップの既定値を設定する

${key: value}

${1:hoge}のようにタブストップを設定すると、既定値が設定できます。Tabキーを押してそのタブストップに移動してそのまま入力すると、既定値部分は上書きモードになって書き換えられます。

例えば、下記のように1番目のタブストップにfilenameという既定値を設定したとします。

"image": {
    "prefix": "image",
    "body": [
        ".. image:: ${1:filename}",
        "   :alt: $2"
    ]
},

imageと入力して、スニペットを選択すると、下図のように入力されます。

既定値の設定

カーソルが$1の位置（filenameと入力されている位置）に自動的に移動しますので、既定値（filename）のままでよければTabキーを押して次のタブストップに移動します。変更したい場合は、そのまま変更後の文字を入力すると既定値（filename）が上書きされます。

タブストップの選択肢を設定する

${key | value1, value2| }

${1|hogehoge, piyopito|}のようにタブストップを設定すると、Tabキーを押してそのタブストップに移動したときに選択できる、選択肢を設定できます。

例えば、下記のように1番目のタブストップに選択肢を設定します。

"code block": {
    "prefix": "code block",
    "body": [
        ".. code-block:: ${1|python,doscon,rst,cs,bash,text|}",
        "   ",
        "   $2"
    ]
},

codeと入力してスニペットを選択すると、下図のように表示されます。

選択肢の例

組み込み変数をスニペット内で使う

スニペット内でいくつかの組み込み変数を使用できます。組み込み変数を使用すると、ファイル名などのメタ情報を自動入力したり、タイムスタンプを自動入力するように設定できます。

メタ情報系

変数

内容

TM_SELECTED_TEXT

選択中の文字列

TM_CURRENT_LINE

現在の行

TM_CURRENT_WORD

カーソル位置の文字列

TM_LINE_INDEX

行番号（0始まり)

TM_LINE_NUMBER

行番号（1始まり）

TM_FILENAME

ファイル名

TM_FILENAME_BASE

ファイル名（拡張子を除く）

TM_DIRECTORY

ディレクトリ名

TM_FILEPATH

ファイルのフルパス

CLIPBOARD

クリップボードの中身

WORKSPACE_NAME

ワークスペースかフォルダ名

日時系

変数

内容

CURRENT_YEAR

年

CURRENT_YEAR_SHORT

年（下2桁）

CURRENT_MONTH

月（2桁表示）

CURRENT_MONTH_NAME

月（Julyなどの名前）

CURRENT_MONTH_NAME_SHORT

月（Julなどの短縮名）

CURRENT_DATE

日

CURRENT_DAY_NAME

曜日

CURRENT_DAY_NAME_SHORT

曜日（短縮名）

CURRENT_HOUR

時（24時間表記）

CURRENT_MINUTE

分

CURRENT_SECOND

秒

CURRENT_SECONDS_UNIX

UNIX秒

ブロックコメント（言語によって変化します）

変数

内容

BLOCK_COMMENT_START

HTMLの場合 <!--

BLOCK_COMMENT_END

HTMLの場合 -->

LINE_COMMENT

rstの場合..

試してみましょう。下記のようにスニペットの設定をします。

"test":{
"prefix": "test",
"body":[
    "$TM_SELECTED_TEXT > 選択中の文字列",
    "$TM_CURRENT_LINE > 現在の行",
    "$TM_CURRENT_WORD > カーソル位置の文字列",
    "$TM_LINE_INDEX > 行番号（0始まり)",
    "$TM_LINE_NUMBER > 行番号（1始まり）",
    "$TM_FILENAME > ファイル名",
    "$TM_FILENAME_BASE > ファイル名（拡張子を除く）",
    "$TM_DIRECTORY > ディレクトリ名",
    "$TM_FILEPATH > ファイルのフルパス",
    "$CLIPBOARD > クリップボードの中身",
    "$WORKSPACE_NAME > ワークスペースかフォルダ名"
]}

そしてスニペットを入力するとこうなります。

 > 選択中の文字列
test > 現在の行
test > カーソル位置の文字列
171 > 行番号（0始まり)
172 > 行番号（1始まり）
pc_vscode_snippets.rst > ファイル名
pc_vscode_snippets > ファイル名（拡張子を除く）
C:\Users\xxx\Desktop > ディレクトリ名
C:\Users\xxx\Desktop\pc_vscode_snippets.rst > ファイルのフルパス
クリップボードの中身 > クリップボードの中身
 > ワークスペースかフォルダ名

いろいろなメタ情報が入力されました。

日付系の変数を試してみましょう。

"test":{
"prefix": "test",
"body":[
    "$CURRENT_YEAR > 年",
    "$CURRENT_YEAR_SHORT > 年（下2桁）",
    "$CURRENT_MONTH > 月（2桁表示）",
    "$CURRENT_MONTH_NAME > 月（Julyなどの名前）",
    "$CURRENT_MONTH_NAME_SHORT > 月（Julなどの短縮名）",
    "$CURRENT_DATE > 日",
    "$CURRENT_DAY_NAME > 曜日",
    "$CURRENT_DAY_NAME_SHORT > 曜日（短縮名）",
    "$CURRENT_HOUR > 時（24時間表記）",
    "$CURRENT_MINUTE > 分",
    "$CURRENT_SECOND > 秒",
    "$CURRENT_SECONDS_UNIX > UNIX秒"
]}

このスニペットを入力するとこうなります。

2020 > 年
20 > 年（下2桁）
07 > 月（2桁表示）
7 月 > 月（Julyなどの名前）
7 月 > 月（Julなどの短縮名）
20 > 日
月曜日 > 曜日
月 > 曜日（短縮名）
22 > 時（24時間表記）
52 > 分
42 > 秒
1595253162 > UNIX秒

タイムスタンプをスニペットとして入力できるように設定してみます。

"now":{
    "prefix": "now",
    "body": [
        "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
    ]
},

スニペットの設定に上記を書き込んで保存してから、もとのテキストの編集画面でnowとキー入力すると、下記のように現在日時に変換されて入力されます。

2020-07-21 21:08:43

実際の設定例

プログラミング言語ではありませんが、reStructuredText用に下記のような設定をしています。

"meta description": {
    "prefix": "meta description",
    "body": [
        ".. meta::",
        "   :description: $1"
    ]
},
"code block": {
    "prefix": "code block",
    "body": [
        ".. code-block:: ${1|python,doscon,rst,cs,bash,text|}",
        "   ",
        "   $2"
    ]
},
"image": {
    "prefix": "image",
    "body": [
        ".. image:: ${1:filename}",
        "   :alt: $2"
    ]
},
"csv table": {
    "prefix": "table",
    "body": [
        ".. csv-table:: $1",
        "   :width: $2",
        "   :header-rows: $3",
        "   :stub-columns: $4",
    ]
},
Pythonでcsv形式の文字列データをパースする   PythonでHTMLから特定のタグを抜き出してCSVにする

公開日

広告

PCカテゴリの投稿