Zenn
🎃

【VSCode】スニペットで開発効率ガン上がり！

2021/09/05に公開
VS Code
tech

【VSCode】スニペットで開発効率爆発！

皆さんは、エディタは何を使用していますか？最近は無料のエディタでもかなり賢く、様々な便利な機能が備わっています。今回は、その中でもVSCodeのスニペット登録機能を紹介します。この機能を使用すれば開発効率が上がると思いますので、ぜひやってみて下さい！

スニペットとは...?

まず、そもそもスニペットとは...?と思う人がいるかと思います。スニペットとは簡単に言うと、コードのテンプレートのようなものです。具体例を見ていきましょう。

例えば、htmlファイルを作成し、VSCodeで開きます。
開いた状態で! -> Tabを押します。
すると、以下のようにHTMLの雛形が作成されます。ここで作成された雛形をスニペットと思ってもらって大丈夫です。

これはhtmlを書いている人なら知っていると思います。

VSCodeのスニペット登録

上記の例は、VSCodeがあらかじめ用意しているものですが、VSCodeでは自分でスニペットを登録することができます。

VSCodeの左下の歯車アイコンからUser Snippetsをクリック

スニペットを登録したい言語など選択肢の表示

言語などを選択

自分は、React(JavaScript)）を選択しました。

選択したスニペット登録用のJSONファイルの表示

使用例がコメントアウトで説明されています。

javascriptreact.json
{
    // Place your snippets for javascriptreact 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"
    // }
}

簡単に説明すると、スニペットはJSON形式で登録します。

  • "Print to console"
    • スニペットのタイトルです。自由につけて下さい。
  • "prefix"
    • スニペットを生成する入力文字列です。エディタで入力すると候補として表示されます。
  • "body"
    • スニペットで生成するコードを記述します。
      • 配列で記述します。
      • コード１行分が、配列の１要素に当たります。
  • "$1"
    • プレースホルダーです。スニペットを生成した後、$1に値を入力できます。
    • 複数使用することで同じ値を各場所に入れることができます。
  • "$2"
    • プレースホルダーです。$1に値を入力後にTabを押して$2に値を入力できます。
    • 複数使用することで同じ値を各場所に入れることができます。
  • "description"
    • スニペットの説明です。自由につけて下さい。

自分が登録したスニペット例

登録したのはReactの関数コンポーネントのスニペットです。

javascriptreact.json
{
    "function component": {
    "prefix": "fc",
    "body": [
        "import React from 'react';",
        "import '../assets/sass/$2.scss';",
        "",
        "const $1 = () => {",
        "    return (",
        "        <div className=\"$2\">",
        "        </div>",
        "    )",
        "}",
        "",
        "export default $1",
        ""
    ],
    "description": "Template of function component."
}

以下の動画を見てもらえればわかりますが、以下の手順でコードを生成します。

  1. prefixであるfcを入力すると、候補(function component)が出てくるので、Enterを押す。
  2. $1に値を入力。ここではCounterと入力。
  3. Tabを押し、$2に値を入力。ここでは、coutnerと入力。

すると、一瞬でコードが生成されました！😊
是非、試してみて下さい！！！

※動画はgifのため、再生速度が遅くてすみません。

まとめ

今回はVSCodeにおけるスニペット登録機能について紹介しました。
よく使うコードであれば、登録しておいて損はありません。便利な機能を使いこなして、開発効率どんどん上げていきましょう。

Discussion