はじめに

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

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

Snippetとは

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

HTMLの有名なEmmetの例

この項目が、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のファイルを開いたり生成することができます。

そして、作成したファイルの中に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が表示される時にこの内容が説明として表示されます。

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

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

さらに詳しく知りたい人は以下のリンクを参照してください。
Snippets in Visual Studio Code

本当によく使うSnippetの場合はキーボードショートカットに設定すると便利かもしれません。
Assign keybindings to snippets

使い方の例

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

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

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

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

{
  "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などよく使うパターンは登録しておくとコーディングが早くなります。

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

よく使うCSS

absoluteで中央寄せするやつ

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

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

flex

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

{
  "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を実際に使ってみて便利だと思ったので、これは布教していきたいと思って記事を書いてみました。
是非参考にして、皆さんのプロジェクトを便利にしていってください！

VSCodeのUser Snippetを活用しよう！