✏️

VSCodeでのスニペットのスコープについて

2023/01/06に公開

VS Code

snippet

tech

はじめに

こちらでVSCodeでのスニペットの作成について記事にしましたが、Zennでの執筆を超えた範疇で利用したい場合、そのスニペットのスコープを絞りたい/グローバルスコープで使いたい、ということがあります。

例えば言語に依存しないスニペットを作成したい場合はグローバルの方が良いでしょう。
また私はVSCodeでシナリオの執筆もしているので用語集をスニペットで作成するために、そのプロジェクト(=作品)だけで利用できるように設定しています。

スニペットの種類

VSCodeの公式ページには、設定可能なスニペットのスコープとして以下が列挙されています。

Language snippet scope
言語に依存したスニペット
- 指定した言語のみで利用可能なスニペット
- すべての言語で利用可能なスニペット(Global snippet)
Project snippet scope
プロジェクトに依存したスニペット

また以下の通り記述されているように何も意識せずにユーザスニペットを作成すると指定した1言語のみで利用可能なスニペットが作成されます。

Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.

複数言語/グローバルスコープの設定

基本的なスニペットの作成についてはこちらの項目をご参照ください。

この場合、選択した言語のみ対応したスニペットが作成されます。
複数言語もしくはグローバルスコープに対応したスニペットを作成したい場合は、いずれも以下の手順で作成した"global" snippet filesに記述します。

File>Preference>Configure User Snippets
New Global Snippets Fileを選択
適当なファイル名を入力しファイルを作成

作成したファイルには以下の通り使用例が載っています。

"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
    "console.log('$1');",
    "$2"
],
"description": "Log output to console"
}

この内、"scope"で言語を指定してください。 ^[1]
この時、何も指定しないとグローバルスコープと解釈されます。

In a global snippets file, a snippet definition may have an additional scope property that takes one or more language identifiers, which makes the snippet available only for those specified languages. If no scope property is given, then the global snippet is available in all languages.

プロジェクトスコープの設定

プロジェクトスコープのスニペットは以下の通り作成できます。

File>Preference>Configure User Snippets
**New Snippets file for ...**を選択
適当なファイル名を入力しファイルを作成

するとプロジェクトフォルダのルートに.vscode/[ファイル名].code-snippetsが作成されるのでこちらに記述していきます。

この時、先ほどと同様にscopeで言語の指定もしくはグローバルスコープのスニペットを作成可能です。

脚注

各言語の識別子については以下のページを参照してください。
https://code.visualstudio.com/docs/languages/identifiers ↩︎

はじめに

スニペットの種類

複数言語/グローバルスコープの設定

プロジェクトスコープの設定

Discussion