⚒️

vscodeのUser Snippetsを利用して爆速でコーディングする

2021/12/08に公開

スニペットとは

あらかじめ用意されている「雛形」のようなもので、特定のキーワードを入力することで呼び出すことができる。機能のことをvscode(Visual Studio Code)では指している。
これをユーザー独自に雛形を作成することができるのが、「ユーザースニペット」です。

Snippets in Visual Studio Codeより

登録手順

1.ユーザースニペット設定ファイルを開く

「 Shift + cmd + P」でコマンドパレットを開き、Preferences: Configure User Snippetsを入力します。

次に、スニペットを作成したい言語を選択します。

今回は、reactのコンポーネントの雛形を作成したいのでtypescriptreact.jsonを選択します。

typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
}

2.ユーザースニペット設定ファイルを編集する

今回私が作成したスニペットはEmotionを利用したReactコンポーネントの雛形です。

typescriptreact.json

{
  "emotion react component": { // ①
    "prefix": "createEmotionComponent", // ②
    "body": [ // ③
      "import styled from '@emotion/styled'",
      "",
      "export type Props = {}",
      "",
      "export const Component: React.FC<Props> = ({children, ...props}) => {",
      "\treturn (",
      "\t\t<$TM_FILENAME_BASE {...props}>",
      "\t\t\t{children}",
      "\t\t</$TM_FILENAME_BASE>",
      "\t)",
      "}",
      "",
      "const $TM_FILENAME_BASE = styled.div<Props>(() => ``)",
      "",
      "export { Component as $TM_FILENAME_BASE }"
    ],
    "description": "create emotion component" // ④
  }
}

上記スニペットの振ってある番号ごとに解説していきます。

① スニペットのkey名、ルールは特になく、利用されることもないので適当で良い。
② スニペットを呼び出す為のコマンド名。
③ スニペットを呼び出した結果出力される内容。特定の文字列を扱うことで、ファイル名などを引用することができます。
④ このスニペットの詳細。

この雛形を呼び出すことで、サクッと初回のお決まりを作成できるようになりました。

3.スニペットの呼び出し

tsxファイルを作成してprefixに記載した文言で今回作成したスニペットを呼び出します。

表示されたcreateEmotionComponentを実行することで、登録したスニペットが表示されます。

以上でvscodeを利用してのユーザースニペットの登録方法を終了します。

最後に

決まった何度も書く定型コードをこれを使えば大幅な時短につながるので私は大変重宝しています。
是非ご活用ください！