【VSCode】スニペットの設定方法


## 設定方法

VSCodeを開いて画面左下の歯車アイコンをクリックします。  
「ユーザースニペットを構成」をクリックします。
![スクリーンショット 2022-08-25 13.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/f8f8cb9b-9568-9777-22bf-50d002873c27.png)
すると以下のように表示されますのでグローバルまたは対象の言語を選択します。
![スクリーンショット 2022-08-25 13.47.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/578f13e1-18a2-3e4d-41b8-21207668c2d6.png)
今回は「Markdown」を選択します。  

`~/Library/Application Support/Code/User/snippets/markdown.json`が作成されます。  
作成されたファイルに以下のように記述することでスニペットの設定ができます。  

```json :markdown.json
{

  "スニペットの名前": {
    "prefix": "キーワード",
    "body": "入力する内容",
    "description": "スニペットの説明"
  }

}
```

たとえば以下のように設定すると`sample`で`body`の文章が入力されます。

```json :markdown.json
  "sample": {
    "prefix": "sample",
    "body": "スニペットで入力された文章です。",
    "description": "スニペットの説明はここに表示されます。"
  }
```

![スクリーンショット 2022-08-25 14.44.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/cbedb4e4-0b87-41f3-7414-d2945e78d8ce.png)
上画像の状態でEnterを押すと文章が入力されます。
![スクリーンショット 2022-08-25 17.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/caf64a9c-8875-cefd-bd75-2301cc23f48e.png)

### 複数行のスニペット

`body`を配列で記述すると改行されます。

```json :markdown.json
  "sample": {
    "prefix": "sample",
    "body": [
      "1行目",
      "2行目"
    ],
    "description": "スニペットの説明"
  }
```

以下のように入力されます。

```markdown :sample.md
1行目
2行目
```

### タブの挿入

タブは`\t`で挿入できます。

```json :markdown.json
  "collapsible section": {
    "prefix": "collapsible",
    "body": [
      "<details>",
      "\t<summary></summary>",
      "</details>"
    ],
    "description": "折りたたみ可能なセクションの追加"
  }
```

### タブストップ

以下のようにすると入力された際に`$1`の箇所にカーソルが移動しTabで`$2`に移動できます。

```json :markdown.json
  "collapsible section": {
    "prefix": "collapsible",
    "body": [
      "<details>",
      "\t<summary>$1</summary>",
      "\t$2",
      "</details>"
    ],
    "description": "折りたたみ可能なセクションの追加"
  },
```

`collapsible section`の`body`が入力されると`$1`の箇所にカーソルが移動します。
![イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2c275aaa-5921-a5c4-ee05-927ceca77780.png)
Tabを押すと`$2`に移動します。
![イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/469be98c-ea19-38f1-2f04-58027148e6ca.png)

初期値や変数も設定できます。
詳細については以下のページをご参照ください。

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

## 使用方法

### `キーワード + Tab`

設定したキーワードを入力してTabを押すことでスニペットを使用するには`setting.json`に以下のように記述します。

```json :setting.json
{
  "editor.tabCompletion": "onlySnippets",
}
```

特定の言語にのみ設定する場合には以下のとおりです。

```json :setting.json
{
  "[markdown]": {
    "editor.tabCompletion": "onlySnippets",
  },
}
```

## サジェスト

サジェストを利用してスニペットを使用するには`setting.json`に以下のように記述します。

```json :setting.json
{
  "editor.quickSuggestions": {
    "comments": "off",  // コメント部分
    "strings": "off",  // 文字列部分
    "other": "on"  // その他
  },
}
```

![スクリーンショット 2022-08-25 14.44.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/cbedb4e4-0b87-41f3-7414-d2945e78d8ce.png)
`editor.snippetSuggestions`を`top`に設定するとサジェストの上の方にスニペットを表示させられます。

```json :setting.json
{
  "editor.snippetSuggestions": "top",
}
```