👏

VSCodeのユーザースニペット機能を利用する

2023/06/18に公開

VS Code

tech

はじめに

VSCode でスニペットを利用することで、開発体験を向上させることができます。

スニペットとは、コードの断片です。エディターで、エイリアスを入力することで、スニペットを呼び出すことができます。

メリット

スニペットのメリットは以下になります。

コードの記述時間を短縮
コードの記述ミスを削減
コードの記述を統一化

利用する２つの方法

スニペットは 2 つの方法で利用が可能です。

VSCode の拡張機能で提供されるスニペットを利用する
自身でスニペットを作成し利用する

VSCode の拡張機能で提供されるスニペットを利用

VSCode では、拡張機能でスニペットを提供しています。拡張機能をインストールすることで、スニペットを利用できます。

探し方

VSCode の拡張機能で登録されているスニペットの一覧をサイトから以下の確認できます。自身の利用している言語のスニペットを探してみてください。

React だと、以下の拡張機能が有名です。

インストール

「Install」をクリックします。

「Continue」をクリックします。

「Visual Studio Code.app を開く」をクリックし、VSCode を開きます。

「インストール」をクリックし、VSCode の拡張機能をインストールします。

利用方法

インストールが完了すると、スニペットが利用できるようになります。

「ES7+ React/Redux/React-Native snippets」の場合は以下のスニペットが利用できます。

問題点

拡張機能で使えそうなスニペットを登録する問題点として、使いこなすことが難しいことです。エイリアスが多すぎて覚えられないですし、たくさん表示されて煩わしいと思う人もいると思います。VSCode では、自分が独自でスニペットを登録し利用でき、これら問題点を解消できます。

自身でスニペットを作成し利用

自身でスニペットを登録する方法は２つあります。

全てのプロジェクトに登録する方法
特定のプロジェクトに登録する方法

全てのプロジェクトに登録する方法

command + shift + p でコマンドパレットを開き、「ユーザースニペット」と入力し、「スニペット：ユーザースニペットの構成」を選択します。

一覧が表示されますので、スニペットを適用させたい言語を選択することで、言語ごとにスニペットを登録できます。今回は「typescriptreact」を選択します。

Mac の場合、全てのプロジェクトに適応するために保存されたスニペットの保存ファイルは /Users/<username>/Library/Application Support/Code/User/snippets にあります。<username> には自身のユーザー名を入れてください。以下では、「typescriptreact」用に作成したスニペットの 1 ファイルだけ表示されています。

$ cd /Users/hayato94087/Library/Application\ Support/Code/User/snippets
$ pwd
/Users/hayato94087/Library/Application Support/Code/User/snippets
$ ls -l
total 8
drwx------@ 3 hayato94087  staff   96  6 14 05:33 ./
drwxr-xr-x@ 4 hayato94087  staff  128  5  3  2022 ../
-rw-r--r--@ 1 hayato94087  staff  738  6 14 05:34 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. 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": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Console.log (独自スニペット)": {
    "prefix": "cl",
    "body": ["console.log('$1');", "$2"],
    "description": "console.log snippet"
  },
  "React Functional Component (独自スニペット)": {
    "prefix": "fc",
    "body": [
      "import {FC} from 'react'\n",
      "interface ${1:$TM_FILENAME_BASE}Props {}\n",
      "const ${1:$TM_FILENAME_BASE}: FC<${1:$TM_FILENAME_BASE}Props> = ({}) => {",
      "  return (",
      "    <div className=''>",
      "      <div>${1:$TM_FILENAME_BASE}</div>",
      "    </div>",
      "  );",
      "};\n",
      "export default ${1:$TM_FILENAME_BASE};"
    ],
    "description": "React Functional Component snippet"
  },
}

以下の用に、エイリアスを入力することでスニペットを呼び出すことができます。

特定のプロジェクトに登録する方法

Zenn で GitHub 連携しながら記事を書く場合、Zenn 独自のマークダウンの記載方法は、このプロジェクト以外では使わないため、全てのプロジェクトには登録しないほうが良いかもしれません。特定のプロジェクトに登録する方法を紹介します。

command + shift + p でコマンドパレットを開き、「ユーザースニペット」と入力し、「スニペット：ユーザースニペットの構成」を選択します。

「<プロジェクト名>の新しいスニペットファイル」を選択します。今回はプロジェクト名は「zenn-content」になります。

スニペットファイル名を指定します。今回は sample とします。

sample.code-snippets が .vscode ディレクトリに作成され、sample.code-snippets ファイルが作成されます。

以下の通り登録します。

sample.code-snippets

{
	// Place your zenn-content プロジェクト snippets here. Each snippet is defined under a snippet name and has a scope, 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"
	// }
  "Markdown Code with File": {
    "scope": "markdown",
    "prefix": "markdown-code-with-file",
    "body": ["```$1:$2", "$3", "```"],
    "description": "Code Block"
  }
}

以下の通り利用できるようになりました。