VSCode で定型文を繰り返し入力する方法

VSCode でコーディングや文章を書いているときに、同じフレーズを繰り返し入力するシーンってよくありますよね。

こんなときに便利なのがスニペットです。

スニペットは「断片」という意味で、ほとんどの有名なエディタには、再利可能なソースコードや小さなテキストのフレーズを管理して、挿入する機能が備わっています。

昔からコーディングするときによく使われていた機能です。

VSCode にも当然、スニペットの機能が備わっています。

本記事では、VSCode でスニペットを使う方法を解説していきます。

基本的な使い方

基本的なスニペットの登録と呼び出し(挿入)の方法を説明します。

スニペットの管理の単位

スニペットはプログラミング言語やファイルの種類ごとに登録します。
Markdown 用、Python 用、HTML 用などです。
ファイルの拡張子ごとに登録するイメージです。

「プログラミング言語に依存しないスニペットはどうするの?」

そういう場合は、グローバルスニペットというどのシーンでも使えるスニペットがあるので、安心してください。

スニペットの登録

では、こんな署名をグローバルスニペットに登録してみましょう。

鬼猿
https://www.crz33.com/

まず、次の手順でグローバルスニペットのファイルを開きます。

  • VSCode のメニューから、「Code」「Prefference」「User Snippets」を選択
  • 「New Global Snippets file…」を選択
  • ファイル名に「MyGlobal」を入力(ファイル名は自由)

MyGlobal.code-sinippets というファイルができあがるので、次のような定義を追加します。

    "insert signature" : {
        "prefix": "signature",
        "body": [
            "鬼猿",
            "https://www.crz33.com/"
        ]
    }

設定した内容は非常に簡単です。

  • prefix が呼び出すときの名前
  • body が挿入されるスニペット(配列の各要素が改行される)

では、実際に使ってみましょう。

スニペットの呼び出し

スニペットを挿入したいところで、次の手順でスニペットを挿入できます。

  • Ctrl+Shift+P でコマンドパレットを表示
  • snippet を入力して、"Insert Snippet" を選ぶ(アシストが効きます)
  • signature を選ぶ

登録した以下の署名が挿入されます。

鬼猿
https://www.crz33.com/

スニペットをよく使うのであれば、"Insert Snippet"コマンドをショートカットに登録するのをおすすめします。

私は Ctrl+@ に “Insert Snippet" を割り当てています。

スニペットの一部を挿入したあとで入力する

「定型文なんだけど、この部分やあの部分は、スニペットを挿入したあと入力したいんだよな…」
というときは、カーソルが使えます。

次のように定義します。

    "insert sample" : {
        "prefix": "sample",
        "body": [
            "$1は$2です。"
        ]
    }

$1$2がカーソルです。

スニペットを挿入したあと、数字の小さい順にカーソルが移動します。
カーソルの移動は TAB です。

この例だと次のように操作していけば、スニペットと任意のフレーズの入力を組み合わせれます。

  • sample スニペットを挿入
  • ( $1 の位置にカーソルが移動)
  • 今日を入力して TAB
  • ( $2 の位置にカーソルが移動)
  • 晴れを入力してTAB
  • ( スニペットの最後にカーソルが移動 )

カーソルの最後は、スニペットの最後になるので、スニペットの挿入のあとに改行したい場合は次のように body の最後に空行を定義しておくとよいです。

    "insert sample" : {
        "prefix": "sample",
        "body": [
            "$1は$2です。",
            ""
        ]
    }

スニペットの一部に VSCode の変数を使う

今日の日付をスニペットで使うことができます。

VSCode で用意されてる変数は次のページで確認できます。
👉 Snippets in Visual Studio Code

試しに今日をスニペットしてみましょう。
定義は次の通りです。

    "insert sample" : {
        "prefix": "today",
        "body": [
            "$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日",
        ]
    }

挿入すると次のように挿入した日付になります。

2021年03月27日

まとめ

本記事では、繰り返し入力するフレーズに便利な VSCode のスニペットの使い方を紹介しました。

以上です、参考になれば幸いです。

VSCode

Posted by 鬼猿