VSCodeのUser Snippetを活用しよう！

# はじめに

VSCodeには様々なカスタマイズをできるAPIが提供されていますが、簡単に設定できてとても便利になるUser Snippetという機能があって、あまり知られていない気がしたので紹介します！

私はフロントエンドエンジニアなので、後半の例ではフロントエンドで多用するものが多くなっています。(React多め)

# Snippetとは

Snippetとはコードの切れ端を表すもので、切り貼りで再利用できるコードのことをいいます。
短い文字列に設定されたエイリアスを入力してTabやカーソルで選択することでコードのテンプレートを利用できる機能が最近のエディタにはあります。

HTMLの有名なEmmetの例
![スクリーンショット 2020-09-23 2.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615997/4d34b736-bd22-5fa0-fb36-1a296aa1fe16.png)


この項目が、VSCodeでは簡単な定義ファイルを一つ作るだけでオリジナルのSnippetを作ることができます。

# 設定の方法

プロジェクトのメンバーで共有したいSnippetはプロジェクトないの`.vscode`ディレクトリ内に作って、gitなどで共有すればいいですし、自分のみで使いたいSnippetがあった場合は`Code/User/snippets/`ディレクトリ内に作ることで自分だけのSnippetを作ることができます。
`Code/User/snippets/javascript.code-snippets`などに作ると、その言語を対象としたSnippetを作ることができます。

`Code`ディレクトリはMacなら`~/Library/Application Support/Code`、Windowsなら`C:\users\{username}\AppData\Local\Programs\Microsoft VS Code`にあります。

Macなら`⌘ + Shift + P`、Windowsなら`Ctrl + Shift + P`を押すことでコマンドパレットが開き、`>snippets`と入力することで、Snippetのファイルを開いたり生成することができます。

![スクリーンショット 2020-12-30 18.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615997/9b021b66-9b5d-cc39-eb3f-ebd616832127.png)

そして、作成したファイルの中にJSONの形式で以下のように記述していくだけです。

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

`scope`はどの言語でこのsnippetsを利用するかを指定します。
この例だと`javascript`と`typescript`のコードで利用できます。

`prefix`はどのように入力したときのこの候補を出すかを指定します。
`javascript`か`typescript`のコードの中で`log`と入力するとこの候補が出てくるようになります。

`discription`は、snippetが表示される時にこの内容が説明として表示されます。

![スクリーンショット 2020-12-30 19.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615997/f0ac96d9-fd1c-2159-ec87-f52958bf86a2.png)

そして、`body`が実際にsnippetとして入力される内容です。
文字列で指定することもできますし、配列の形式で複数行を指定することもできます。
この時に、`$1`などを使うとその場所にカーソルがある状態で入力されて、Tabキーで`$1`から順番に切り替えながら入力ができるようになります。

`${1:hoge}`のようにしておくことで、プレースホルダーを設定しておくことも可能です。

![スクリーンショット 2020-12-30 19.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615997/b3b7d3ba-160b-8d7e-b674-5701e8d3d633.png)


さらに詳しく知りたい人は以下のリンクを参照してください。
[Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)

本当によく使うSnippetの場合はキーボードショートカットに設定すると便利かもしれません。
[Assign keybindings to snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_assign-keybindings-to-snippets)


## 使い方の例

### Reactのコンポーネントのテンプレート

Emotion使うとか、PropTypes使うとか、その他プロジェクトの内容に応じてカスタマイズして、プロジェクトのuser snippetsに登録しておくと多少楽になるかも。

`.vscode`ディレクトリをgitで管理しておけばプロジェクトメンバーも使えるようになるので、書き方の揺れとかも少なくなるかも。

`scope`はjsなら`javascriptreact`、tsなら`typescriptreact`になります。

```json
{
  "reactfc": {
    "scope": "typescriptreact",
    "prefix": "reactfc",
    "body": [
      "import React from 'react'",
      "",
      "type Props = {",
      "  ${1:className?: string}",
      "}",
      "",
      "export const Hello: React.FC<Props> = (props) => {",
      "  const { ${2:className} } = props",
      "",
      "  return <div className={className}>$3</div>",
      "}",
      ""
    ],
    "description": "Reactコンポーネントのテンプレート"
  }
}
```

### よく書くコードのパターン

useStateとかよく使うパターンについて設定しておくと楽になります。
正規表現を使って文字を置き換えるようにしておくことで、`$1`のstateの変数を入力した後Tabキーを押すことで、`set${1}`の部分を`State`のように大文字に変換して入力するように設定もできます。

参考: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholdertransform

少し設定が難しいですが、使いこなせるようになればとても便利です。

`useCallback`, `useEffect`などよく使うパターンは登録しておくとコーディングが早くなります。

```json
{
  "useState": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "useState",
    "body": [
      "const [${1:state}, set${1/^(.)(.*)$/${1:/upcase}${2}/}] = useState($2)"
    ],
    "description": "useStateのテンプレート"
  }
}
```

### よく使うCSS

#### absoluteで中央寄せするやつ

たまに使うけどどうだったか覚えてないので調べがち

```json
{
  "absolute center": {
    "scope": "css,scss",
    "prefix": "absolute center",
    "body": [
      "position: absolute;",
      "top: 50%;",
      "left: 50%;",
      "transform: translateY(-50%) translateX(-50%);"
    ],
    "description": "absoluteの中央寄せ"
  }
}
```

#### flex

よく使うパターンは登録しておくと楽になる

```json
{
  "flex row": {
    "scope": "css,scss",
    "prefix": "flex row",
    "body": [
      "display: flex;",
      "flex-direction: row;"
    ],
    "description": "flex row"
  },
  "flex column": {
    "scope": "css,scss",
    "prefix": "flex column",
    "body": [
      "display: flex;",
      "flex-direction: column;"
    ],
    "description": "flex column"
  },
  "flex center": {
    "scope": "css,scss",
    "prefix": "flex center",
    "body": [
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "flex center"
  }
}
```

# まとめ

VSCodeのUser Snippetを実際に使ってみて便利だと思ったので、これは布教していきたいと思って記事を書いてみました。
是非参考にして、皆さんのプロジェクトを便利にしていってください！

## 参考
- [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
- [VSCodeのスニペット機能をより便利にする方法](https://qiita.com/aki77/items/dc0287605ffc43bc9114)