VSCodeスニペットではかどる話。

スニペットとは

これ↓

言語や拡張機能によって実装されていますが、これを自分で設定する記事です。

基本的な設定

まず、[基本設定] → [ユーザースニペット]に移動します。

プロジェクトで作業している場合、'hogehoge'の新しいスニペットファイルという項目があるのでコチラを選択しましょう。ファイル名を尋ねられます。今回はsnippetとしました。

すると .vscode/snippet.code-snippets というファイルが生成されますね。

{
    // Place your hogehoge ワークスペース snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //   "scope": "javascript,typescript",
    //   "prefix": "log",
    //   "body": [
    //       "console.log('$1');",
    //       "$2"
    //   ],
    //   "description": "Log output to console"
    // }
}

コメントアウトの説明に沿えば実装できます。

例えばメソッド名の前に展開するドキュメンテーションコメントを実装したいとき。

{
    "EditorComment": {
        "prefix": "ec",
        "body": [
            "/**",
            " *",
            " *",
            " * @since $CURRENT_YEAR.$CURRENT_MONTH.$CURRENT_DATE",
            " * @author MY_NAME <contact@up-tri.me>",
            " */",
     ],
        "description": "Intert the documentation comment."
    }
}

としてあげると、プロジェクト内のコードエディタで ec とタイプすれば…

となります。（プロジェクトのリロード等は必要ありません）

Tips.

1. 現在時刻などを挿入したい

さっきの例でちゃっかり使いましたが、現在日時・時刻を挿入できる定数があらかじめ用意されています。

$CURRENT_YEAR
$CURRENT_YEAR_SHORT
$CURRENT_MONTH
$CURRENT_DATE
$CURRENT_HOUR
$CURRENT_MINUTE
$CURRENT_SECOND

など。

2. カーソルを動かしたい

$1, $2 … とすると、スニペット実行後にタブで各箇所を移動できます。（1, 2, 3 … の順にTabキーで移動していきます） また各箇所に初期値を設定する場合は${1:InitValue}のように設定できます。

例えば、TypeScriptのクラスモジュールのひな形を実装したいときは…

{
    "ExportedClass": {
        "prefix": "ex-cls",
        "body": [
            "export default class ${1:ClassName} ${2:extends Parent} ${3:implements Interface} {",
            "  constructor($4) {",
            "    super($4)",
            "  }",
            "}",
        ],
    }
}